Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

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

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well start by applying the display:inline using this selector:
    Code:
    * 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:
    Code:
    * html*.menu li { float:left; }
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •