Table row/border problem in IE7

Discussion in 'HTML' started by kdubya, Jul 23, 2008.

  1. kdubya

    kdubya Guest

    I am attempting to mosaic images together seamlessly using a table. I
    can achieve what I want in Firefox (2.0.0.16) but not in IE7.

    IE7 appears to put a gap between rows so the background shows through.
    I have tried multiple things in both HTML and CSS to get rid of the
    gap and I'm stumped now.

    You can see an example at:

    http://winanstech.com/tableProblem.html

    Any suggestions are welcomed.

    Ken
     
    kdubya, Jul 23, 2008
    #1
    1. Advertising

  2. kdubya

    dorayme Guest

    In article
    <>,
    kdubya <> wrote:

    > I am attempting to mosaic images together seamlessly using a table. I
    > can achieve what I want in Firefox (2.0.0.16) but not in IE7.


    Not on my Firefox 2, the look you get will vary according to the text
    size set by the user. The red shows up top right because the text in
    bottom right cell outruns the 100px wide image - the browser (rightly)
    expands the cell to fit the text, it does not know you want it to be
    only 100px wide. So it grows wider. And being wider, it will then affect
    the top row cells which match the width of the widest cells so that the
    columns are even spaced.
    >
    > IE7 appears to put a gap between rows so the background shows through.
    > I have tried multiple things in both HTML and CSS to get rid of the
    > gap and I'm stumped now.
    >
    > You can see an example at:
    >
    > http://winanstech.com/tableProblem.html
    >
    > Any suggestions are welcomed.
    >


    You can tell the cells to be 100px wide, something you have not done.
    you might get support in most browsers. For example a quick change of
    yours to:

    <td style="width:100px;>
    <p>Text will go here</p>

    got FF to give the look I imagined you wanted.

    --
    dorayme
     
    dorayme, Jul 23, 2008
    #2
    1. Advertising

  3. kdubya

    kdubya Guest

    On Jul 23, 6:42 pm, Martin Jay <> wrote:
    > On Wed, 23 Jul 2008 14:24:38 -0700 (PDT), kdubya
    >
    > <> wrote:
    > >http://winanstech.com/tableProblem.html

    >
    > Silly IE.
    >
    > Try removing spaces before the </td> end tag, so:
    >
    > <td>
    > <img src="./images/yellow.jpg" alt="yellow cell" width="100px"
    > height="100px">
    > </td>
    >
    > becomes:
    >
    > <td>
    > <img src="./images/yellow.jpg" alt="yellow cell" width="100px"
    > height="100px"></td>
    > --
    > Martin Jay


    Thanks, this seems to have fixed the problem in this example.

    Ken
     
    kdubya, Jul 24, 2008
    #3
  4. kdubya

    kdubya Guest

    On Jul 23, 7:03 pm, Neredbojias <me@http://www.neredbojias.net/_eml/
    fliam.php> wrote:
    > On 23 Jul 2008, kdubya <> wrote:
    >
    > > I am attempting to mosaic images together seamlessly using a table. I
    > > can achieve what I want in Firefox (2.0.0.16) but not in IE7.

    >
    > > IE7 appears to put a gap between rows so the background shows through.
    > > I have tried multiple things in both HTML and CSS to get rid of the
    > > gap and I'm stumped now.

    >
    > > You can see an example at:

    >
    > >http://winanstech.com/tableProblem.html

    >
    > > Any suggestions are welcomed.

    >
    > In addition to other comments, an image-per-cell is best rendered -
    >
    > display:block;
    >
    > ...via css.
    >
    > --
    > Neredbojiashttp://www.neredbojias.net/
    > Great sights and sounds


    Just to clarify for me - do you mean to add "display: block;" to the
    style definition for the <img> tag?

    Thanks,
    Ken
     
    kdubya, Jul 24, 2008
    #4
  5. kdubya

    kdubya Guest

    On Jul 23, 6:47 pm, dorayme <> wrote:
    > In article
    > <>,
    >
    > kdubya <> wrote:
    > > I am attempting to mosaic images together seamlessly using a table. I
    > > can achieve what I want in Firefox (2.0.0.16) but not in IE7.

    >
    > Not on my Firefox 2, the look you get will vary according to the text
    > size set by the user. The red shows up top right because the text in
    > bottom right cell outruns the 100px wide image - the browser (rightly)
    > expands the cell to fit the text, it does not know you want it to be
    > only 100px wide. So it grows wider. And being wider, it will then affect
    > the top row cells which match the width of the widest cells so that the
    > columns are even spaced.
    >
    >
    >
    > > IE7 appears to put a gap between rows so the background shows through.
    > > I have tried multiple things in both HTML and CSS to get rid of the
    > > gap and I'm stumped now.

    >
    > > You can see an example at:

    >
    > >http://winanstech.com/tableProblem.html

    >
    > > Any suggestions are welcomed.

    >
    > You can tell the cells to be 100px wide, something you have not done.
    > you might get support in most browsers. For example a quick change of
    > yours to:
    >
    > <td style="width:100px;>
    > <p>Text will go here</p>
    >
    > got FF to give the look I imagined you wanted.
    >
    > --
    > dorayme


    You are absolutely correct - my example was not very robust in this
    respect.

    Thanks,
    Ken
     
    kdubya, Jul 24, 2008
    #5
  6. kdubya

    dorayme Guest

    In article
    <>,
    kdubya <> wrote:

    > On Jul 23, 6:47 pm, dorayme <> wrote:
    > > > IE7 appears to put a gap between rows so the background shows through.
    > > > I have tried multiple things in both HTML and CSS to get rid of the
    > > > gap and I'm stumped now.

    > >
    > > > You can see an example at:

    > >
    > > >http://winanstech.com/tableProblem.html

    > >
    > > > Any suggestions are welcomed.

    > >
    > > You can tell the cells to be 100px wide, something you have not done.
    > > you might get support in most browsers. For example a quick change of
    > > yours to:
    > >
    > > <td style="width:100px;>
    > > <p>Text will go here</p>
    > >
    > > got FF to give the look I imagined you wanted.
    > >
    > > --
    > > dorayme

    >
    > You are absolutely correct - my example was not very robust in this
    > respect.


    As for any gap that you will see from time to time at the bottom of
    pictures, you can "cure" these by putting a CSS style of display: block
    on your images. The reason that these gaps will sometimes become
    apparent is that an img is an inline object by default (disply: inline).
    An inline object is like a character and room is allowed by the browser
    for descenders in inline boxes (eg. y, j, p).

    --
    dorayme
     
    dorayme, Jul 24, 2008
    #6
    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. tshad
    Replies:
    0
    Views:
    2,307
    tshad
    Jan 31, 2005
  2. phl
    Replies:
    1
    Views:
    4,434
    Martin Jay
    Jun 8, 2006
  3. Jeff Louella

    IE7 on XP vs IE7 on Vista

    Jeff Louella, Mar 1, 2007, in forum: HTML
    Replies:
    9
    Views:
    559
    Adrienne Boswell
    Mar 2, 2007
  4. freemont
    Replies:
    4
    Views:
    691
    freemont
    Mar 19, 2008
  5. Paul David Buchan
    Replies:
    12
    Views:
    1,754
    dorayme
    Sep 4, 2008
Loading...

Share This Page