Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How to avoid the space on the right and bottom side of an image in Internet Explorer

Reply
Thread Tools

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

 
 
Stefan Mueller
Guest
Posts: n/a
 
      06-15-2006
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


 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      06-15-2006
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/
 
Reply With Quote
 
 
 
 
PH
Guest
Posts: n/a
 
      06-15-2006
"Stefan Mueller" <(E-Mail Removed)> wrote in message news:e6rs4a$s1o$(E-Mail Removed)...
> 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


 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      06-16-2006
To further the education of mankind, "Stefan Mueller"
<(E-Mail Removed)> 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.
 
Reply With Quote
 
vijay.khambe@gmail.com
Guest
Posts: n/a
 
      06-16-2006
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"
> <(E-Mail Removed)> 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.


 
Reply With Quote
 
Stefan Mueller
Guest
Posts: n/a
 
      06-16-2006
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


 
Reply With Quote
 
Stefan Mueller
Guest
Posts: n/a
 
      07-05-2006
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 = "(E-Mail Removed)">(E-Mail Removed)</a>
</td>
</tr>
</table>
and then press the Tab key, '(E-Mail Removed)' gets surrounded (only
'(E-Mail Removed)' gets surrounded).

If I use
<table width = "100%">
<tr>
<td align = "center">
<a href = "(E-Mail Removed)" style =
"display:block">(E-Mail Removed)</a>
</td>
</tr>
</table>
and then press the Tab key, '(E-Mail Removed)' gets also surrounded but not
only '(E-Mail Removed)'. The whole row gets surrounded.

Is there any possibility to keep only '(E-Mail Removed)' surrounded even if I
use style = "display:block"?
Stefan


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
Internet Explorer 8: C:\Program Files\Internet Explorer\iexplore.exe vs C:\Program Files (x86)\Internet Explorer\iexplore.exe Nathan Sokalski Windows 64bit 16 02-22-2010 08:31 AM
Tool to right click image in windows explorer and rotate image right or left 90 degrees siliconpi Digital Photography 2 11-29-2004 12:56 PM
Why Python style guide (PEP-8) says 4 space indents instead of 8 space??? 8 space indents ever ok?? Christian Seberino Python 21 10-27-2003 04:20 PM
Stack space, global space, heap space Shuo Xiang C Programming 10 07-11-2003 07:30 PM



Advertisments