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 9 of 9
  1. #1
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE misenterpreting newlines?

    http://www.aaron-wright.com/new/newer/

    I don't know what's causing it, but my menu menu and "theme list" look dreadful in IE, uless I put the <ul> code all on the same line, in which case it looks pretty much like it would in Mozilla.

    Anyone know a way to fix this, without putting it all on one line? I want the source to be legible...

    Thanks

  • #2
    Regular Coder
    Join Date
    Jan 2004
    Location
    London, UK
    Posts
    234
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmm well im using mozilla firebird, and all i can say is it looks great not thew answer u wanted but hey

  • #3
    Regular Coder Skyzyx's Avatar
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is a *bug* (yes, bug) in the way that all IE versions handle list elements. If they're not all on the same line, then they cause an extra space to appear. This bug is documented in Designing with Web Standards by Jerrey Zeldman.

    The only way to get around it in IE is to have the entire list on a single line. If you're using PHP or another server-side language, you can have your PHP source code on different lines, but have it generate as all on a single line.

    IE6 in standards-mode (triggered by a valid XHTML doctype) isn't as bad about it in general, but IE5 and 5.5 have big problems with it.

    Creator of SimplePie and Tarzan AWS, co-founder of WarpShare, co-built the Y! Messenger website, usability-focused, and an INFJ personality.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm... Was affraid of that. Will just write a theme for IE users that adoesn't use anything bleeding edge like lists...


  • #5
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually, I found a disgusting workaround...

    I wrapped the contens of my <li> with <div> tags. Tried to tell li to display: block, but didn't work. It wants that tag there...


  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Just the tags

    If I recall correctly, IE only requires the end tag of one li element and the beginning tag of the next to be on the same line; a line break can be placed in the content itself, something like:
    Code:
    ...
    <li>bla, bla, bla
    </li><li>the next list item
    </li><li>etc.
    </li>
    ...
    Not exactly pretty coding, but you could give that a try.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't see your original problem, because presumably your DIV hack masks it, but I can tell for sure that you don't need to strip all the whitespace, or resort to extra markup, to make styled lists work in IE.

    If what you were seeing is anything like this - http://www.brothercake.com/Ref/IE-list.html - the links have space between them instead of being right on top of each other?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try now (look at the first item in my menu).

    There's a linebreak in the render where there shouldn't be. The last item in the list is wrapped with <div> and doesn't have the problem.

    <span> is there simply as part of my menu styling (on both items)

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Argh!

    For crying out load, if you need that much superfluous coding to get your list the way you want it in a non-conforming, buggy browser, you might as well go back to using tables!!!

    I'll give the suggested formatting a try.

    Oh, and Brothercake: there are spaces in between them...

    Update

    This:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Border test</title>
    <style type="text/css">
    
    ul {list-style-type: none;
        margin: 0;
        padding: 0;
       }
    
    li {border: 1px solid black;
        display: block;
        width: 140px;
        margin: 0;
        padding: 0.5em;
       }
    
    </style>
    </head>
    <body>
    <ul>
    <li>Blah 1</li>
    <li>Blah 2</li>
    <li>Blah 3</li>
    <li>Blah 4</li>
    </ul>
    </body>
    </html>
    yields 4 black-bordered boxes jammed right on top of eachother, no spaces. In IE5.5/Win2000, that is.
    Last edited by ronaldb66; 02-06-2004 at 12:14 PM.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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