HTML and CSS

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

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2007

Posts: 1

Reputation: makz is an unknown quantity at this point

Solved Threads: 0

makz

Offline

Newbie Poster

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

Dec 18th, 2008

Hi, hope you can help me with this one.

I have a Div with five float divs inside:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

.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:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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

But it doesn't work.

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 166

MidiMagic

Offline

Nearly a Senior Poster

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

Dec 26th, 2008

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.

Daylight-saving time uses more gasoline

•

Join Date: May 2008

Posts: 45

Reputation: DiGSGRL is an unknown quantity at this point

Solved Threads: 4

DiGSGRL

Offline

Light Poster

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

Jan 2nd, 2009

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:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/IE6.css" />
<![endif]-->
<!--[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:

[/code]

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

A little clarification goes a long way.

•

Join Date: Oct 2005

Posts: 1,283

Reputation: roryt will become famous soon enough

Solved Threads: 14

roryt

Offline

Nearly a Posting Virtuoso

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

Jan 2nd, 2009

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

PhotoShopthis
FlyingPen
If I have helped you please add to my reputation

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 166

MidiMagic

Offline

Nearly a Senior Poster

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

Jan 6th, 2009

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

Daylight-saving time uses more gasoline

•

Join Date: Oct 2005

Posts: 1,283

Reputation: roryt will become famous soon enough

Solved Threads: 14

roryt

Offline

Nearly a Posting Virtuoso

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

Jan 6th, 2009

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).

PhotoShopthis
FlyingPen
If I have helped you please add to my reputation