While re-designing my site I ran in to many issues related to Internet Explorer and CSS. To any web designer, this is nothing to new.
I designed in Firefox and checked things in Safari and they were perfect. Opened up IE 6 and spend the next week or so re-working things.
My biggest issue was with blinking or disappearing text. I just didn’t understand. In my research I found out I had the peekaboo bug. It’s a lovely little issue with IE that causes the text to show and hide as it feels necessary. It’s kind a panic attack and was pissing me off. Good news is I found a fix. Just add position:relative to any areas that are disappearing and they come right back.
I’m also running into issues with EM sizes. I though using EM for font sizes instead of PX would make things easier. Come to find out it didn’t really matter. IE disregards some sizes and I’m not sure if that’s a CSS coding issue or what. The work around there was to create an IE only stylesheet and use this handy browser detection code.
In the end, my new design looks great in Firefox (or any Mozilla based browser), Safari and Opera. And it looks decent in IE 6.
I haven’t checked IE 7 yet and frankly I’m scared to. I don’t want to know what it sees. Ok so I do, but I don’t have access to IE 7 at the moment. Isn’t there a site that will do screenshots for you?
So when will the new site be live? I was hoping by February 1st and I think I’m on track for that deadline. Could be tomorrow, could be the first. But you’ll know it when you see it. 🙂
You’ve already found a work around so it’s not a big deal, but when I had the problem I was able to fix it in a slightly different way… I was not declaring a background color and text color in the areas where my text was vanishing when scrolling the screen. I went back through and got that all set and everything was working as it should.
nfirm – I thought my issue was the color thing to but it didn’t seem to help. The CSS validator does throw a lot of odd color warnings though.