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

[makz]

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 behind the child divs under IE6.

I've tried to fix this with javascript:

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

But it doesn't work.

[MidiMagic]

You have size styles (width, height) and nonzero surrounding styles (margin, border, padding) in the same style, or applied to the same tag. This guarantees IE/FF incompatibilities.

It also does not help to define sizes in pixels. Use points or percents.

[DiGSGRL]

I have the same problems in IE7 IE6 IE5 and uh we don't look at the other IE browsers unless you want to cry.

IE made it possible to have different style sheets for different versions of IE or just for IE in general.

Of course you would first need to create a diff Css probably for IE6. We will call it IE6 here. Then inside your head where you call your Css files put in:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/IE6.css" />
<![endif]-->

You would place all the code inside that css file that is specific to IE6. You can do this for All IE at once by using:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/IE.css" />
<![endif]-->

It can be used for individual versions, all version, version 7+ all that good stuff.

[roryt]

I have never had any problems doing sizes in pixels. I have also never actually had the problem of different IE versions doing different things with my website. The only browsers you need to worry about are IE 6, 7 and 8 + FF + Opera. Then once they work the rest tend to control them in a similar way so your ok.

Makz, could you post a link to the page with your problem not an image. That might help people see exactly whats going wrong.

Thanks

[MidiMagic]

Size parameters set in pixels don't make cross-browser compatibility problems. They create problems when different screen resolutions are used.

[roryt]

Midimagic:

The most detailed designs are made using pixels dimensions. There is simply no way to do it using percentages sometimes. And when done right pixel made layouts can work on almost any resolution. I realise there are always problems when moving to smaller browsers but even percentage set layouts have problems when made very small if not done correctly.

Now as for cross browser issues: speaking of FF and IE they both treat pixel and percentage widths the same way - one adds the padding set on to the width and the other presumes it is included in the set width (IE).