Re: Please Help -> Bizarre IE6 Bug!

Also sprach dakota.duff (AT) greenbush (DOT) org:

http://gator301.hostgator.com/~sekes...her-resources/
See how the top box's header is invisible in IE6?

The text is visible, only the background image is missing.

WHY?!?!?

It's IE.

It worked for me when I added a "position: relative" to ".subjectName".

BTW, your code suffers from "divitis":

<div class="program">Teacher Resources</div>
<div class="subject">
<div class="subjectName" id="sn0">Curriculum &amp; Grading</div>
<div class="subjectBox">
<a
href="1_Curriculum%20%26%20Grading/1_Curriculum%20Introduction.pdf"><img
src="_images/icons/pdf-thumb.png" alt="icon" class="icon" width="16"
height="16" />Curriculum Introduction <span>(415.4 KB, 9/12/07)</span></a>
</div>
</div>

Should be marked up as

<h1>Teacher Resources</h1>
<h2 id="sn0">Curriculum &amp; Grading</h2>
<ul>
<li>
<a href="1_Curriculum%20%26%20Grading/1_Curriculum%20Introduction.pdf">
<img src="_images/icons/pdf-thumb.png" alt="PDF document">
Curriculum Introduction <span>(415.4 KB, 9/12/07)</span></a>
</li>
</ul>

Greetings,
Thomas

Awesome!

Thank you, thank you, thank you!

And I agree with you about divitis. You're absolutely right.
Fortunately (or perhaps unfortunately) we don't care about search
engine ranking for these pages so I got a little lazy in their
construction. I do all of my building for Firefox and then have to
reverse engineer for MSIE 6 & 7 and I've found DIVs easiest to work
with because there aren't any browser assumptions about size, spacing,
etc attached to them like there are with header and list tags.

I know that purists would disagree with me and I may eventually go
through and add proper tagging, since I tend to be a bit of a code
purist myself.

Thanks again for the help.

Also sprach dakotaduff (AT) gmail (DOT) com:

I've found DIVs easiest to work
with because there aren't any browser assumptions about size, spacing,
etc attached to them like there are with header and list tags.

I usually stick a

* { padding: 0; margin: 0; font: 100% Arial, Helvetica, sans-serif }

in at the beginning of my stylesheet, to "remove" any default styling the
browser might apply. (Note that you MUST specify 100% for the font size,
otherwise nested elements will become smaller and smaller with each nesting
level! You can adjust the font size with body { ... }.) Of course, this
method has its own disadvantages too.

Greetings,
Thomas