18 May 2004, 05:42

A cry for help

Ok, I’ve been having CSS issues for some time and I’ve decided they need to be resolved since its bugging the crap out of me. I don’t know if any of you using IE have noticed an issue where the text in the entries seems to disappear but will reappear if you highlight it or scroll the page. It’s as if the background color is being drawn on top of the text randomly. Doesn’t seem to happen when viewing with FireFox, so I’m thinking its one of those Microsoft related CSS inconsistencies. I just can’t seem to find out what. Anybody out there ever run into a problem like this with your stylesheets? Any suggestions? (Other than switching to Mozilla/FireFox/Opera full time. I’d still like the page to render right in IE regardless of what browser I personally use.)

Comments

Comment by Phil on 2004-05-18 01:41:10 +0000

I’ve been noticing this since the day you switched to Moveable type, man. If you can solve this, you will be my personal hero (that is, if you aren’t already… I can’t remember…).

Comment by Carrie on 2004-05-18 01:51:43 +0000

I’ve never had a problem like this on any site I’ve used stylesheets on — and your site is the only site I’ve seen this happen to … hm.

I looked at your CSS file and it looks fine to me, so it must be a browser thing — and I’ve noticed that the text doesn’t disappear on my Mac at work (which I run IE on).

So, I just typed a whole lot and didn’t really help. :)

Comment by Neal on 2004-05-18 07:32:40 +0000

Sounds like the IE Peekaboo bug. Check out http://www.positioniseverything.net/explorer.html for details on it as well as all the other major known IE fubars. Apparently the Holly Hack (detailed in the 3px jog page) will magically keep it away.

Comment by Neal on 2004-05-18 10:47:13 +0000

I copied your site to my desktop so I could play with your css. I added the following hack to the end of your styles-site.css file and it seemed to do the trick:

/* Hide from IE5-mac. \*/

  • html .blogbody {

height: 1%;

}

/* Unhide */

Win and Mac IE are the only browsers that would pay attention to a * html rule because only they think that the html node has a parent. IE Win has a bug where it ignores heights if they would cause blocks to be too short to hold their contents, but IE Mac doesn’t have that bug so we have to exploit a parsing bug in IE Mac to hide the rule from that browser.

I didn’t discover all these cool hacks myself, of course (unless you count reading about them in various weblogs and CSS mailing lists).

Comment by Will on 2004-05-18 12:39:23 +0000

Thanks Neal! That did the trick. j00 r uB3r-1337. I had looked at the Peekaboo bug info before I left for work, I didn’t know if that hack would work since I wasn’t using any floats anywhere but I was going to try it out later. Then you just came along and fixed it for me. Rock on! I wasn’t aware of that list of MS CSS bugs and their related hacks, but that’s just ridiculous. I’m usually pretty forgiving of Microsoft crap but I don’t think I’d realized how bad things were in this case. Geez.

Comment by Phil on 2004-05-18 13:46:58 +0000

Rock on, Neal!

Comment by Carrie on 2004-05-18 22:07:49 +0000

Neal: Computer Guy Extrordinaire!

Comment by Neal on 2004-05-19 19:16:38 +0000

Smart smart smart, I am so smart. S-M-R-T – I mean…

It’s no secret that IE/Win can give you fits when you’re trying to do pure CSS layouts with clean, compliant code. And we all (unfortunatly) have to support IE/Win 5+ because those three browsers make up about 90% of web users. So many people run into those nasty IE bugs and give up on W3C-standard-compliant web design (and never get to realize the wonderful benefits of following said standards). Thankfully, for those of us in the know, there are a handful of near-magical hacks that can whip those IEs into line without muddying up the code that more compliant browsers (and coders) love so much. There are even style-sheet/javascript combos that you can drop in to enable non-link CSS hover effects on IE 5.0+ and full translucent PNG support on IE 5.5+ (with GIF fallbacks for IE 5.0). Include them inside some of IE’s conditional comments and only your IE users will need to download them.

The most amazing thing is how much effort the development community puts into hacking Microsoft products into doing what they’re already supposed to do. If Microsoft even had a few coders studying all these third-party fixes, they could fix the known issues in IE in weeks. But they don’t have any reason to fix their products because they know that every extra development hour a company throws at making their solutions work with MS products will likely be taken out of the budget for making sure it works for everyone else. That factor is what I hate most about MS dominance in the marketplace.