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

Discussion in 'HTML' started by Stefan Mueller, Jun 15, 2006.

  1. 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, Jun 15, 2006
    #1
    1. Advertising

  2. Stefan Mueller

    Els Guest

    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/
     
    Els, Jun 15, 2006
    #2
    1. Advertising

  3. Stefan Mueller

    PH Guest

    "Stefan Mueller" <> 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
     
    PH, Jun 15, 2006
    #3
  4. Stefan Mueller

    Neredbojias Guest

    To further the education of mankind, "Stefan Mueller"
    <> 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.
     
    Neredbojias, Jun 16, 2006
    #4
  5. Stefan Mueller

    Guest

    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"
    > <> 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.
     
    , Jun 16, 2006
    #5
  6. 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
     
    Stefan Mueller, Jun 16, 2006
    #6
  7. 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:"></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 = "mailto:" 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
     
    Stefan Mueller, Jul 5, 2006
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Stefan Mueller
    Replies:
    5
    Views:
    12,409
    jamesxa
    Jun 16, 2009
  2. Shuo Xiang

    Stack space, global space, heap space

    Shuo Xiang, Jul 9, 2003, in forum: C Programming
    Replies:
    10
    Views:
    2,916
    Bryan Bullard
    Jul 11, 2003
  3. Christian Seberino
    Replies:
    21
    Views:
    1,681
    Stephen Horne
    Oct 27, 2003
  4. Ian Bicking
    Replies:
    2
    Views:
    1,032
    Steve Lamb
    Oct 23, 2003
  5. windandwaves
    Replies:
    19
    Views:
    2,246
    Spam Trap
    Sep 22, 2007
Loading...

Share This Page