Page 1 of 1

Floating DIV issue in IE6 (Won't stay in position)

Posted: Mon Sep 05, 2005 3:56 am
by Chris Corbyn
I'm having a problem getting floating divs in IE6 to stay where I want them. I have 4 div's, all set to 25% width, all floating left (It should look like 4 equally spaced boxes in a row).

In FF it works great. In IE (surprise) it breaks intermittently, (usually on page refresh or window resize). What happens is that all the <div> elements shift about and drop down to the next row or fall against the right hand margin etc. Anyone else had similar issues? (I hope they have the box model sorted in IE7).

Code: Select all

<style type="text/css">
body
{
  padding: 0;
  margin: 0;
}
.floating
{
  width: 25%;
  height: 100px;
  float: left;
}
</style>
</head>
<body>
<div class="floating" style="background: #FF0000;">&nbsp;</div>
<div class="floating" style="background: #00FF00;">&nbsp;</div>
<div class="floating" style="background: #0000FF;">&nbsp;</div>
<div class="floating" style="background: #FFFF00;">&nbsp;</div>
</body>
See it here: http://www.w3style.co.uk/css_bug.html

If you open it in FF and resize the window over and over it's fine. Do it IE and it breaks (??!!!). It gets worse and worse once you start stacking them up (with clearing divs between it still breaks).

Any clues?

Cheers, d11

Posted: Mon Sep 05, 2005 5:26 am
by s.dot
That is pretty interesting. Although they never right aligned, the last div did break down to the next line. Perhaps something like this would provide a temporary solution:

Code: Select all

<div style="width: 99%;">
	<div class="floating" style="background: #FF0000;">&nbsp;</div> 
	<div class="floating" style="background: #00FF00;">&nbsp;</div> 
	<div class="floating" style="background: #0000FF;">&nbsp;</div> 
	<div class="floating" style="background: #FFFF00;">&nbsp;</div>
</div>
Although there is that extra 1%.

Edit: that code above still breaks when you resize to certain positions.

This doesn't break:

Code: Select all

<div class="floating" style="background: #FF0000; width: 25%;">&nbsp;</div> 
	<div class="floating" style="background: #00FF00; width: 25%;">&nbsp;</div> 
	<div class="floating" style="background: #0000FF; width: 25%;">&nbsp;</div> 
	<div class="floating" style="background: #FFFF00; width: 24%;">&nbsp;</div>
but you still deal with the left over 1 % :P

Or this will work correctly, but I heard you're not supposed to use tables for structure. I don't know why though. Someone please inform me =)

Code: Select all

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
	<td width="25%">
	<div class="floating" style="background: #FF0000; width: 100%;">&nbsp;</div></td>
	<td width="25%">
	<div class="floating" style="background: #00FF00; width: 100%;">&nbsp;</div></td>
	<td width="25%">
	<div class="floating" style="background: #0000FF; width: 100%;">&nbsp;</div></td>
	<td width="25%">
	<div class="floating" style="background: #FFFF00; width: 100%;">&nbsp;</div></td>
</tr>
</table>

Posted: Mon Sep 05, 2005 5:45 am
by Chris Corbyn
scrotaye wrote:That is pretty interesting. Although they never right aligned, the last div did break down to the next line. Perhaps something like this would provide a temporary solution:

Code: Select all

<div style="width: 99%;">
	<div class="floating" style="background: #FF0000;">&nbsp;</div> 
	<div class="floating" style="background: #00FF00;">&nbsp;</div> 
	<div class="floating" style="background: #0000FF;">&nbsp;</div> 
	<div class="floating" style="background: #FFFF00;">&nbsp;</div>
</div>
Although there is that extra 1%.

Edit: that code above still breaks when you resize to certain positions.

This doesn't break:

Code: Select all

<div class="floating" style="background: #FF0000; width: 25%;">&nbsp;</div> 
	<div class="floating" style="background: #00FF00; width: 25%;">&nbsp;</div> 
	<div class="floating" style="background: #0000FF; width: 25%;">&nbsp;</div> 
	<div class="floating" style="background: #FFFF00; width: 24%;">&nbsp;</div>
but you still deal with the left over 1 % :P

Or this will work correctly, but I heard you're not supposed to use tables for structure. I don't know why though. Someone please inform me =)

Code: Select all

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
	<td width="25%">
	<div class="floating" style="background: #FF0000; width: 100%;">&nbsp;</div></td>
	<td width="25%">
	<div class="floating" style="background: #00FF00; width: 100%;">&nbsp;</div></td>
	<td width="25%">
	<div class="floating" style="background: #0000FF; width: 100%;">&nbsp;</div></td>
	<td width="25%">
	<div class="floating" style="background: #FFFF00; width: 100%;">&nbsp;</div></td>
</tr>
</table>
Thanks. I tried knocking of a portion of the width previously (I've been stumped by this for weeks but had more important things to do). It works as you say but getting down to 800x600 we see the same behaviour again :(

Using tables is bad since the HTML source appears in a somewhat random order and screen readers have a really difficult time reading through it. Div's and CSS are the way to go ;)

Thanks though :)

Posted: Mon Sep 05, 2005 5:46 am
by raghavan20
This width property of divs is great crazy stuff. I also had problems earlier.
as scrotaye was saying, all the divs added together to 100% never gets aligned properly.
somewhere extra space around 1% comes in which makes the last div come down.
may be position: absolute and left:xvalue might help to put divs in place.

