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

[Wardrop]

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

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

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

[AutisticCuckoo]

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.

[cooper.semantics]

Tommy is correct. Also, you would need to wrap a block level element around 'more text'.

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

[rochow]

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.

[cooper.semantics]

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

[rochow]

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.

[Wardrop]

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.

[rochow]

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