JavaSardine
09-14-2006, 03:24 AM
I noticed a weird behavior of img borders in IE recently and wanted to get some comments from you all about it. Essentially, I was trying to line up a group of thumbnails with 2px of padding between them. I coded something akin to this:
<img src="images/thumb1" />
<img src="images/thumb2" />
Now, I had the appropriate CSS in there to line up the thumbs in a 5 x 5 grid, each thumb being separated by 2px of white space. In FF, it worked fine, but in IE 6, it added two extra pixels of space below the images, top to the sides of the image. I only applied the spacing to the bottom of the img, not the top and bottom, so it wasn't that error.
Anyhow, I fought this problem for a while and for some reason or another, I change the code by simply moving the imgs on the same line like this:
<img src="images/thumb1" /><img src="images/thumb2" />
The page was perfect after that in both browsers. Any ideas of why this happens? I don't like it because my code is jumbled, but I'll take the lesser of the two evils.
<img src="images/thumb1" />
<img src="images/thumb2" />
Now, I had the appropriate CSS in there to line up the thumbs in a 5 x 5 grid, each thumb being separated by 2px of white space. In FF, it worked fine, but in IE 6, it added two extra pixels of space below the images, top to the sides of the image. I only applied the spacing to the bottom of the img, not the top and bottom, so it wasn't that error.
Anyhow, I fought this problem for a while and for some reason or another, I change the code by simply moving the imgs on the same line like this:
<img src="images/thumb1" /><img src="images/thumb2" />
The page was perfect after that in both browsers. Any ideas of why this happens? I don't like it because my code is jumbled, but I'll take the lesser of the two evils.