On 2007-01-15, Mike <pa*******@hotmail.comwrote:
Can anyone see what's wrong with this page:
http://www.simpleservicesonline.co.u...?CategoryID=1? The
first image on the second row budges one to the right leaving a space,
whereas, using the same ASP code to generate the html on all the other
pages works fine and gives me three images per row.
http://www.simpleservicesonline.co.u...p?CategoryID=2
http://www.simpleservicesonline.co.u...p?CategoryID=3 etc
It's starting to drive me mad, so any help would be appreciated (and a
relief)
The problem is not all your images are the same heights, in particular
the first one is 123px high, more than most of the others which are
122px.
The first image on the second row can't go all the way to the left,
because the bottom edge of the very first image is hanging down a couple
of pixels.
If a left float doesn't fit to the right of all the other left floats,
it goes down by just enough to allow it to fit to the right of
something-- which might be another float rather than the left of the
container. This has been described as floats "catching" or "snagging" on
each other. If you want to see the effect, exaggerate the differences in
height and it should be clear what's going on.
$ identify mem*.jpg
mem2pp1.jpg JPEG 100x123 DirectClass 33kb
mem2pp2.jpg[1] JPEG 101x122 DirectClass 34kb
mem2pp3.jpg[2] JPEG 101x122 DirectClass 35kb
mem2pp4.jpg[3] JPEG 101x122 DirectClass 33kb
mem2pp5.jpg[4] JPEG 101x122 DirectClass 32kb
mem2pp6.jpg[5] JPEG 101x122 DirectClass 34kb
mem2pp7.jpg[6] JPEG 101x122 DirectClass 32kb
mem2pp8.jpg[7] JPEG 101x122 DirectClass 31kb
mem2pp9.jpg[8] JPEG 101x121 DirectClass 35kb
You could add a height: 123px to your .temp selector, so each float is
the same height, which may be slightly taller than the image inside it,
or process the images themselves to make sure they are all the same
height.
