- This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
Viewing 9 posts - 1 through 9 (of 9 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
im working on the navigation.. everything seems to be working fine.. but if you take the cursor towards the links.. it starts to flicker between the normal and hover state…
#menu {
float: right;
list-style: none;
margin: 60px 0 0 0;
padding: 0;
}
#menu li {
float: left;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 12px 12px 12px 12px;
}
#menu a {
color: #ffffff;
display: block;
margin: 0;
text-decoration: none;
-moz-transition:margin-top;
-moz-transition-timing-function: ease-in;
-moz-transition-duration: 250ms;
}
#menu a:hover {
margin-top: -5px;
color: #c3ddfa;
}
anyone have any idea why?
Because you’re shifting the link up but not expanding its height would be my guess.
Use padding instead of margin. It will have to be padding-bottom as you cannot have negative padding.
I would also move the padding from the li to the anchor
iv tried everything mentioned above and its still not working smoothly
Seems to be working for me, what browser are you using? I used both safari and firefox, both appeared fine.
@djpic the issue was the link jittering when hovering if the mouse was towards the bottom. It is fixed in my fiddle with the use of padding.
@joshuanhibbert Thnx alot :)