Member Avatar for 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 and in . 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.

  • 4 Contributors
  • 5 Replies
  • 121 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by roryt

Dani AI

Generated

For : the extra gap in IE6 is almost always an IE layout/float issue rather than a font or percentage problem. Two likely causes in this thread are (a) the float container not getting "hasLayout" in IE6/7 and (b) the clear element using an odd border shorthand that IE6 can misrender. Quick, low-risk fixes to try in order:

Give the parent an IE layout (this contains floats) or create a block formatting context:

.cssDivNino {
  zoom: 1;            /* triggers hasLayout in IE6/7 */
  /* or use overflow: hidden; to contain floats (beware clipping) */
}

Fix the clear node so it doesn't introduce height or an accidental border:

.clear {
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 0;
  border: 0;
  display: block;
}

If you prefer a JS fallback (your previous attempt read an inline style and so failed), read the computed height instead:

parent.style.height = firstFloat.offsetHeight + 'px';

A couple of extra checks: ensure a standards DOCTYPE is present (quirks mode changes box-model math), remove any stray border shorthand like border: thin; on the clear element, and verify total column widths + margins don't exceed the row width (rounding in IE6 can add 1px). and are right that pixels themselves aren't the root cause here; the rendering quirk is IE's layout model. 's conditional stylesheet idea works if you need an IE6-only tweak, but try the hasLayout/clear fixes first — they usually fix the symptom without extra stylesheets.

Recommended Answers

All 5 Replies

Member Avatar for 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.

Member Avatar for 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.

Edited by Reverend Jim because: Fixed formatting
Member Avatar for 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

Member Avatar for MidiMagic

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

Member Avatar for 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).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.