Can't make div look the same in IE6 and IE7/FF

Question

Hi, hope you can help me with this one.

I have a Div with five float divs inside:

var div=document.createElement("div");
div.className="cssDivNino";

var divFolio=document.createElement("div");
divFolio.className="cssFolio";
div.appendChild(divFolio);

var divCurp=document.createElement("div");
divCurp.className="cssCurp";
div.appendChild(divCurp);

var divNombre=document.createElement("div");
divNombre.className="cssNombre";
div.appendChild(divNombre);

var divLocalidad=document.createElement("div");
divLocalidad.className="cssLocalidad";
div.appendChild(divLocalidad);

var divClear=document.createElement("div");
divClear.className="clear";
div.appendChild(divClear);

divFolio.innerHTML= someData;
divCurp.innerHTML= someData;
divNombre.innerHTML= someData;
divLocalidad.innerHTML= someData;

This is the css:

.cssDivNino {padding: 0; margin: 0}
.cssFolio {font-family:arial; font-size:10px; color:#000000; background-color:#FFFFFF; float: left; width: 7%; margin-right: 1%; padding: 0}
.cssCurp {font-family:arial; font-size:10px; color:#000000; background-color:#FFFFFF; float: left; width: 17%; margin-right: 1%; padding: 0}
.cssNombre {font-family:arial; font-size:10px; color:#000000; background-color:#FFFFFF; float: left; width: 36%; margin-right: 1%; padding: 0}
.cssLocalidad {font-family:arial; font-size:10px; color:#000000; background-color:#FFFFFF; float: left; width: 35%; margin-right: 1%; padding: 0}
.clear { clear:both; width: 0%; height: 0; padding: 0; margin: 0; border: thin; border-color:#000000}

This is how it looks in IE7 and Firefox and in IE6. Notice the extra space of the parent div under the child divs on IE6.

I've tried to fix this with javascript:

div.style.height = divFolio.style.height;

But it doesn't work.

Answer 1

A few notes:

1. You will save yourself a lot of trouble by just using a <table> for this data, which is tabular.

2. Building this stuff via the DOM is insanely slow compared to letting the browser just render raw HTML. Just something to be aware of.

Anyway, I'd immediately try floating the container div .cssDivNino left as well, explicitly setting top and bottom margins to 0, and keeping a close eye on IE6's suite of float/margin bugs.

Answer 2

I agree with Tpiptych but for arguments sake if I wanted to accomplish this I'd end up using different styles sheets for the defect browser (in this case IE6).

Be aware, that you may not be able to get 100% of the same look and you may need to design a slightly different look for IE6.

Even after I write this, I'd still endorse the <table> solution.

HTH!

Regards,
Frank