By zoon_unit on

I'm using an offshoot of the bluemarine theme and made the first "sticky" post for my website. The post is formatted with a gray background to distinguish it from other posts. (Bluemarine default formatting) It looks fine in firefox, but when I go to view it in IE6, the text in the teaser box is not there! It's (almost) an empty box, except for a couple of the links from the teaser showing at the bottom.

But when I scroll down and then back up, the text mysteriously appears! What the heck is wrong with IE?? (can't they make a decent browser with all their billions???) Anyway, does anyone know what formatting bug is causing this behavior??

⋅ Categories: Drupal 4.7.x

Comments

Squidgy’s picture

Squidgy commented

I recently had something similar on my site, and pretty much the only solution is to take out that background color. Be warned that you can get weird errors with that even in glorious Firefox as well. Have you tried using a background image instead for that section?

zoon_unit’s picture

zoon_unit commented

Check out this message:

http://www.positioniseverything.net/explorer/peekaboo.html#

This is exactly the behavior I'm seeing. But is it possible that bluemarine has gone all this time without addressing this all too common IE bug?? Is it possible that almost all Drupal developers are using Firefox? (I am, which is why it took me this long to notice the problem) Firefox works just fine.

The problem seems to arise whenever floats and clears are used within a div, such as when you choose to display avatars in nodes. It only happens when there is a background color, such as on a sticky node. Apparently, it is the background color that overwrites the contents of a div, thereby obscuring all the text.

I find it hard to believe that this bug could pass by Drupal for this long! What's up here???

holypidgin’s picture

holypidgin commented

Yep, pesky bug. I experienced the same thing and added a few lines to style.css to fix it: 

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html .node {
  height: 0.01%;
}
/* End hide from IE5/mac */

The height declaration has to be on .node in BlueMarine - there are a couple of floats in there, and applying the hack to the parent element fixes the problem with both.