Visit my current blog

This blog is a sort of hiatus machine. Visit my current blog at stopthefools.tumblr.com. Or see more me at sidoneill.com.

CafePress Store


Buy this
on a tshirt, mug, hat or more!

IE Acts Like Idiot Again, No Surprise

I'm currently working on a site that has a fairly standard 3-column layout, which looks like this:

Or, at least, it looked like that in Firefox. In Internet Explorer it looked like this:

Argh! Horror! It seemed that nothing could be done. I spent hours fiddling with css, thinking it was a problem with the element itself, throwing "position:absolute" and "width:80%" around like they were going out of fashion. Some of the things I tried are definitely out of fashion... <td> anyone?

Eventually, after a very long time, I suddenly had a brainwave. THIS was what was happening:

Essentially, when the image that was in the sidebar was put into the block, I set the width to 100%, which Firefox, Chrome, etc deciphered as meaning 100% of the element within which it was contained. IE, however, saw this as the image being 100% sized, and whilst it displayed it as the width of the element, it created a sort of invisible overflow which knocked the other elements out. Using images that are resized to the exact dimensions they are displayed at (good practice) solves the problem.

Oh dear, oh dear

I've just experienced the nauseating feeling that no doubt many have had before me... the feeling you get when you view your site (which looks lovely in Firefox) in Internet Explorer... and it looks awful.

I really hope that this is easy to fix.

EDIT: It wasn't easy, but it wasn't too hard, either. IE just doesn't handle CSS as well as other browsers.

Message from past me:

This blog is a sort of hiatus machine. Visit my current blog at stopthefools.tumblr.com. Or see more me at sidoneill.com.
Syndicate content