So, the time has come for me to try and get my site to work in IE. All you folks who read this site using IE will appreciate this (even tough I hate you all and wish you a painful death), but the fact is that sometimes even us devout Firefox, Safari, Mozilla and [other good browser] users will no doubt have to use IE.
Therefore I decided to tackle the task of painstakingly trying to fix the way the site was rendering itself in IE, thinking back towards Gary's post about CSS Rules of Thumb and my subsequent comment on it.
I am in league with Lucifer, he came round and we had a brainstorm about how to fix the problem. It turns out that if I have a <p>
tag in the header of my site that I will get lines above and below it. Also in my CSS I had a padding element set for the <p>
tags within the header to be -10 so that the quote given underneath is close to the heading itself. This displays correctly in firefox/safari/[other] but in IE it meant that half the background of the page was covered by an extension of the header. The only thing I could do to fix this was to remove the -10 then change the padding on the heading so that the quote was closer.
Bada bing, bada boom, it works in IE. A few extra changes to the template to make it look a little better and whoosh we have Internet Explorer lift-off. Go on, if you're not viewing this website through IE (and quite frankly why the hell would you?), open it up and take a look, hopefully it looks the same as it does now. And if you are using IE to read this: for god sake, download firefox, it's much better.
After all, aren't we all just trying to get our websites to render correctly in all browsers?
- Chris