nav bar working in IE & Opera, not in Mozilla

[multichild]

I am building this site:

http://www.little-acorns.biz/Rhys/Trial.htm

here is the css:

#navcontainer ul
{
Z-INDEX: 9;
padding: .2em 0;
margin-left:307px;
margin-bottom:1px;
margin-top:0px;
list-style-type: none;
background-color: #036;
color: #FFF;
width: 59%;
font: normal 140% arial, helvetica, sans-serif;
text-align: left;
}

As the title says, works in other but not in mozilla...

Its something to do with the font size and padding left by the seams, but dotn seem to be able to get it right for all of them.

Lee

 

[BillyRayPreachersSon]

Take some time out to validate your CSS using this tool:

http://jigsaw.w3.org/css-validator

You'll find the error immediately. You have erroneous code in your CSS file - namely HTML style comments:

<!-- Navigation bar -->

Remove any of these, and use C-style multi-line comments:

/* Navigation bar */

Firefox is ignoring the rule following the error, you see.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[multichild]

Thanks Dan,

That did the trick, but the style difference of IE compared to Opera and Mozilla is the next problem.

Thanks

Lee

 

[Vragabond]

Opera and FF show the same result for me, so it is IE that seems to be at fault here. Is it the IE result you're looking for?

 

[multichild]

Umm ye your right, Opera and FF are the same, and IE is different, but I would prefer them all to be like IE.

Lee

 

[BillyRayPreachersSon]

If you change your LI padding from this:

padding: 1em;

to this:

_padding: 1em;
padding: 0.3em 0.6em;

Then they look much the same.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Sorry - they should be reversed:

padding: 0.3em 0.6em;
_padding: 1em;

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[multichild]

Thanks again dan, much appreciate your help

lee