Make div look like IE6 and IE7 / FF
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 IE6 . Notice the extra space of the parent div below the child divs on IE6.
I tried to fix it with javascript:
div.style.height = divFolio.style.height;
But that won't work.
source to share
A few notes:
-
You will save a lot of hassle simply by using
<table>
tabular data for this data. -
Building this stuff through the DOM is insanely slow compared to having the browser just render the raw HTML. Just something to be aware of.
Anyway, I would immediately try unloading the div container .cssDivNino
on the left, explicitly setting the top and bottom margins to 0 and keeping a close eye on IE6 with padding / margin errors.
source to share
I agree with Tpiptych, but for the arguments, if I wanted to do this, I would use different stylesheets for the defect browser (IE6 in this case).
Keep in mind that you won't be able to get 100% of one look, and you may need to take a slightly different look at IE6.
Even after I write this, I will still approve the <table> solution.
NTN!
Regards,
Frank
source to share