Topic: body>#menu and html>body #menu li a conflicting?

Please have a look here:
http://www.patricdesign.com/ozones/cssmenu.htm

I am testing a css menu design. Please look at the page in IE6 Win. That is what i want it to look like cross-browser. However, i found that

body>#menu {width: 220px;}

and

html>body #menu li a {width: auto;}

are conflicting because instead of using the auto value, Opera and NS use the 220px width from the #menu box model hack and add 30px somewhere. The outcome looks horrible. Opera & NS make the A style 250px wide - forcing the layer width to break.

How can this be fixed?

<´¯`·.¸ Patric ¸.·´¯`>

[This message has been edited by patric design (edited 10-14-2002).]

IE doesn't do padding very well, patric.
When doing CSS, always remember that IE is always suspect first, not Mozilla or Opera.

take the settings from your padding: in #menu and apply it to a margin: in #menu ul.
then delete #menu's padding:

so no padding: in #menu and add
margin: 100px 10px 60px 15px;

to #menu ul.

That oughta fix it.

edit: Oh also you have 2 widths in #menu.. delete one.. having 2 doesn't help anything as the last width is always the one implemented by the browser.

[This message has been edited by genis (edited 10-16-2002).]

Patric: From the code I see you using you aren't actually implementing the box model hack properly which is why you are having problems - for an explanation look here:
http://www.gurusnetwork.com/tutorials/css/cssintro2/cssintro2-1.html
http://www.gurusnetwork.com/tutorials/css/box_model/style6.html
http://glish.com/css/hacks.asp

___________________
Emps

FAQs: Emperor

Thanx to both of you!

It looks just fine now with genis's fix except Opera displays the whole menu 10px too far left when there is no scroll bar, but that is probably neglectable.

I have omitted the box model hack because with genis's fix it was no longer necessary.

I've updated the link above.

<´¯`·.¸ Patric ¸.·´¯`>