More with lists & IE: different rendering in 5.01, 5.5, 6

[coder_seth]

http://esultants.com/s/shelley/

Note especially the main navigation on the left. Different renderings in all three versions.

5.01, understandably, is the worst, screwing up even some so simple as a 10 px right margin on my inline lists (i.e. footer nav).

Any insights? I'm using the Tantek hack to apply different sets of rules to try to find a middle ground, but still.. I'm hurtin'.

[brothercake]

You have block-level links inside block-level list items, right? I had the same problem ... took me months to contrive this solution:

Apply "display:inline" to the <li> in IE5.0 *only* - they'll still allow you to add formatting like width and padding, even though they're inline, because it's IE5.

Then for IE5.5 and IE6 (but not IE5.0 or it'll break) you apply "float:left" to the <li> and that makes the phantom margin disappear.

I can give you CSS hacks which are specific enough, if you don't already have them.

[coder_seth]

i'll try to work with what you've posted there, but if you wouldn't mind some actual style rules, i would greatly appreciate that as well. thanks again.

[brothercake]

Well start by applying the display:inline using this selector:

* html .menu li { display:inline; }

Then use that selector plus the Star-7 hack (which doesn't work in IE5.0) to apply float to IE5.5 and 6:

* html*.menu li { float:left; }

[coder_seth]

thanks man, that was helpful. i lose my spacer <li> in IE 5.5 though.

perhaps you can help me with my inline lists in IE 5.01 too?

http://www.esultants.com/s/shelley/shelley.cfm for example.

in IE 5.01, it will not apply the specified right margins on the <li>s, nor will it apply the specified borders to either the <li>s or <a>s (the latter is currently how it is styled).