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

S

Stefan Mueller

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
 
E

Els

Stefan said:
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.
 
P

PH

Stefan Mueller said:
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>
__________________________________
 
N

Neredbojias

To further the education of mankind, "Stefan Mueller"
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.
 
V

vijay.khambe

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...
 
S

Stefan Mueller

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
 
S

Stefan Mueller

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 = "mailto:[email protected]">[email protected]</a>
</td>
</tr>
</table>
and then press the Tab key, '(e-mail address removed)' gets surrounded (only
'(e-mail address removed)' gets surrounded).

If I use
<table width = "100%">
<tr>
<td align = "center">
<a href = "mailto:[email protected]" style =
"display:block">[email protected]</a>
</td>
</tr>
</table>
and then press the Tab key, '(e-mail address removed)' gets also surrounded but not
only '(e-mail address removed)'. The whole row gets surrounded.

Is there any possibility to keep only '(e-mail address removed)' surrounded even if I
use style = "display:block"?
Stefan
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,479
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top