The LI's are meant to move down 4px when hovered...
ul#navlist {
white-space: nowrap;
font-family: arial;
font-size:12px;
font-style:strong;
}
#navlist li {
display: inline;
list-style-type: none;
float: left;
margin-right: 2px;
}
#navlist a {
padding: 0 11px;
height: 4em;
line-height: 2em;
margin: 0 0 4px;
background-color: #99FFFF;
color: #2689BC;
text-decoration: none;
}
#navlist a:hover {
margin-top: 60;
color: #fff;
background-color: #369;
text-decoration: underline;
margin: 4px 0 0;
}
HOME
Start by getting your html
Start by getting your html valid. The doctype declaration must always be on the very first line of the file, for instance. There is no CSS standard for invalid code, so until you fix that you have no justification for a complaint.
re:
Yeah I noticed that after I pasted the code. Yeah ok I'll do that np but about the problem itself, why isnt the code working?
le007 wrote:Yeah I noticed
Yeah I noticed that after I pasted the code. Yeah ok I'll do that np but about the problem itself, why isnt the code working?
Fix the HTML errors, then see if it's still broken.
re:
ul#navlist {
white-space: nowrap;
font-family: arial;
font-size:12px;
font-style:strong;
}
#navlist li {
display: inline;
list-style-type: none;
float: left;
margin-right: 2px;
}
#navlist a {
padding: 0 11px;
height: 4em;
line-height: 2em;
margin: 0 0 4px;
background-color: #99FFFF;
color: #2689BC;
text-decoration: none;
}
#navlist a:hover {
margin-top: 60;
color: #fff;
background-color: #369;
text-decoration: underline;
margin: 4px 0 0;
}
HOME
Its still not working in FF, it works fine in IE. The hovered
60
60 what?
Onions?
Bricks?
Yards?
Blades of grass?
Valadating, in this case CSS, as well as markup would pick up these errors.
huh?
60? Wat u on about? Can anyone help solve this problem pls and not just throw random quotes at me! Thanks
#navlist a:hover
#navlist a:hover {
margin-top: 60;
color: #fff;
background-color: #369;
text-decoration: underline;
margin: 4px 0 0;
}
Here you are trying to handle the 4px with a margin (correct me if I have misunderstood). You could try using -
margin-top:4px;
OR
padding-top:4px;
I would tend to go for the latter since IE handles margins slightly differently to Firefox. Also, it might help if you simply gave your li elements a class and targeted that.
le007 wrote:60? Wat u on
60? Wat u on about? Can anyone help solve this problem pls and not just throw random quotes at me! Thanks
It's not exactly random. Look at the code you posted.
#navlist a:hover {
margin-top: 60;
color: #fff;
background-color: #369;
text-decoration: underline;
margin: 4px 0 0;
}
First, except for the line-height property, numeric values require a unit reference. Thus, cabbages? Plus, we do kinda expect that you would have checked your code for validity before posting.
Second, you have conflicting rulesets. {margin-top: 60whatever;} is overruled by {margin: 4px 0 0;}.
Third, IE does it wrong. An inline element does not have top or bottom margins.
cheers,
gary
Some changes!
maybe this code will help you:
Test
#nav ul {
white-space: nowrap;
font-family: arial;
font-size:12px;
list-style:none;
}
#nav li {
float: left;
margin-right: 2px;
}
#nav a, #nav .active {
padding: 0 11px;
height: 4em;
float:left;
line-height: 2em;
margin: 0 0 4px;
background-color: #000000;
color: white;
text-decoration: none;
}
#nav a:hover {
margin-top: 60;
color: #fff;
background-color: #369;
margin: 4px 0 0;
}
#nav .active {
background: #369;
margin: 0 2px 0 0;
}
RE:
incauncalator THANK YOU SO MUCH!!!
Its working fine now in IE and FF, welcome to css creator!
(Thanks to other contributors)
SOLVED
Leo
Your CSS is still invalid,
Your CSS is still invalid, though.
Minor changes to validate!
change this:
#nav a:hover {
margin-top: 60;
color: #fff;
background-color: #369;
margin: 4px 0 0;
}
into this:
#nav a:hover {
color: #fff;
background-color: #369;
margin: 60px 4px 0 0;
}
and will validate!
sorry, I didn't noticed!
Cool, I have done and it
Cool, I have done and it still works fine and is now valid! Sweet as a monkey!
re:
1 last question? How do I take out the active part so it doesn't have home or whatever is active constantly highlighted?
Thanks
Just remove class="active"
Just remove class="active" and add hyperlink tag to your text (Home); If you need a part from your menu to be active just add a "active" class to it!
re:
Perfecto! Thanks again incauncalator
Cheers And le007, thanks
Cheers And le007, thanks for letting us know it's fixed!
re:
Too easy, thx
welcome and good css!
welcome and good css!