Internet Explorer Design Woes

[Doctor Destiny 42]

Being a freelance web designer and developer in my spare time for cash outside of the nine to five gig, I have found myself transitioning out of the traditional tables for layout design phase and moving to pure CSS layouts. While not really a big deal in all honesty, but it does have its frustrating moments with all of the browsers and platforms available. No HTML rendering engine performs the exact same and that can really lead to aggravating moments, especially with floating elements and margins.

 

I'm sure many of you see where this is going and you'd be right, Internet Explorer has some truly mindboggling inconsistencies, and outright bugs, with its CSS support and presentation. So anyway, I recently found myself redesigning my personal site so it's all entirely my own work and not a downloaded template. I went ahead with a pure CSS-based layout to advance my knowledge and simply because I can.

 

I was toolin' along with the design doing well, rigorously testing in Firefox while I built the design and added in temporary colors. All was well, and all was well in Opera, Chrome and Safari even! I was feeling pretty good until I launched it in Internet Explorer. I wasn't sure if I wanted to cry or punch the screen but rest assured, I let fly with a few colorful expletives.

 

Here's an approximation in Firefox/Chrome/Opera/Safari:

 

left nav div | content div

Looks good. Side by side as they should be.

 

Now IE...

 

left nav div |
               content div

Dropped down below the end of the navigation. That's not right. CURSES.

 

I spent hours looking over my CSS and XHTML. But nothing. Nothing was wrong! I kept looking and looking but nothing. So I went onto google and dug around for float bugs and the like. After more digging, I discovered the problem. I had run into an IE only bug aptly named the IE Float Drop Bug. While the fix is amazingly easy, removing the static width from the content div, I was still amazed that such a huge issue exists with the world's most widely used browser.

 

Here's what I had that caused the problem...

 

#content {
margin-left: 200px;
width: 600px; <- evil for IE
padding: 1em;
}

Simply removing the width magically realigned the content as it needed to be.

I await the day I run into the IE double margin bug, which is also easily fixed as sad as it is.

 

And then some people ask me why I still like tables. I always give them a good answer - Internet Explorer.

[Luk3us 63]

IE not conforming to standards IMPOSSIBLE!

 

hahaha. But seriously, tables are old school, and quite frankly horrible to use and read.

[Doctor Destiny 42]

Says the man who uses XHTML 1.0 TRANSITIONAL and can't read tables. If you can't read tables, you're adding too much fluff to it.

[Luk3us 63]

It comes down to how you like to make your pages. Divs and CSS make it very easy to quickly modify pages and change the styles. Tables are more rigid when it comes to changing them.

 

I can read tables fine, but when you've already indented three times before you even put any content in, well something is wrong.

 

<table>
    <tr>
       <td><p>Greetings!</p></tr>
    </tr>
</table>

<div class='Blah'>

  <p>Greetings!</p>

</div>

[Doctor Destiny 42]

Mine look clean and you can read them easily. However... I'd agree if you start getting tables in tables.

[TheBlackOut 7]

I would hope Internet Explorer 8 is an improvement..?

[Malevolence 6]

Ever since I use FF, I never look back to IE.

[BioBen 3]

Yes, but do you design? and are you everyone who uses the internet?