Topic: body>#menu and html>body #menu li a conflicting? Pages that link to <a href="https://ozoneasylum.com/backlink?for=10823" title="Pages that link to Topic: body&amp;gt;#menu and html&amp;gt;body #menu li a conflicting?" rel="nofollow" >Topic: body&gt;#menu and html&gt;body #menu li a conflicting?\

 
Author Thread
patric design
Bipolar (III) Inmate

From: 290 km/h, fast lane, Autobahn, Germany
Insane since: Feb 2001

IP logged posted posted 10-14-2002 22:32 Edit Quote

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

code:
body>#menu {width: 220px;}


and

code:
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).]

genis
Paranoid (IV) Inmate

From: Dallas, TX
Insane since: Aug 2002

IP logged posted posted 10-16-2002 00:58 Edit Quote

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).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 10-16-2002 01:23 Edit Quote

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

patric design
Bipolar (III) Inmate

From: 290 km/h, fast lane, Autobahn, Germany
Insane since: Feb 2001

IP logged posted posted 10-16-2002 12:09 Edit Quote

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 ¸.·´¯`>



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu