Content of h1 tag is invisible until moused over in IE 6

Question

The bizarre symptom I'm seeing on this page (only when viewing with IE 6) is that the text of the <h1> tag is invisible when the page is loaded or resized, but appears when I mouse over the region where it appears in the upper-left corner. I haven't seen this with any other browser, and the only CSS attributes I'm modifying for any h1 tag are these:

• font-size
• font-weight
• margin, margin-top
• padding, padding-top, padding-bottom

Nowhere do I change visible or display, and there are no hover effects for the h1. Even the non-link text inside the header disappears. Any ideas?

Answer 1

More than likely this is being caused by another styled element on the page.

I think your best option is trial and error... Removing all styles from the page, verifying the h1 element is no longer disappearing, and then re-adding the other styles until you've found the culprit

Answer 2

Agreeing with John's post. I have (by sheer luck) been able to circumvent this debugging process on occasion by giving the element position: relative or position: static rules.

So you may want to cross your fingers and give that a whirl before going down John's route.

Answer 3

I didn't see anything blatantly obvious but you do have rgba being applied via an hover.

#header #info a:hover, #header #info h2#pathlinks a:hover {
    background-color: rgba(63,63,63,0.35);
}

Also, this works locally with my IE6 so I'm not sure if maybe it behaves differently due to the associated zone in Internet Explorer (intranet, trusted, Internet).

I wholeheartedly agree with the other posters that this will be an exercise in debugging. I like John's technique of trial and error.

Answer 4

Although I don't see a hasLayout attribute listed for the heading, you may want to try adding zoom:1; to the h1 and see what results you get. This made the text visible for me consistently when testing.

Indeed this problem seems pretty bizarre.