[Solved] Working in IE not FF?

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.

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.

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

test

test

test

test

test

test

Its still not working in FF, it works fine in IE. The hovered

is meant to move down 4px

60 what?

Onions?

Bricks?

Yards?

Blades of grass?

Valadating, in this case CSS, as well as markup would pick up these errors.

60? Wat u on about? Can anyone help solve this problem pls and not just throw random quotes at me! Thanks

#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.

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

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;
}

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, though.

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 still works fine and is now valid! Sweet as a monkey!

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" 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!

Perfecto! Thanks again incauncalator

Cheers And le007, thanks for letting us know it's fixed!

Too easy, thx

welcome and good css!