This css is causing the text to shift upwards in Firefox when rolled over but not in other browsers
#element{
height:40px;
}
#element a,img{
vertical-align:middle;
}
#element a{
font-size:16px;
color:#d1d1d1;
text-decoration:none;
}
#element:hover a{
border-bottom: #fff 1px dotted;
}
Makes sense to me. You are adding a border of 1px width. This will change the dimensions of the element. A simple solution is to have a permanent border and just change its color:
#element a {
font-size: 16px;
color: #d1d1d1;
text-decoration: none;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: transparent;
}
#element:hover a {
border-bottom-color: #fff;
}
Add display: inline-block; and margin-bottom: -1px; to compensate for the extra pixel on the bottom on hover.
#element:hover a{
border-bottom: #fff 1px dotted;
margin-bottom: -1px;
display: inline-block;
}
Related
When you hover the sentence, the bottom-border isn't a crisp 1px line, like when you hover over photography. I've set margin:0; and padding:0; also. http://imdarrien.com/#
.project-link-1 {
display: inline;
text-align: left;
margin-bottom: 14px;
}
.project-link-1 a:hover {
border-bottom: 1px solid #000;
}
.project-link-1 > a {
font-family: 'NimbusSansNo5TOT-Regular';
border-bottom: 1px solid transparent;
font-size: 13px;
line-height: 16px;
word-spacing: 2px;
text-decoration: none;
color: #000;
}
It's because you use transform with percentages. Your content gets antialiased. You could try to remove the transform from .project_miniwrap or position it pixel perfect.
I have a list , then I set its css to :
.dropdown-menu > li {
list-style: none outside none;
height: 22px;
border-bottom: 1px dotted #e1e1e1;
width: 178px;
margin-left: 10px;
}
Then when mouse hover :
.dropdown-menu > li > a:hover{
color: #EC5B00 !important;
z-index: 3;
border-style: solid;
border-color:#dddddd #ffffff #dddddd #dddddd;
border-width: 1px 3px 1px 0px;
width: 183px;
background-color: #ffffff;
margin-left: 1px;
}
Problem :
Even I set the border to solid style, but the dotted still exists, so there're two lines (one is a dotted, and another one is solid). How to omit the dotted one on mouse hover by css?
Any help would be much appreciated, thank you..
Update :
After changing the style by all the answers, then I found one problem, one more dotted border is getting from the other li next to the current hover li, here it is : http://jsfiddle.net/gbw3fj14/
The border-bottom: 1px dotted #e1e1e1; style is set to li, you are changing the a border later, try to change your selector from li > a:hover to li:hover
.dropdown-menu > li {
list-style: none outside none;
height: 22px;
border-bottom: 1px dotted #e1e1e1;
width: 178px;
margin-left: 10px;
}
.dropdown-menu > li:hover {
color: #EC5B00 !important;
z-index: 3;
border-style: solid;
border-color:#dddddd #ffffff #dddddd #dddddd;
border-width: 1px 3px 1px 0px;
width: 183px;
background-color: #ffffff;
margin-left: 1px;
}
jsFiddle Demo.
http://jsfiddle.net/
your wrote wrong
.dropdown-menu > li > a:hover to .dropdown-menu > li:hover
I want to add a white gap between menu elements but Im encountering a weird problem. See this jfiddle: http://jsfiddle.net/ERYat/1/
Here is the CSS code:
/* a styling */
ul#menu-menu-services a {
display: block;
font-size: 20px;
color: #000;
text-decoration: none;
padding: 5px;
border-bottom: 2px solid #fff;
border-left-style: solid;
border-left-width: 3px;
border-left-color: #000;
}
/* li fix */
ul#menu-menu-services li {
margin: 0;
padding: 0;
border: none;
}
/* Sub Menu */
ul#menu-menu-services li ul.sub-menu {
display: block;
margin-left: 0px;
}
ul#menu-menu-services li ul.sub-menu li a {
padding-left: 15px;
font-size: 14px;
}
I can't figure out why is the border diagonal on the left. Anyone knows?
Borders come together like this:
||
||______
|/______
You should use margin-bottom instead of border-bottom fiddle:
ul#menu-menu-services a {
display: block;
font-family: 'Droid Sans', arial, serif;
font-size: 20px;
color: #000;
text-decoration: none;
padding: 5px;
margin-bottom: 2px;
border-left-style: solid;
border-left-width: 3px;
border-left-color: #000;
}
And if you need a white line, consider using :after:
ul#menu-menu-services a { position: relative; }
ul#menu-menu-services a:after {
content: '';
width: 100%;
position: absolute;
height: 2px;
background: #fff;
left: 0;
bottom: -2px;
}
It's because it's drawing the corner of the two borders. Try changing your bottom border to something other than white and you'll see more clearly what it's doing.
To get rid of this effect, you need to get rid of the bottom border.
If you need the gap that the bottom border is currently giving you, you could use padding-bottom or margin-bottom instead.
How do I add a rule above and below my nav bar? I tried an HR tag, but that seemed to make a lot of space around the nav bar. Here is my html and here is the example of how I want to do it.
http://matthewtbrown.com/jeffandcricketquilt/
http://matthewtbrown.com/jeffandcricketquilt/rule.png
If you do not want to change your html at all, you can add this to your css
nav ul:before {
border-bottom: 1px solid white;
border-top: 1px solid white;
bottom: 5px;
content: "";
left: 5px;
position: absolute;
right: 5px;
top: 5px;
z-index:0;
}
nav ul {
overflow: auto;
position: relative;
background-color:#000;
}
nav ul li{
position:relative;
z-index:10;
}
and remove the background-color from the li elements (since i added it to the ul)
Use borders and padding:
* {
margin: 0;
padding: 0;
}
nav {
text-align: center;
background: black;
color: white;
padding: .2em;
}
ul {
padding: .5em;
border: 1px solid white;
border-left: none;
border-right: none;
}
nav li {
display: inline;
list-style-type: none;
padding: 0 2em;
}
Demo
I would apply an outline to the ul tag, so the css should be:
nav ul{
outline-color: white;
outline-style: solid;
outline-width: 2px;
outline-offset: -7px;
height: 60px;
width: 848px;
}
Try applying this CSS to the nav bar:
border-top: 1px solid #eee
border-bottom: 1px solid #eee
The easiest is to add a padding to the nav element, 4px makes good with width of li elements. Also add float: left
Now add border-top and border-bottom to the ul element. Add float: left here as well. This will switch your li element around as they have a fixed width. lower the width of them to 210px and things should be fine.
CSS additions to your code:
nav {
padding: 4px
float: left;
}
nav ul {
border-top: 1px solid white;
border-bottom: 1px solid white;
float: left;
}
nav li {
width: 210px;
}
If line-height is the same as font-size you can manipulate border distance by changing padding-bottom of list element, here is my example:
.headerSection ul.navigation li a {
font-size: 12px;
line-height: 12px;
text-decoration: none ;
padding-bottom: 10px;
border-bottom-color: transparent;
border-bottom-width: 5px;
border-bottom-style: solid;
}
.headerSection ul.navigation li a:hover {
border-bottom-color: #e8bf5d;
}
In its current form, the CSS below doesn't allow my page to scroll. However, if I disable the CSS code below, the page allows for scrolling. I have tried setting the overflow attribute over and over, and using height: 130% allows me to see a scroll bar, but the page still doesn't actually scroll.
Here is a JSFiddle showing my problem.
h1{
color: #FFF;
}
h3{
font-size: 25px;
color: #990000;
text-decoration: none;
font-family: 'Chivo';
}
h5 {
color: #bb0000;
text-decoration: none;
font-family: 'Chivo';
font-size: 40px;
line-height: 1em;
font-weight: bold;
}
h5:focus {
outline: thin dotted rgb(51, 51, 51);
outline-width: thin;
outline-style: dotted;
outline-color: rgb(51, 51, 51);
outline-offset: -2px;
}
h5:hover, a:active {
text-decoration: underline;
color: #990000;
outline: 0;
outline-color: initial;
outline-style: initial;
outline-width: 0px;
}
/*box!*/
#boxdrop{
box-shadow: 0px 0px 10px grey;
position:fixed;
background-attachment:scroll;
left:10px;
}
#boxdrop2{box-shadow: 0px 0px 10px grey;}
.boxbg { background-color:#ccc;background-attachment:scroll; }
.boxbg2 { background-color:#ddd; background-attachment:scroll;}
.boxbg3 { background-color:#eee;background-attachment:scroll;}
.all-round {
border-radius:1em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
}
If you're looking to get the scroll back, remove the position:fixed from your boxdrop div.
#boxdrop{
box-shadow: 0px 0px 10px grey;
background-attachment:scroll;
left:10px;
}
jsFiddle example
I think the issue is your HTML. You have two divs with the id boxdrop2. Also, your div with id boxdrop has a position:fixed attribute, so the div is not able to scroll in any way. Whenever you use fixed, you eliminate any chance of scrolling as the fixed elements leave the flow of elements in the page.