Posted: Mon Sep 05, 2005 6:10 am
by Roja
scrotaye wrote:Or this will work correctly, but I heard you're not supposed to use tables for structure. I don't know why though. Someone please inform me =)
Sure.

For cellphones, mobile browsers, visually impared users, and people using screen readers, tables can be particularly difficult to render/view. They don't scale well, they are difficult to 'hear', and they are rarely designed to linearize properly.

In a nutshell, they are being used for the wrong thing. Tables are for presenting tabular data. A calendar is a good example of what you should use tables for. For layout, you should use css.

The Web accessibility guidelines does a good job of explaining some of the reasoning and workarounds:

http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layout

Posted: Mon Sep 05, 2005 6:43 am
by Skittlewidth
I read somewhere (in SitePoint's HTML Utopia: Desiging without Tables Using CSS most likely) about setting widths to 99.9% because in some browsers the horizontal scrollbar displays as soon as the width equals 100% instead of anything over 100%. I wonder if that would also solve the problem with the divs. 99.9% is hard to distinguish from 100% with the naked eye, although its pretty awkward to split up into equal segments unless you like working in 3s or 9s I guess! 8O

Posted: Mon Sep 05, 2005 11:15 am
by s.dot
back when I was first learning HTML a few years ago, I was unaware CSS even existed. I just learned the bare basics HTML, then starting putting things in tables and calling them layouts. Which is still what I do. =/. I guess I will have to learn to transition.

Re: Floating DIV issue in IE6 (Won't stay in position)

Posted: Mon Sep 05, 2005 12:13 pm
by wwwapu
d11wtq wrote:(I hope they have the box model sorted in IE7).
I have my doubts, but even if they did, it would take at least couple more years to safely assume that IE6 is such a minor problem that there is no need to take it into consideration.
scrotaye wrote: I guess I will have to learn to transition.
Yes please. Not only because it makes web a better place, but playing with CSS is a fun and healthy hobby :wink:

Posted: Mon Sep 05, 2005 1:27 pm
by s.dot
Meh, I guess my viewpoint is if you tried to follow as many of the w3c guidelines as possible, you'll end up with a truly boring looking page.. much like the w3c site itself.

I guess its just a matter of your target audience. Pleasing 98% of your visitors is better than struggling to produce interesting pages for the minority viewers.

Posted: Mon Sep 05, 2005 2:26 pm
by Nathaniel
When using CSS, I usuall run into the pleasing 80% of my viewers problem... I develop in Firefox, and then find that my standards-compliant CSS fails miserably in IE. So I have to add hacks to get it to work in the world's most popular (read: crappy) browser.

Posted: Mon Sep 05, 2005 2:29 pm
by ody
This is interesting, the developer I have at work (I was sure he was stalling for beer time with the lads) was putting this problem off with excuses that it was an "IE" problem, turns out he wasn't lying! Anyway, if someone can come up with a way to infiltrate MS and pose as an IE developer and fix there bloody box model I will buy them a pint.

word.

Posted: Mon Sep 05, 2005 2:54 pm
by Chris Corbyn
ody wrote:This is interesting, the developer I have at work (I was sure he was stalling for beer time with the lads) was putting this problem off with excuses that it was an "IE" problem, turns out he wasn't lying! Anyway, if someone can come up with a way to infiltrate MS and pose as an IE developer and fix there bloody box model I will buy them a pint.

word.
I wonder which developer that might be :P

Posted: Mon Sep 05, 2005 3:10 pm
by Roja
scrotaye wrote:Meh, I guess my viewpoint is if you tried to follow as many of the w3c guidelines as possible, you'll end up with a truly boring looking page.. much like the w3c site itself.

I guess its just a matter of your target audience. Pleasing 98% of your visitors is better than struggling to produce interesting pages for the minority viewers.
Absolutely not!

Check out: http://www.csszengarden.com/

Its a collection of images and css files, that transform *one* html page. All of them are html-compliant, all of them are css-compliant, and most of them are accessibility-compliant as well. They are in no way "Boring", and show just how much is possible if you put your mind to it. Compliant and accessible sites can be extremely interesting - more so than most pages.

Compliance doesn't limit you to boring by any stretch - only your own imagination is. But if you start by saying "My site will be boring if I...", it will be.

Posted: Mon Sep 05, 2005 3:16 pm
by Chris Corbyn
This is great too: http://www.ryanbrill.com/ (A List Apart)

Posted: Mon Sep 05, 2005 3:46 pm
by Fourtet
This is interesting, the developer I have at work (I was sure he was stalling for beer time with the lads) was putting this problem off with excuses that it was an "IE" problem, turns out he wasn't lying! Anyway, if someone can come up with a way to infiltrate MS and pose as an IE developer and fix there bloody box model I will buy them a pint.

word.
The "word" at the end just finished it off nicely. :lol:
Meh, I guess my viewpoint is if you tried to follow as many of the w3c guidelines as possible, you'll end up with a truly boring looking page.. much like the w3c site itself.

I guess its just a matter of your target audience. Pleasing 98% of your visitors is better than struggling to produce interesting pages for the minority viewers.
Very misguided there, w3c are not designers that's for sure - but your viewpoint is utter bunkum. A talented CSS/HTML/JavaScript coder can produce interactive experiences as mouth-watering as someone working with Flash MX could. The great thing about it is that not many people have the talent to do that. It separates the men from the boys so to speak. :)