Has anyone seen this 19px image gap in IE?

Image GAP in internet exploder

[pingram3541]

I can't seem to find this mentioned anywhere so I'm hoping the community can come to my rescue. I have a series of horizontally aligned images that don't seem to care about the vertical-align:bottom or block:float tags and still show an ugly gap in between my images.

Upon further inspection, it appears that every image that has a gap (white space) is under 19px. If I stretch any of the smaller images to 19px or more, no more gaps! If I size to 18px or less, the infamous gaps reappear.

Naturally this is only happening in Internet Explorer (version 7 to be specific).

Any thoughts?

[edited by: tedster at 3:44 am (utc) on Nov. 13, 2008]
[edit reason] no example pages, please [/edit]

[mediaVinci]

Hello,

we recently had a similar issue with an image which had been placed within a table cell. The image was showing a 4pixel invisible border at the bottom of the JPEG.

The web page worked fine in Mozilla Firefox, Apple Safari and Opera. Only IE was showing up this inexplicable 4pixel border at the bottom of the JEPG image.

Our business partner from the states has solved this issue for IE by adding the following css style tag to the table cell.

e.g.

<td style="background-color: #FFFFFF">

Give it a try, maybe it helps.

[pingram3541]

Gave it a try and no luck adding that style to the <td> with my images.

The site I'm working with is data driven and the page is called via php. For example:

in index.php the line looks something like <td><?php include(DIR_WS_MODULES . 'front_page.php'); ?></td>

in the front_page.php the code is is basically images wrapped in divs and have the following applied:
border:0
margin:0
vertical-align:bottom
height/width

Every browser except IE is fine and it only seems to be the images less than 19px in height that show gaps. I even added in my stylesheet.css a line for img { float:block; vertical-align:bottom;} with no luck.

I know that the ultimate workaround is to re-slice my images and re-code but it seems strange that this issue has not surfaced more commonly. I've tried googling this with zero results.

[pingram3541]

ok, I figured this one out and it seems to be part of the browsers built-in styling. Here is what I did.

I classed my div: <div class="front_page">

and then styled the following in my stylesheet.css:

div.front_page {
font-size:0px;
line-height:0px;
width:560px;
}

div.front_page img {
margin:0px;
border:0px;
vertical-align:bottom;
}

The 2 main things were the line height and the font size.

[swa66]

FWIW:

"img { float:block;"

isn't going to be understood by browsers. It's either

"float:left;"

(or right) or

"display:block;"

what you meant to write I think.

Core of the problem seems to be that your <img>s are displaying inline, hence they get the line height. Does that correlate with the 19px ?

I typically reset all padding and margins with

* {
  margin:0;
  padding:0;
}

as one of the very first things in a new CSS file. (it's often disrupting in an existing one, take care)