SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I Now Know Why I'm Having So Many Rendering Issues in IE6/IE7

    I just grabbed firebug for IE (one of the nicest javascript ports I've seen), and it's answered so many questions. One problem I've been having recently is trying to find out why my <ul>'s embedded in other <ul>'s looked fine in every browser, except IE6 and IE7.

    Firebug has shown me that is taking my code which looks something like this..

    Code HTML4Strict:
    <ul>
    	<li>Content</li>
    	<li>Example</li>
    	<li>More Text</li>
    	<ul>
    		<li>Child #1</li>
    		<li>More Text Again</li>
    		<li>Why More Text</li>
    	</ul>
    	<li>I'm Out of Ideas</li>
    </ul>

    And doing this to it...

    Code HTML4Strict:
    <ul>
    	<li>Content</li>
    	<li>Example</li>
    	<li>More Text
    		<ul>
    			<li>Child #1</li>
    			<li>More Text Again</li>
    			<li>Why More Text</li>
    		</ul>
    	</li>
    	<li>I'm Out of Ideas</li>
    </ul>

    In case you can't spot the difference, it's taking my nested <ul> located outside any <li> elements, and putting it into the closest previous <li> element. How am I meant to produce solid CSS when IE is screwing with the structure of my HTML.

    Fingers crossed Microsoft's 8th attempt isn't as absolutely stuffed as the 7 previous versions. It's been a while since I've had to port a technically tricky photoshop design over to html/css. I had forgotten just how many rendering bugs there are in IE. So much so, that when a layout is almost pixel perfect with other browsers like firefox/chrome/opera, I don't want to do anything else in fear that I'll turn everything into a birds nest.

    We'll all look back at these days in 6 - 10 years time and wonder how we ever coped. Like I wonder how I would ever live without a computer.

    I just wanted to get a little bit of this off of my chest. Please feel free to vent your disrespect for IE below.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Wardrop View Post
    How am I meant to produce solid CSS when IE is screwing with the structure of my HTML.
    You can never produce 'solid' CSS as long as you're having invalid markup. The HTML validator would have told you that your unordered list was invalid.

    Error handling is not specified in HTML4, so whatever browsers do with invalid markup they can still be compliant. That's why it's so important to validate.

    IE isn't 'screwing' with the structure of your HTML any more than Firefox is. Your markup is incorrect, and there's no 'right' way of displaying it.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tommy is correct. Also, you would need to wrap a block level element around 'more text'.

    Code:
    <h2>...</h2>
    <ul>
        <li>Content</li>
        <li>Example</li>
        <li><h3>More Text</h3>
            <ul>
                <li>Child #1</li>
                <li>More Text Again</li>
                <li>Why More Text</li>
            </ul>
        </li>
        <li>I'm Out of Ideas</li>
    </ul>

  4. #4
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    Also, you would need to wrap a block level element around 'more text'.
    Why? Only if it is a heading.

    IE doesn't have that many issues if you do things properly. Most things are 5 second fixes.

  5. #5
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    Why? Only if it is a heading.

    IE doesn't have that many issues if you do things properly. Most things are 5 second fixes.
    Usually, this would be a heading or a paragraph. Also, could be a division as well if there are no other alternatives to convey meaning for the given 'text'.

  6. #6
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    Usually, this would be a heading or a paragraph. Also, could be a division as well if there are no other alternatives to convey meaning for the given 'text'.
    Not necessarily, though I basically only use nested lists for menus and sitemaps.

  7. #7
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That put me back in my place. I would like to learn more about valid markup, Can anyone recommend some good references or reading material to learn more on it.

  8. #8
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Valid is easy. Research "semantics", check out this thread, learn how to optimise images, look up how to cater for CSS on/images off, CSS off/images off, CSS off/images off, people on all resolutions, print stylesheets, mobile devices, image replacement (one that uses <span></span>)

    There's a list of things to have fun finding out


Bookmarks

Posting Permissions

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