The Randomly Disappearing Header in IE Trick

[ADAM Web Design]

I've found a rather unusual quirk in IE that I would think is kind of cool if it wasn't so frustrating:

http://216.89.218.233/tmac/disappearing_header.html

Simply put, any time I use a float inside of the content div (left or right, it doesn't seem to matter much), the <h1> tags on the page alternate randomly between being visible and disappearing completely off the page. They start out invisible, but if I drag the cursor over them and/or scroll a page up and down, the headers appear.

I've seen this behaviour about 3 or 4 times on different sites I've worked on in the last little while, and it's all IE-specific.

The question is: how do I deal with this issue save for not using floats and/or putting things into tables that don't really belong (e.g. this list concept)?

Thanks.

[speed]

What!! a bug in IE and Firefox renders it correctly ;)

The normal fix for IE is to add "position: relative" to either the float, it's container or the element that isn't showing. I don't mean to be vague but it seems to vary.

You can also add "height: 1%" or in some cases giving the containing element a width value will solve it.

Finally if you float the element that is containing the <h1> and floated div then that often fixes the problem as well.

My usual fix is just to add "position: relative"

By the way I couldn't see that bug on that site it all seemed to work in IE.

[MuNKyonline]

Worked fine for me to!

[ADAM Web Design]

speed, I'm a little disappointed in you, dude. You were only half-right, as opposed to being completely right. You're slipping, man. You're slipping. ;)

Okay...seriously...speed, thanks for giving me enough of a clue to solve the problem. I ended up getting it by putting "width=100%" inline for the H1 tags. position: relative and height: 1px; didn't work, but the height idea gave me the width idea, which I ran with.

The weird thing about that solution is that it didn't work within the style sheet itself; it had to be applied inline.

If possible, I'd like to be able to have this as part of the style sheet. If not, though, it's not that big a deal.

Any ideas?

[MuNKyonline]

I thought speed said height as 1% and not 1px?

[speed]

um I did mention assigning a width sometimes fixes it.

I'd clear your browser cache as unless you've got some other issues these fixes should all work when placed in the style sheet.

Which page is it exactly as I can't find the problem page.

[speed]

Originally Posted by MuNKy

I thought speed said height as 1% and not 1px?

Actually I did and it does make a difference, I didn't spot that.

[MuNKyonline]

I'd be interested to see the page also as I can't see what you're referring to. The code you guys are talking about makes sense but i've never seen header tags just dissapear!

[MuNKyonline]

Hey! It's on that first page that Adam gave as a link. I see what you mean now! That is really odd!

[speed]

Ah! Now I see it.

#content {
    padding-left:  3px;
    padding-right:  3px;
    padding-top:  1em;
    padding-bottom:  1em;
    background:  URL(../images/center_bg.gif) center center no-repeat #F2F2FF;
    height: 1%;
}

I've grabbed a partial copy of that page and adding the height: 1% as above fixed it for me.

[MuNKyonline]

How did you find out about that? That's a pretty clever fix! Nice one speed!

[speed]

Originally Posted by MuNKy

How did you find out about that? That's a pretty clever fix! Nice one speed!

To be honest I've no idea where that fix came from, when I have a problem I tend to keep trying different things based on solutions to other problems.

http://www.positioniseverything.net/ is quite a good source of information.

I probably should have said that if you use the height: 1% fix you might want to make it conditional for IE only, saves the risk of breaking something else.

[DrTandem1]

I think it has something to do with the CSS and IE, because when you reload the page, The text appears briefly until the CSS loads, then it disappears.

The way to troubleshoot it would be to take out the attributes for the class and add them one at a time, until the problem appears...or should I say disappears?

[drummin]

Hey Adam...

Looks like the problem in in your CSS/content id tag.

#content {
padding-left: 3px;
padding-right: 3px;
padding-top: 1em;
padding-bottom: 1em;
background: URL(../images/center_bg.gif) center center no-repeat #F2F2FF;
}
I believe font color is being changed to the same a background color. Remove the color and it works fine.
#content {
padding-left: 3px;
padding-right: 3px;
padding-top: 1em;
padding-bottom: 1em;
background: URL(../images/center_bg.gif) center center no-repeat;
}

Hope that helps.
Drummin