How do I make IE6 respect the class attribute?

Question

Long time reader, first time poster asks:

After many weeks of google and forum trawling, I am still at a loss. I have a series of nested divs, some with ids, some with classes, and some with ids and classes.

It's XHTML strict, and validates. Original code http://www.drewsonne.com/melonstack/?topic=brisbane

eg.

<div id="main">
  <div class="rEntry" id="r1">
    <a href="http://www.brisbane.com"&gt;City of Brisbane</a><br>
    <span id="rSum1" class="rSum">This is a website summary</span>
  </div>
  <div class="rEntry" id="r2">
    <a href="http://www.brisbane.gov.au"&gt;City of Brisbane</a><br>
    <span id="rSum2" class="rSum">This is a website summary as well</span>
  </div>
    ... et cetera ...
</div>

For the purposes of testing, my CSS currently looks like this

.rEntry{
    padding:10px;
    margin:10px;
}

For the life of me, I can not get this style to work at all in IE6. If I change to #r1, #r2, or div the style is applied to the appropriate elements, but neither div.rEntry nor .rEntry will make the style stick. Does anyone know where I have gone wrong?

DJS.

Answer 1

I have three pieces of advice:

1. Use a reset CSS (there are several of these around);
2. Use a DOCTYPE declaration, if you aren't already, to force IE into standards-compliant mode (well, as standards compliant as IE can be) instead of quirks mode. I usually use HTML 4.01 transitional for this but if you comply with strict, even better;
3. Qualify your styles with the element name.

For example:

div.rEntry {
    padding:10px;
    margin:10px;
}

The more specific a style is, the greater its importance in CSS for determining which one applies. You can see if thats the issue by testing it with !important:

div.rEntry{
    padding:10px !important;
    margin:10px !important;
}

If that fixes the issue then you've got other CSS that is taking precedence. I suspect this is the issue as #id selectors have a higher precedence than .class selectors, which is the behaviour you're seeing.

Note: I don't recommend using !important as a general rule, just to find issues with CSS precedence. Once identified, it's generally best to fix them the "right" way.

Answer 2

I just went to the "original code" link, and your CSS reads:

div.rEntry{
    margin:10px !important;
}   padding:10px !important;

It looks like your padding style is outside of the the bracket. Are you certain this isn't all just due to a typo?

Answer 3

Now, looking at the HTML at your provided link, I don't see any divs with the rEntry class. Then I realized, they were being generated dynamically. That reminded me that for IE6, when adding CSS classes through the DOM, you have to use the className property, not class. In other words, the IE6 DOM is not seeing that the divs are of class rEntry at all.

How are those divs being generated? If it's through your own code, you may want to try modifying the class AND className properties of your elements.

edit: It looks like it's in scripts/REsultsList.js. Try changing the line that says:

entry_div_element.setAttribute('class', 'rEntry');

to:

entry_div_element.setAttribute('class', 'rEntry');
entry_div_element.className = 'rEntry';