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">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">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

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';