Horizontal scrollbar not selectable (on Linux?) - css
I have a Hugo template I am attempting to use. However, certain divs attempt to scroll horizontally, but on Chrome or Firefox on Linux I cannot manipulate the horizontal scroll bar. The horizontally scroll bar is present and looks normal, but I cannot move the slider.
Why is horizontal scrolling not working correctly on some browsers/OSes?
Interestingly, this appears to not be an issue on Chrome or FF when running Mac, which leads me to believe it's some kind of bizarre platform issue.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<article id="ARTICLE_1">
<div id="DIV_2">
<h1 id="H1_3">Getting started <a href="#" id="A_4" title=
"Permanent link">#</a></h1>
<h2 id="H2_5">Installation<a href="#installation" id="A_6" title=
"Permanent link">#</a></h2>
<h3 id="H3_7">Installing Hugo<a href="#installing-hugo" id="A_8" title=
"Permanent link">#</a></h3>
<p id="P_9">Hugo itself is just a single binary without dependencies on
expensive runtimes like Ruby, Python or PHP and without dependencies on any
databases. You just need to download the <a href=
"https://github.com/spf13/hugo/releases" id="A_10">latest version</a>. For
more information read the official <a href=
"http://gohugo.io/overview/installing/" id="A_11">installation
guides</a>.</p>
<p id="P_12">Let’s make sure Hugo is set up as expected. You should see a
similar version number in your terminal:</p>
<pre id="PRE_13"><code class="language-sh hljs bash" id=
"CODE_14">hugo version
<span class="hljs-comment" id=
"SPAN_15"># Hugo Static Site Generator v0.15 BuildDate: 2016-01-03T12:47:47+01:00</span>
</code>
</pre>
<h3 id="H3_16">Installing Material<a href="#installing-material" id="A_17"
title="Permanent link">#</a></h3>
<p id="P_18">Next, assuming you have Hugo up and running the <code id=
"CODE_19">hugo-material-docs</code> theme can be installed with <code id=
"CODE_20">git</code> :</p>
<pre id="PRE_21"><code class="language-sh hljs bash" id=
"CODE_22"><span class="hljs-comment" id=
"SPAN_23"># create a new Hugo website</span>
hugo new site my-awesome-docs
<span class="hljs-comment" id=
"SPAN_24"># move into the themes folder of your website</span>
<span class="hljs-built_in" id="SPAN_25">cd</span> my-awesome-docs/themes/
<span class="hljs-comment" id="SPAN_26"># download the theme</span>
git <span class="hljs-built_in" id=
"SPAN_27">clone</span> git#github.com:digitalcraftsman/hugo-material-docs.git
long line aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</code>
</pre>
<h2 id="H2_28">Setup<a href="#setup" id="A_29" title=
"Permanent link">#</a></h2>
<p id="P_30">Next, take a look in the <code id="CODE_31">exampleSite</code>
folder at <code id="CODE_32">themes/hugo-material-docs/</code> . This
directory contains an example config file and the content that you are
currently reading. It serves as an example setup for your documentation.</p>
<p id="P_33">Copy at least the <code id="CODE_34">config.toml</code> in the
root directory of your website. Overwrite the existing config file if
necessary.</p>
<p id="P_35">Hugo includes a development server, so you can view your
changes as you go - very handy. Spin it up with the following command:</p>
<pre id="PRE_36"><code class="language-sh hljs bash" id=
"CODE_37">hugo server
</code>
</pre>
<p id="P_38">Now you can go to <a href="http://localhost:1313" id=
"A_39">localhost:1313</a> and the Material theme should be visible. You can
now start writing your documentation, or read on and customize the theme
through some options.</p>
<aside id="ASIDE_40">
© 2017 Released under the MIT license – Documentation built with <a href=
"https://www.gohugo.io" id="A_41">Hugo</a> using the <a href=
"http://github.com/digitalcraftsman/hugo-material-docs" id=
"A_42">Material</a> theme.
</aside>
<footer id="FOOTER_43">
<nav id="NAV_44">
<div id="DIV_45"></div>
<div id="DIV_46">
<a href="http://localhost:1313/adding-content/" id="A_47" title=
"Adding content"><span id="SPAN_48">Next</span></a>
<div id="DIV_49">
<div id="DIV_50">
<div id="DIV_51">
Adding content
</div>
</div>
<div id="DIV_52">
<i id="I_53"></i>
</div>
</div>
</div>
</nav>
</footer>
</div>
</article>
</body>
</html>
CSS:
#DIV_1 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 808px;
text-size-adjust: 100%;
width: 699px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 349.5px 404px;
transform-origin: 349.5px 404px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgba(0, 0, 0, 0.870588) none 0px;
padding: 128px 24px 96px;
}
/*#DIV_1*/
#H1_2 {
box-sizing: border-box;
color: rgb(232, 78, 64);
height: 95px;
text-size-adjust: 100%;
width: 651px;
column-rule-color: rgb(232, 78, 64);
perspective-origin: 325.5px 47.5px;
transform-origin: 325.5px 47.5px;
border-top: 0px none rgb(232, 78, 64);
border-right: 0px none rgb(232, 78, 64);
border-bottom: 1px solid rgba(0, 0, 0, 0.117647);
border-left: 0px none rgb(232, 78, 64);
font: normal normal normal normal 24px / 32px Ubuntu, Helvetica, Arial, sans-serif;
margin: 0px;
outline: rgb(232, 78, 64) none 0px;
padding: 20px 0px 42px;
}
/*#H1_2*/
#A_3 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.258824);
display: block;
float: right;
height: 32px;
text-decoration: none;
text-size-adjust: 100%;
width: 9.34375px;
column-rule-color: rgba(0, 0, 0, 0.258824);
perspective-origin: 4.67188px 16px;
transform-origin: 4.67188px 16px;
border: 0px none rgba(0, 0, 0, 0.258824);
font: normal normal normal normal 14px / 32px Ubuntu, Helvetica, Arial, sans-serif;
margin: 0px 0px 0px 20px;
outline: rgba(0, 0, 0, 0.258824) none 0px;
transition: color 0.25s ease 0s;
}
/*#A_3*/
#H2_4, #H2_13 {
box-sizing: border-box;
color: rgb(232, 78, 64);
height: 128px;
text-size-adjust: 100%;
width: 651px;
column-rule-color: rgb(232, 78, 64);
perspective-origin: 325.5px 64px;
transform-origin: 325.5px 64px;
border: 0px none rgb(232, 78, 64);
font: normal normal normal normal 20px / 28px Ubuntu, Helvetica, Arial, sans-serif;
margin: -64px 0px 0px;
outline: rgb(232, 78, 64) none 0px;
padding: 100px 0px 0px;
}
/*#H2_4, #H2_13*/
#A_5, #A_14 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.258824);
display: block;
float: right;
height: 28px;
text-decoration: none;
text-size-adjust: 100%;
width: 9.34375px;
column-rule-color: rgba(0, 0, 0, 0.258824);
perspective-origin: 4.67188px 14px;
transform-origin: 4.67188px 14px;
border: 0px none rgba(0, 0, 0, 0.258824);
font: normal normal normal normal 14px / 28px Ubuntu, Helvetica, Arial, sans-serif;
margin: 0px 0px 0px 20px;
outline: rgba(0, 0, 0, 0.258824) none 0px;
transition: color 0.25s ease 0s;
}
/*#A_5, #A_14*/
#H3_6 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 107px;
text-size-adjust: 100%;
width: 651px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 325.5px 53.5px;
transform-origin: 325.5px 53.5px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal bold normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
margin: -64px 0px 0px;
outline: rgba(0, 0, 0, 0.870588) none 0px;
padding: 84px 0px 0px;
}
/*#H3_6*/
#A_7 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.258824);
display: block;
float: right;
height: 23px;
text-decoration: none;
text-size-adjust: 100%;
width: 9.34375px;
column-rule-color: rgba(0, 0, 0, 0.258824);
perspective-origin: 4.67188px 11.5px;
transform-origin: 4.67188px 11.5px;
border: 0px none rgba(0, 0, 0, 0.258824);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
margin: 0px 0px 0px 20px;
outline: rgba(0, 0, 0, 0.258824) none 0px;
transition: color 0.25s ease 0s;
}
/*#A_7*/
#P_8 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 46px;
text-size-adjust: 100%;
width: 651px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 325.5px 23px;
transform-origin: 325.5px 23px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
margin: 21px 0px 0px;
outline: rgba(0, 0, 0, 0.870588) none 0px;
}
/*#P_8*/
#CODE_9, #CODE_10 {
box-sizing: border-box;
color: rgb(232, 78, 64);
text-size-adjust: 100%;
white-space: nowrap;
column-rule-color: rgb(232, 78, 64);
background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(232, 78, 64);
font: normal normal normal normal 14px / 23.8px "Ubuntu Mono", "Courier New", Courier, monospace;
outline: rgb(232, 78, 64) none 0px;
padding: 2px 4px;
}
/*#CODE_9, #CODE_10*/
#PRE_11 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 78px;
text-size-adjust: 100%;
width: 699px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 349.5px 39px;
transform-origin: 349.5px 39px;
background: rgba(0, 0, 0, 0.0470588) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 21px "Ubuntu Mono", "Courier New", Courier, monospace;
margin: 21px -24px 0px;
outline: rgba(0, 0, 0, 0.870588) none 0px;
overflow: auto;
padding: 21px 24px;
}
/*#PRE_11*/
#CODE_12 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.8);
display: block;
height: 36px;
text-size-adjust: 100%;
white-space: pre;
width: 651px;
column-rule-color: rgba(0, 0, 0, 0.8);
perspective-origin: 325.5px 18px;
transform-origin: 325.5px 18px;
background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgba(0, 0, 0, 0.8);
font: normal normal normal normal 14px / 21px "Ubuntu Mono", "Courier New", Courier, monospace;
outline: rgba(0, 0, 0, 0.8) none 0px;
overflow: auto;
}
/*#CODE_12*/
#P_15 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 23px;
text-size-adjust: 100%;
width: 651px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 325.5px 11.5px;
transform-origin: 325.5px 11.5px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
margin: 21px 0px 0px;
outline: rgba(0, 0, 0, 0.870588) none 0px;
}
/*#P_15*/
#ASIDE_16 {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.541176);
height: 23px;
text-size-adjust: 100%;
width: 651px;
column-rule-color: rgba(0, 0, 0, 0.541176);
perspective-origin: 325.5px 11.5px;
transform-origin: 325.5px 11.5px;
border: 0px none rgba(0, 0, 0, 0.541176);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
margin: 21px 0px 64px;
outline: rgba(0, 0, 0, 0.541176) none 0px;
}
/*#ASIDE_16*/
#A_17, #A_18 {
box-sizing: border-box;
color: rgb(232, 78, 64);
text-decoration: none;
text-size-adjust: 100%;
column-rule-color: rgb(232, 78, 64);
border-top: 0px none rgb(232, 78, 64);
border-right: 0px none rgb(232, 78, 64);
border-bottom: 1px dotted rgb(232, 78, 64);
border-left: 0px none rgb(232, 78, 64);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(232, 78, 64) none 0px;
transition: color 0.25s ease 0s;
}
/*#A_17, #A_18*/
#FOOTER_19 {
bottom: 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
height: 96px;
left: 0px;
position: absolute;
right: 0px;
text-size-adjust: 100%;
top: 867px;
width: 961px;
z-index: 4;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 480.5px 48px;
transform-origin: 480.5px 48px;
background: rgb(232, 78, 64) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 0px 8px;
}
/*#FOOTER_19*/
#NAV_20 {
box-sizing: border-box;
color: rgb(255, 255, 255);
height: 96px;
max-width: 1184px;
text-size-adjust: 100%;
width: 945px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 472.5px 48px;
transform-origin: 472.5px 48px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
overflow: hidden;
padding: 8px 0px;
}
/*#NAV_20*/
#DIV_21 {
bottom: 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
float: left;
height: 80px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 472.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 236.25px 40px;
transform-origin: 236.25px 40px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}
/*#DIV_21*/
#DIV_22 {
bottom: 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
float: left;
height: 80px;
left: 0px;
position: relative;
right: 0px;
text-align: right;
text-size-adjust: 100%;
top: 0px;
width: 472.5px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 236.25px 40px;
transform-origin: 236.25px 40px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}
/*#DIV_22*/
#A_23 {
box-sizing: border-box;
color: rgb(232, 78, 64);
display: block;
height: 80px;
text-align: right;
text-decoration: none;
text-size-adjust: 100%;
width: 472.5px;
column-rule-color: rgb(232, 78, 64);
perspective-origin: 236.25px 40px;
transform-origin: 236.25px 40px;
border: 0px none rgb(232, 78, 64);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(232, 78, 64) none 0px;
transition: color 0.25s ease 0s;
}
/*#A_23*/
#SPAN_24 {
bottom: 40px;
box-sizing: border-box;
color: rgba(255, 255, 255, 0.701961);
display: block;
height: 20px;
left: 0px;
position: absolute;
right: 0px;
text-align: right;
text-size-adjust: 100%;
top: 20px;
width: 472.5px;
column-rule-color: rgba(255, 255, 255, 0.701961);
perspective-origin: 236.25px 10px;
transform-origin: 236.25px 10px;
border: 0px none rgba(255, 255, 255, 0.701961);
font: normal normal normal normal 15px / 20px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgba(255, 255, 255, 0.701961) none 0px;
padding: 0px 56px;
}
/*#SPAN_24*/
#DIV_25 {
bottom: 4px;
box-sizing: border-box;
color: rgb(232, 78, 64);
display: table;
height: 48px;
left: 0px;
position: absolute;
right: 0.5px;
text-align: right;
text-size-adjust: 100%;
top: 28px;
width: 472px;
column-rule-color: rgb(232, 78, 64);
perspective-origin: 236px 24px;
transform-origin: 236px 24px;
border: 0px none rgb(232, 78, 64);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(232, 78, 64) none 0px;
}
/*#DIV_25*/
#DIV_26 {
box-sizing: border-box;
color: rgb(232, 78, 64);
display: table;
height: 47px;
table-layout: fixed;
text-align: right;
text-size-adjust: 100%;
width: 424px;
column-rule-color: rgb(232, 78, 64);
perspective-origin: 212px 23.5px;
transform-origin: 212px 23.5px;
border: 0px none rgb(232, 78, 64);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(232, 78, 64) none 0px;
padding: 0px 8px;
}
/*#DIV_26*/
#DIV_27 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: table-cell;
height: 47px;
text-align: right;
text-size-adjust: 100%;
text-overflow: ellipsis;
white-space: nowrap;
width: 408px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 204px 23.5px;
transform-origin: 204px 23.5px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 18px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
overflow: hidden;
padding: 11px 0px 13px;
}
/*#DIV_27*/
#DIV_28 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: table-cell;
height: 48px;
text-align: right;
text-size-adjust: 100%;
vertical-align: top;
width: 48px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 24px 24px;
transform-origin: 24px 24px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 14px / 23.8px Ubuntu, Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}
/*#DIV_28*/
#I_29 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: inline-block;
height: 40px;
speak: none;
text-align: right;
text-size-adjust: 100%;
width: 40px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 20px 20px;
transform-origin: 20px 20px;
border: 0px none rgb(255, 255, 255);
border-radius: 100% 100% 100% 100%;
font: normal normal normal normal 24px / 24px Icon;
margin: 4px;
outline: rgb(255, 255, 255) none 0px;
padding: 8px;
transition: background 0.25s ease 0s;
}
/*#I_29*/
#I_29:before {
box-sizing: border-box;
color: rgb(255, 255, 255);
content: '""';
speak: none;
text-align: right;
text-size-adjust: 100%;
column-rule-color: rgb(255, 255, 255);
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 24px / 24px Icon;
outline: rgb(255, 255, 255) none 0px;
}
/*#I_29:before*/
This is causing your problem.
.article h2 {
padding-top: 100px;
margin-top: -64px;
}
Your H2 tag is overlapping the horizontal bar. So you should balance these numbers, I would do:
.article h2 {
padding-top: 36px;
margin-top: 0px;
}
Seems not affect your design. And respecting the previous proportion.
Make sure to change also your #media areas too.
EDIT: How I've discovered the problem, using the devTools. I realized the size of your h2 was overlapping.
Related
How to make <hr> same width as the horizontal menu?
I'm trying to style the menu with to have the horizontal line above it the same width, like on this Blue Note website. I can't seem to get it to scale right, I found this question is similar but it did not help me. I've tried a bunch of things and could really appreciate some help, I'm using WordPress with the Blaskan theme. Here is the Fiddle and the related HTML and CSS:
<nav id="NAV_1">
<button id="BUTTON_2">
Menu
</button>
<div id="DIV_3">
<h6 id="H6_4">
READING JAZZ - LISTENING TO LITERATURE
</h6><hr id="HR_5" />
</div>
<div id="DIV_6">
<ul id="UL_7">
<li id="LI_8">
News
</li>
<li id="LI_10">
Home
</li>
<li id="LI_12">
About
</li>
<li id="LI_14">
Contact
</li>
<li id="LI_16">
Jazz
</li>
<li id="LI_18">
Literature
</li>
<li id="LI_20">
Test
</li>
<li id="LI_22">
New
</li>
</ul>
</div>
#NAV_1 {
box-sizing: border-box;
color: rgb(137, 137, 137);
height: 227.538px;
overflow-wrap: break-word;
text-align: justify;
text-decoration: none solid rgb(137, 137, 137);
text-size-adjust: 100%;
width: 750px;
word-wrap: break-word;
column-rule-color: rgb(137, 137, 137);
perspective-origin: 375px 113.762px;
transform-origin: 375px 113.762px;
caret-color: rgb(137, 137, 137);
border: 0px none rgb(137, 137, 137);
font: normal normal 400 normal 14px / 25.9px Verdana;
margin: 0px 101.8px;
outline: rgb(137, 137, 137) none 0px;
padding: 0px 15px;
}/*#NAV_1*/
#NAV_1:after {
box-sizing: border-box;
clear: both;
color: rgb(137, 137, 137);
content: '"' '"';
display: table;
height: 0px;
overflow-wrap: break-word;
text-align: justify;
text-decoration: none solid rgb(137, 137, 137);
text-size-adjust: 100%;
width: 0px;
word-wrap: break-word;
column-rule-color: rgb(137, 137, 137);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(137, 137, 137);
border: 0px none rgb(137, 137, 137);
font: normal normal 400 normal 14px / 25.9px Verdana;
outline: rgb(137, 137, 137) none 0px;
}/*#NAV_1:after*/
#NAV_1:before {
box-sizing: border-box;
color: rgb(137, 137, 137);
content: '"' '"';
display: table;
height: 0px;
overflow-wrap: break-word;
text-align: justify;
text-decoration: none solid rgb(137, 137, 137);
text-size-adjust: 100%;
width: 0px;
word-wrap: break-word;
column-rule-color: rgb(137, 137, 137);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(137, 137, 137);
border: 0px none rgb(137, 137, 137);
font: normal normal 400 normal 14px / 25.9px Verdana;
outline: rgb(137, 137, 137) none 0px;
}/*#NAV_1:before*/
#BUTTON_2 {
color: rgba(0, 0, 0, 0.8);
cursor: pointer;
display: none;
height: auto;
overflow-wrap: break-word;
text-decoration: none solid rgba(0, 0, 0, 0.8);
text-size-adjust: 100%;
width: auto;
word-wrap: break-word;
column-rule-color: rgba(0, 0, 0, 0.8);
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
caret-color: rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgba(0, 0, 0, 0.8);
font: normal normal 400 normal 20px / 20px "Source Sans Pro", sans-serif;
margin: 0px auto;
outline: rgba(0, 0, 0, 0.8) none 0px;
padding: 20px 0px;
}/*#BUTTON_2*/
#BUTTON_2:after {
box-sizing: border-box;
color: rgba(0, 0, 0, 0.8);
content: '""';
cursor: pointer;
overflow-wrap: break-word;
text-decoration: none solid rgba(0, 0, 0, 0.8);
text-size-adjust: 100%;
word-wrap: break-word;
column-rule-color: rgba(0, 0, 0, 0.8);
caret-color: rgba(0, 0, 0, 0.8);
border: 0px none rgba(0, 0, 0, 0.8);
font: normal normal 400 normal 20px / 20px FontAwesome;
outline: rgba(0, 0, 0, 0.8) none 0px;
padding: 0px 0px 0px 20px;
}/*#BUTTON_2:after*/
#DIV_3 {
box-sizing: border-box;
color: rgb(137, 137, 137);
height: 28.4px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(137, 137, 137);
text-size-adjust: 100%;
width: 720px;
word-wrap: break-word;
column-rule-color: rgb(137, 137, 137);
perspective-origin: 360px 14.2px;
transform-origin: 360px 14.2px;
caret-color: rgb(137, 137, 137);
border: 0px none rgb(137, 137, 137);
font: normal normal 400 normal 14px / 25.9px Verdana;
outline: rgb(137, 137, 137) none 0px;
}/*#DIV_3*/
#H6_4 {
box-sizing: border-box;
clear: both;
color: rgb(51, 51, 51);
height: 22.4px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(51, 51, 51);
text-size-adjust: 100%;
width: 720px;
word-wrap: break-word;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 360px 11.2px;
transform-origin: 360px 11.2px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 18px / 22.5px "Droid Serif", serif;
margin: 41.94px 0px -4px;
outline: rgb(51, 51, 51) none 0px;
}/*#H6_4*/
#HR_5 {
color: rgb(137, 137, 137);
height: 3px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(137, 137, 137);
text-size-adjust: 100%;
width: 720px;
word-wrap: break-word;
column-rule-color: rgb(137, 137, 137);
perspective-origin: 279.2px 0.5px;
transform-origin: 279.2px 0.5px;
caret-color: rgb(137, 137, 137);
background: rgb(25, 23, 98) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(0, 0, 0);
font: normal normal 400 normal 13px / 16.003px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 7px 0px 16px;
outline: rgb(137, 137, 137) none 0px;
}/*#HR_5*/
#DIV_6 {
box-sizing: border-box;
color: rgb(137, 137, 137);
height: 171.2px;
overflow-wrap: break-word;
text-align: justify;
text-decoration: none solid rgb(137, 137, 137);
text-size-adjust: 100%;
width: 720px;
word-wrap: break-word;
column-rule-color: rgb(137, 137, 137);
perspective-origin: 360px 85.6px;
transform-origin: 360px 85.6px;
caret-color: rgb(137, 137, 137);
border: 0px none rgb(137, 137, 137);
font: normal normal 400 normal 14px / 25.9px Verdana;
margin: -30px 0px 0px;
outline: rgb(137, 137, 137) none 0px;
}/*#DIV_6*/
#UL_7 {
box-sizing: border-box;
color: rgb(25, 23, 98);
height: 171.2px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 720px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 360px 85.6px;
transform-origin: 360px 85.6px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
margin: 0px;
outline: rgb(25, 23, 98) none 0px;
padding: 0px;
}/*#UL_7*/
#LI_8, #LI_10 {
bottom: 0px;
box-sizing: border-box;
color: rgb(25, 23, 98);
display: inline-block;
height: 85.6px;
left: 0px;
overflow-wrap: break-word;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
top: 0px;
width: 87px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 43.5px 42.8px;
transform-origin: 43.5px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 0px 45px 0px 0px;
}/*#LI_8, #LI_10*/
#A_9, #A_11 {
box-sizing: border-box;
color: rgb(25, 23, 98);
display: block;
height: 85.6px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 42px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 21px 42.8px;
transform-origin: 21px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 30px 0px;
}/*#A_9, #A_11*/
#LI_12 {
bottom: 0px;
box-sizing: border-box;
color: rgb(25, 23, 98);
display: inline-block;
height: 85.6px;
left: 0px;
overflow-wrap: break-word;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
top: 0px;
width: 93.2375px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 46.6125px 42.8px;
transform-origin: 46.6125px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 0px 45px 0px 0px;
}/*#LI_12*/
#A_13 {
box-sizing: border-box;
color: rgb(25, 23, 98);
display: block;
height: 85.6px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 48.2375px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 24.1125px 42.8px;
transform-origin: 24.1125px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 30px 0px;
}/*#A_13*/
#LI_14 {
bottom: 0px;
box-sizing: border-box;
color: rgb(25, 23, 98);
display: inline-block;
height: 85.6px;
left: 0px;
overflow-wrap: break-word;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
top: 0px;
width: 111.625px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 55.8125px 42.8px;
transform-origin: 55.8125px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 0px 45px 0px 0px;
}/*#LI_14*/
#A_15 {
box-sizing: border-box;
color: rgb(25, 23, 98);
display: block;
height: 85.6px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 66.625px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 33.3125px 42.8px;
transform-origin: 33.3125px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 30px 0px;
}/*#A_15*/
#LI_16 {
bottom: 0px;
box-sizing: border-box;
color: rgb(25, 23, 98);
display: inline-block;
height: 85.6px;
left: 0px;
overflow-wrap: break-word;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
top: 0px;
width: 78.45px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 39.225px 42.8px;
transform-origin: 39.225px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 0px 45px 0px 0px;
}/*#LI_16*/
#A_17 {
box-sizing: border-box;
color: rgb(25, 23, 98);
display: block;
height: 85.6px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 33.45px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 16.725px 42.8px;
transform-origin: 16.725px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 30px 0px;
}/*#A_17*/
#LI_18 {
bottom: 0px;
box-sizing: border-box;
color: rgb(25, 23, 98);
display: inline-block;
height: 85.6px;
left: 0px;
overflow-wrap: break-word;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
top: 0px;
width: 131.087px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 65.5375px 42.8px;
transform-origin: 65.5375px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 0px 45px 0px 0px;
}/*#LI_18*/
#A_19 {
box-sizing: border-box;
color: rgb(25, 23, 98);
display: block;
height: 85.6px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 86.0875px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 43.0375px 42.8px;
transform-origin: 43.0375px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 30px 0px;
}/*#A_19*/
#LI_20 {
bottom: 0px;
box-sizing: border-box;
color: rgb(25, 23, 98);
display: inline-block;
height: 85.6px;
left: 0px;
overflow-wrap: break-word;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
top: 0px;
width: 80.7875px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 40.3875px 42.8px;
transform-origin: 40.3875px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 0px 45px 0px 0px;
}/*#LI_20*/
#A_21 {
box-sizing: border-box;
color: rgb(25, 23, 98);
display: block;
height: 85.6px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 35.7875px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 17.8875px 42.8px;
transform-origin: 17.8875px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 30px 0px;
}/*#A_21*/
#LI_22 {
bottom: 0px;
box-sizing: border-box;
color: rgb(25, 23, 98);
display: inline-block;
height: 85.6px;
left: 0px;
overflow-wrap: break-word;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
top: 0px;
width: 32.6625px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 16.325px 42.8px;
transform-origin: 16.325px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
}/*#LI_22*/
#A_23 {
box-sizing: border-box;
color: rgb(25, 23, 98);
display: block;
height: 85.6px;
overflow-wrap: break-word;
text-align: center;
text-decoration: none solid rgb(25, 23, 98);
text-size-adjust: 100%;
text-transform: uppercase;
width: 32.6625px;
word-wrap: break-word;
column-rule-color: rgb(25, 23, 98);
perspective-origin: 16.325px 42.8px;
transform-origin: 16.325px 42.8px;
caret-color: rgb(25, 23, 98);
border: 0px none rgb(25, 23, 98);
font: normal normal 400 normal 14px / 25.9px Helvetica;
list-style: none outside none;
outline: rgb(25, 23, 98) none 0px;
padding: 30px 0px;
}/*#A_23*/
Instead of using HR element, add a border-top CSS property to your menu
(either on LI element like example below, or on UL element)
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
border-top: 2px solid red;
float: left;
padding: 10px 5px;
background:#eee;
}
<div>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
<li>menu 6</li>
</ul>
</div>
Button changes shape after reload
First of all, I'm running Meteor with neo64:Bootstrap and a custom theme.
I've got a button which shows like this after I make an arbitrary change in my css and it hotpushes the new code:
Then after a page reload the button looks like this:
Both times chrome shows this as the computed values:
-webkit-box-shadow: rgba(0, 0, 0, 0.227451) 0px 6px 10px 0px, rgba(0, 0, 0, 0.188235) 0px 10px 30px 0px;
-webkit-font-smoothing: antialiased;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
background-color: rgb(255, 152, 0);
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
bottom: -28px;
box-shadow: rgba(0, 0, 0, 0.227451) 0px 6px 10px 0px, rgba(0, 0, 0, 0.188235) 0px 10px 30px 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
font-family: FontAwesome;
font-size: 32px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 56px;
line-height: 32px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
position: relative;
text-align: center;
text-rendering: auto;
transform: matrix(1, 0, 0, 1, 0, 0);
width: 41.140625px;
This is the code that makes up the button:
// BUTTONS
.fab {
margin: 0;
padding: 15px;
width: 56px;
height: 56px;
border-radius: 100%;
cursor: pointer;
transform: none;
& {
.shadow-z-3();
}
&:hover {
.shadow-z-4();
background-color: lighten(#brand-primary, 40%);
}
&:active {
.shadow-z-5();
}
&.fab-mini {
width: 40px;
height: 40px;
padding: 13px;
font-size: 15px;
}
&.fab-bottom {
position: relative;
bottom: -28px;
}
&.inverse {
background-color: #brand-primary;
color: #white;
&:hover {
background-color: lighten(#brand-primary, 10%);
}
}
i {
position: relative;
top: -5px;
}
}
The plus is a Font Awesome fa-plus.
These are the classes for my button (in Jade):
i.fa.fa-fw.fa-2x.fa-plus.fab.inverse.fab-bottom(data-toggle="modal"
data-target="#createModal" data-backdrop="static" data-keyboard="false")
Added the Jade of the page:
.row
.col-sm-6
.panel.panel-default
.panel-heading
h2.panel-title {{_ "dataA"}}
.list-group
.list-group-item
+each availableShifts
+availableShiftCard
.col-sm-6
.panel.panel-default
.panel-heading
h2.panel-title {{_ "dataB"}}
.list-group
.list-group-item
+each ownShifts
+ownShiftCard
.text-center
i.fa.fa-fw.fa-2x.fa-plus.fab.inverse.fab-bottom(data-toggle="modal"
data-target="#createModal" data-backdrop="static" data-keyboard="false")
What am I doing wrong?
Image isn't always inside DIV
I'm trying to wrap an img with a div. The problem is that the image loads left of the div. I currently have an image and div and know the image size prior to it being loaded. The div dimensions are set to the image's dimensions, but the image is loading left of the div. I've tried everything even adding a vertical-align to the image and the closest thing I came across was making the position of the div absolute which just loaded the div under the text which was right of the image. I probably can load the image in another div inside the original but that might harm SEO in my case.
Position of the image
HTML
<ul id="UL_1" class="ab-submenu">
<li id="LI_2">
<a class="ab-item" tabindex="-1" href="http://techdigy.com/wp-admin/profile.php" id="A_3"></a>
<div class="avatar-holder" id="DIV_4">
<img alt="" src="http://1.gravatar.com/avatar/95fef2e7b4a23f9cc0439619db1af0a6?s=64&d=identicon&r=G" class="avatar avatar-64 photo" height="64" width="64" id="IMG_5" />
</div><span class="display-name" id="SPAN_6">Andre</span>
</li>
<li id="LI_7">
<a class="ab-item" href="http://techdigy.com/wp-admin/profile.php" id="A_8">Edit My Profile</a>
</li>
<li id="LI_9">
<a class="ab-item" href="http://techdigy.com/wp-login.php?action=logout&_wpnonce=c7d2e50651" id="A_10">Log Out</a>
</li>
</ul>
CSS
#UL_1 {
background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
border: 0px none rgb(204, 204, 204);
color: rgb(204, 204, 204);
font: normal normal normal 13px/28px sans-serif;
height: auto;
line-height: 28px;
list-style: none outside none;
margin: 0px;
outline: rgb(204, 204, 204) none 0px;
padding: 6px 0px;
position: relative;
text-align: left;
text-shadow: rgb(68, 68, 68) 0px -1px 0px;
transition: none 0s ease 0s;
width: auto;
z-index: 99999;
}/*#UL_1*/
#LI_2 {
background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
border: 0px none rgb(204, 204, 204);
color: rgb(204, 204, 204);
font: normal normal normal 13px/28px sans-serif;
height: auto;
line-height: 28px;
list-style: none outside none;
margin: 6px 16px 15px 88px;
outline: rgb(204, 204, 204) none 0px;
position: relative;
text-shadow: rgb(68, 68, 68) 0px -1px 0px;
transition: none 0s ease 0s;
width: auto;
z-index: 99999;
}/*#LI_2*/
#A_3 {
background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
border: 0px none rgb(33, 117, 155);
color: rgb(33, 117, 155);
display: block;
font: normal normal normal 13px/26px sans-serif;
line-height: 26px;
list-style: none outside none;
min-width: 140px;
outline: rgb(33, 117, 155) none 0px;
padding: 0px 12px 0px 8px;
text-align: left;
text-decoration: none;
transition: none 0s ease 0s;
white-space: nowrap;
}/*#A_3*/
#DIV_4 {
border: 0px none rgb(204, 204, 204);
color: rgb(204, 204, 204);
font: normal normal normal 13px/28px sans-serif;
height: 64px;
line-height: 28px;
list-style: none outside none;
outline: rgb(204, 204, 204) none 0px;
text-align: left;
text-shadow: rgb(68, 68, 68) 0px -1px 0px;
transition: none 0s ease 0s;
white-space: nowrap;
width: 64px;
}/*#DIV_4*/
#IMG_5 {
background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
border: 0px none rgb(204, 204, 204);
color: rgb(204, 204, 204);
display: block;
font: normal normal normal 13px/28px sans-serif;
height: 64px;
left: -72px;
line-height: 28px;
list-style: none outside none;
outline: rgb(204, 204, 204) none 0px;
position: absolute;
text-align: left;
text-shadow: rgb(68, 68, 68) 0px -1px 0px;
top: 4px;
transition: none 0s ease 0s;
vertical-align: middle;
white-space: nowrap;
width: 64px;
}/*#IMG_5*/
#SPAN_6 {
background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
border: 0px none rgb(51, 51, 51);
color: rgb(51, 51, 51);
display: block;
font: normal normal normal 13px/28px sans-serif;
height: 18px;
line-height: 28px;
list-style: none outside none;
outline: rgb(51, 51, 51) none 0px;
text-align: left;
transition: none 0s ease 0s;
white-space: nowrap;
}/*#SPAN_6*/
#LI_7, #LI_9 {
background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
border: 0px none rgb(204, 204, 204);
color: rgb(204, 204, 204);
font: normal normal normal 13px/28px sans-serif;
height: auto;
line-height: 28px;
list-style: none outside none;
margin: 0px 16px 0px 88px;
outline: rgb(204, 204, 204) none 0px;
position: relative;
text-shadow: rgb(68, 68, 68) 0px -1px 0px;
transition: none 0s ease 0s;
width: auto;
z-index: 99999;
}/*#LI_7, #LI_9*/
#A_8, #A_10 {
background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
border: 0px none rgb(33, 117, 155);
color: rgb(33, 117, 155);
display: block;
font: normal normal normal 13px/26px sans-serif;
height: 26px;
line-height: 26px;
list-style: none outside none;
min-width: 140px;
outline: rgb(33, 117, 155) none 0px;
padding: 0px 12px 0px 8px;
text-align: left;
text-decoration: none;
transition: none 0s ease 0s;
white-space: nowrap;
}/*#A_8, #A_10*/
This is the correct behavior, you are positioning the img absolutely -72px left and 4px from the top.
#IMG_5 {
position:absolute;
left: -72px;
top: 4px;
}
If you want the img to be inside the div, then remove the absolute positioning.
If you were trying to move the div apply this positioning to it as opposed to the img. In doing so, the img will also have the same position, as it is a child.
jsFiddle example
How to Make a 3D button using CSS?
I have a CSS button that looks like this:
that is formed from this CSS code:
.Button{
color: #333;
border: 1px solid orange;
border-bottom: 5px solid orange;
background-color: #fff;
font-size: 12px;
margin: 5px;
padding: 1px 7px 1px 7px;
display: inline-block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
top: 0px;
}
.Button:hover{
cursor: hand;
cursor: pointer;
}
.Button:active{
border-bottom: 3px solid #999;
top: 3px;
}
This is what I am trying to make it look like (but I can't figure out how to do it):
Please pardon my drawing skills. I just want to extend the orange border on the left so it looks 3D. Thanks!
Here is a fiddle for a 3d button I have used in places. It is animated with css to have an active and hover state
fiddle
.btn-big {
background-color: #474EDD;
background-image: -webkit-linear-gradient(283deg, rgba(255, 255, 255, 0.1) 50%, transparent 55%),-webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), transparent);
border-radius: 6px;
box-shadow: 0 0 0 1px #163772 inset,0 0 0 2px rgba(255, 255, 255, 0.15) inset,0 4px 0 0 #333797,0 4px 0 1px rgba(0, 0, 0, 0.4),0 4px 4px 1px rgba(0, 0, 0, 0.5);
color: white !important;
display: block;
font-family: "Lucida Grande", Arial, sans-serif;
font-size: 20px;
font-weight: bold;
height: 61px;
letter-spacing: -1px;
line-height: 61px;
margin: 50px;
position: relative;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
text-decoration: none !important;
-webkit-transition: all .2s linear;
width: 186px;
}
.btn-big:active {
background-color: #474EDD;
top: 4px;
box-shadow: 0 0 0 1px #163772 inset,0 0 0 2px rgba(255, 255, 255, 0.15) inset,0 0 0 0 #333797,0 0 0 1px rgba(0, 0, 0, 0.4),0 0px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn-big:hover {
background-color: #5158E0;
poisiton: relative;
top: -1px;
box-shadow: 0 0 0 1px #163772 inset,0 0 0 2px rgba(255, 255, 255, 0.15) inset,0 5px 0 0 #333797,0 5px 0 1px rgba(0, 0, 0, 0.4),0 5px 8px 1px rgba(0, 0, 0, 0.5);
}
I hope that helps!
Would you like to try this way:
http://cssdeck.com/labs/fancy-3d-button
a {
position: relative;
color: rgba(255, 255, 255, 1);
text-decoration: none;
background-color: rgba(219, 87, 5, 1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 3em;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
-moz-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
margin: 100px auto;
width: 160px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
-moz-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
position: relative;
top: 6px;
}
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>
Push me!
This is close, but not quite perfect.
Using box-shadow & border:
.Button {
color: #333;
box-shadow: -3px 3px orange, -2px 2px orange, -1px 1px orange;
border: 1px solid orange;
}
http://jsfiddle.net/grYTZ/3/
Try This One you can resize it of course
<html>
<head>
<style>
.button {
background: black;
border-style: outset;
border-width: 4px;
border-color: white;
border-radius: 8px;
color: white;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
min-width:500px;
min-height: 100px;
}
.button:hover{
border-style: outset;
border-width: 2px;
box-shadow: none;
background: black;
</style>
</head>
<body>
Link Button
</body>
</html>
You can do this using this example from the perspective page on MDN. You can change the view by setting the perspective-origin in .button-container. My example is also animated so that clicking on the button will show motion. You can change that using the transition function in .side.
JSFiddle
<div class="container">
<div class="button-container">
<div class="bottom side"></div>
<div class="left side"></div>
<div class="right side"></div>
<div class="top side"></div>
<button class="button side" type="button">Click Me</button>
</div>
</div>
.button-container {
--dimension: 100px;
--adjustment: 0px;
--red-accent: #B11807;
--red-dark: #710F05;
--red: #E31D09;
height: 100%;
perspective: 700px;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
width: 100%;
}
.button-container:active {
--adjustment: 100px;
}
.side {
border: none;
box-sizing: border-box;
display: block;
height: calc(var(--dimension) - var(--adjustment));
position: absolute;
transition: 0.4s ease-out;
width: calc(var(--dimension) - var(--adjustment));
}
.bottom {
background: var(--red-accent);
transform: rotateX(-90deg) translateZ(calc(var(--dimension) / 2 + var(--adjustment) / 2));
width: var(--dimension);
}
.button {
background-color: var(--red);
color: #FFFFFF;
height: var(--dimension);
transform: translateZ(calc(var(--dimension) / 2 - var(--adjustment) / 2));
width: var(--dimension);
}
.left {
background: var(--red-dark);
height: var(--dimension);
transform: rotateY(-90deg) translateZ(calc(var(--dimension) / 2 - var(--adjustment) / 2));
}
.right {
background: var(--red-dark);
height: var(--dimension);
transform: rotateY(90deg) translateZ(calc(var(--dimension) / 2 + var(--adjustment) / 2));
}
.top {
background: var(--red-accent);
transform: rotateX(90deg) translateZ(calc(var(--dimension) / 2 - var(--adjustment) / 2));
width: var(--dimension);
}
.container {
box-sizing: border-box;
padding: 100px;
height: 300px;
width: 300px;
}
What in this CSS is causing this difference in font thickness?
I have two bits of text. One is in a paragraph element, the other is text for a submit button input. Why is the font slightly thicker in the button? Paragraph CSS (taken from Computed Style in Chrome Developer Tools) box-sizing: border-box; color: rgb(255, 255, 255); display: block; float: left; font-family: 'Din Text Pro Regular', Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: normal; height: 24px; line-height: 24px; margin-bottom: 0px; margin-left: 0px; margin-right: 16px; margin-top: 11.199999809265137px; width: 119px; Input CSS (taken from Computed Style in Chrome Developer Tools) -webkit-appearance: none; -webkit-border-image: none; -webkit-box-align: center; -webkit-box-shadow: rgba(0, 0, 0, 0.65098) 0px 1px 3px 0px, rgba(97, 232, 203, 0.701961) 0px 1px 0px 0px inset; -webkit-rtl-ordering: logical; -webkit-user-select: text; -webkit-writing-mode: horizontal-tb; background-color: rgb(192, 192, 192); background-image: -webkit-linear-gradient(top, rgb(75, 208, 179), rgb(38, 174, 144)); border-bottom-color: rgb(255, 255, 255); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-style: none; border-bottom-width: 0px; border-left-color: rgb(255, 255, 255); border-left-style: none; border-left-width: 0px; border-right-color: rgb(255, 255, 255); border-right-style: none; border-right-width: 0px; border-top-color: rgb(255, 255, 255); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: none; border-top-width: 0px; box-shadow: rgba(0, 0, 0, 0.65098) 0px 1px 3px 0px, rgba(97, 232, 203, 0.701961) 0px 1px 0px 0px inset; box-sizing: border-box; color: rgb(255, 255, 255); cursor: pointer; display: inline-block; font-family: 'Din Text Pro Regular', Arial, Helvetica, sans-serif; font-size: 16px; height: 41px; letter-spacing: normal; line-height: 16px; margin-bottom: 0px; margin-left: 10px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; padding-top: 11px; text-align: center; text-indent: 0px; text-shadow: rgba(24, 97, 81, 0.34902) 0px 1px 0px; text-transform: none; vertical-align: baseline; white-space: pre; width: 159px; word-spacing: 0px; writing-mode: lr-tb;
I was able to put this at the top of my CSS. It seems to do the trick, at least so far:
button {
-webkit-font-smoothing: antialiased;
}
Apparently, Chrome as some kind of bug, in which it displays the fonts thicker depending on the brightness of its color. More info here: https://code.google.com/p/chromium/issues/detail?id=163369 Edit: Found more related info and fix Actually, it is a known bug: I was able to fix this by following this article. Kinda late, but it may still be usefull to some.