How to avoid the space on the right and bottom side of an image in Internet Explorer

Opera and Mozilla draw the border of the cells of the table just after the
picture. With Internet Explorer I do always have a small space.
If you select the image with the mouse you'll see that there's somehow a
small space on the right and bottom side of an image in Internet Explorer.

<table width = "100%" cellSpacing = "0" cellPadding = "0" border = "1"
align = "center">
<tr>
<td>
<img src = "mypic.gif">
</td>
</tr>
<tr>
<td>
<img src = "mypic.gif">
</td>
</tr>
</table>

Does anybody know how to get rid of this annoying space?
Stefan

Stefan Mueller

Stefan Mueller wrote:

> Opera and Mozilla draw the border of the cells of the table just after the
> picture. With Internet Explorer I do always have a small space.
> If you select the image with the mouse you'll see that there's somehow a
> small space on the right and bottom side of an image in Internet Explorer.

[snip layout table]

> Does anybody know how to get rid of this annoying space?

Add some CSS:
<img src="mypic.gif" alt="" style="display:block;">

Images are inline content, just like text. The space below the image
is the same space below text, to make room for descenders of letters
like g,j,p,q,y.

Above is inline CSS, but of course it's better to set that style in a
styleblock, or even better, in your stylesheet. By the fact that
you're using 1997 HTML like border="1" and align="center" as well as
tables for layout, I'm guessing you're not using CSS yet, so - quick
solution is inline CSS as per the example.

--
Els http://locusmeus.com/

"Stefan Mueller" <seekware-remove-@yahoo.com> wrote in message news:e6rs4a$s1o$...
> Opera and Mozilla draw the border of the cells of the table just after the
> picture. With Internet Explorer I do always have a small space.
> If you select the image with the mouse you'll see that there's somehow a
> small space on the right and bottom side of an image in Internet Explorer.
---
> <td>
> <img src = "mypic.gif">
> </td>
---

Put the tags on the same line with no space:
<td><img src = "mypic.gif"></td>
^ ^
__________________________________

<table width = "100%" cellSpacing = "0" cellPadding = "0" border = "1"
align = "center">
<tr>
<td><img src = "mypic.gif"></td>
</tr>
<tr>
<td><img src = "mypic.gif"></td>
</tr>
</table>
__________________________________
--
Best Regards
Peter Heinzl
www.123-game.com

To further the education of mankind, "Stefan Mueller"
<seekware-remove-@yahoo.com> vouchsafed:

> Opera and Mozilla draw the border of the cells of the table just after
> the picture. With Internet Explorer I do always have a small space.
> If you select the image with the mouse you'll see that there's somehow
> a small space on the right and bottom side of an image in Internet
> Explorer.
>
> <table width = "100%" cellSpacing = "0" cellPadding = "0" border =
> "1"
> align = "center">
> <tr>
> <td>
> <img src = "mypic.gif">
> </td>
> </tr>
> <tr>
> <td>
> <img src = "mypic.gif">
> </td>
> </tr>
> </table>
>
> Does anybody know how to get rid of this annoying space?
> Stefan

Style the container (in this case table or td) with any/all of the
following:

line-height:0px;
font-size:0px;
vertical-align:bottom;

and, as mentioned, you could try display:block; on the images.

--
Neredbojias
Infinity has its limits.

Hey a simple solution... just put a <br> after img src....
i.e.
<td>
<img src = "mypic.gif"><br>
</td>
thats it.. all space will be removed...


Neredbojias wrote:
> To further the education of mankind, "Stefan Mueller"
> <seekware-remove-@yahoo.com> vouchsafed:
>
> > Opera and Mozilla draw the border of the cells of the table just after
> > the picture. With Internet Explorer I do always have a small space.
> > If you select the image with the mouse you'll see that there's somehow
> > a small space on the right and bottom side of an image in Internet
> > Explorer.
> >
> > <table width = "100%" cellSpacing = "0" cellPadding = "0" border =
> > "1"
> > align = "center">
> > <tr>
> > <td>
> > <img src = "mypic.gif">
> > </td>
> > </tr>
> > <tr>
> > <td>
> > <img src = "mypic.gif">
> > </td>
> > </tr>
> > </table>
> >
> > Does anybody know how to get rid of this annoying space?
> > Stefan
>
> Style the container (in this case table or td) with any/all of the
> following:
>
> line-height:0px;
> font-size:0px;
> vertical-align:bottom;
>
> and, as mentioned, you could try display:block; on the images.
>
> --
> Neredbojias
> Infinity has its limits.

To use
<td><img src = "mypic.gif"></td>
instead of
<td>
<img src = "mypic.gif">
</td>
solves the problem.

However, I prefer
<img src="mypic.gif" alt="" style="display:block;">

The inline style
style="display:block;"
also solves my spacing problems I had with HREFs.


Many thanks to all
Stefan

In the meantime a found a displaying issue while using style =
"display:block".

If I use
<table width = "100%">
<tr>
<td align = "center">
<a href = "private.php?do=newpm&u="></a>
</td>
</tr>
</table>
and then press the Tab key, '' gets surrounded (only
'' gets surrounded).

If I use
<table width = "100%">
<tr>
<td align = "center">
<a href = "private.php?do=newpm&u=" style =
"display:block"></a>
</td>
</tr>
</table>
and then press the Tab key, '' gets also surrounded but not
only ''. The whole row gets surrounded.

Is there any possibility to keep only '' surrounded even if I
use style = "display:block"?
Stefan