Rank: ? (1)
Member #: 27018

Hi everyone,

I've been having a problem with a site I'm making and although it works perfectly in firefox, IE is just not working with me (as is always the case). I have a php file that outputs a series of divs some with a background colour, some without. These divs are snugly inside (or at least they should be snug) a larger div, whose width is a pixel value equal to the sum of the pixel values of the widths of all the smaller divs combined.

This is my feeble attempt at simulating a progress bar for a picture album that shows how far along you are in the album.

The larger div has a border that is 1px wide, so I tried to make the sum of the inner divs smaller by 2 (to account for any possible width stolen by the border) but that didn't work either.

Also, if I take off 4px (I think that's how much it is... it might be more) the sum of the smaller widths then the inner divs do not get wrapped at all but there is a space to the right of the last div as wide as the difference between the length of the larger div and the sum of the widths of the smaller divs.

What happens (in IE only) is that the last two divs are wrapped (this baffles me as I figured only the last one would be, seeing as all the divs including the second to last one still have a width less than that of the lafge one they are within).

I'm pulling my hair out here (as usual... IE makes me mad!!!). Does anybody have any clue what could be my problem?

Here is a snippet of the code for just the divs:

Code:


Here is a text file with the code all in context

Thanks a lot,
Douglas

Rank: ? (4821)
Member #: 3416

my guess is the problem is that you're using percents. 14% of 339px (your outer div's width) is 47.46px, but the browser can't display fractional pixels, so it has to round it and i'm pretty sure i've read that this sort of rounding varies widely across browsers.

you might have better results using 2 divs for the inside of your progress bar instead of 7 though -- if you're at 3 of 7 then the first div is 3/7 the total width and the second one is 4/7. this would give you less discrepancy.

even better, give the div that has the (7out of7) title a background color that is meant to be the unfilled part of the progress bar, and just use one div inside it to show the progress -- you wouldn't eve need to use float:left that way.