html table/image problem

Joined: 10/03/2006

I have recently been added to my Church's web team and am tinkering around trying to learn things so that I can be of help in the future. (I'm an embedded software engineer with little web experience.) I have a problem when I try to display images within a table. I have some html code that works fine when I load it locally on my laptop, but does not display correctly when it is loaded from our hosting site. I seem to end up with gaps below some images within the table. I have tryed setting cellspacing and border to zero with no luck. Note that our hosting site is e-zekiel...anyone have any experience with them? Here is a snippet of code.

<table width="221" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td><img width="25" height="25" border="0" alt="" src="images/Lcolumn1.png" /></td>
            <td><img width="165" height="25" border="0" alt="" src="images/Lcolumn2.gif" /></td>
            <td><img width="31" height="25" border="0" alt="" src="images/Lcolumn3.png" /></td>
        </tr>
        <tr>
            <td background="images/Lcolumntile1.gif">&nbsp;</td>
            <td bgcolor="white">Links here!</td>
            <td background="images/Lcolumntile2.png">&nbsp;</td>
        </tr>
        <tr>
            <td><img width="25" height="31" border="0" alt="" src="images/Lcolumnb1.png" /></td>
            <td><img width="165" height="31" border="0" alt="" src="images/Lcolumnb2.png" /></td>
            <td><img width="31" height="31" border="0" alt="" src="images/Lcolumnb3.png" /></td>
        </tr>
    </tbody>
</table>

In this case there are gaps between the two top side png images and their neighbor gif/png below them in the second row. There may be a gap between the top center gif and below it but I can't be sure as it fades to white. The rest of the table fits together fine. I also have other tables/images with the same problem. I originally thought it was a 'first row' problem but if I duplicate the first row here twice, I see the problem with both rows. Again, this table looks fine if I load it locally on my laptop.

Can anyone help? I apologize if this is a bit too detailed a question...

ptb

G&G Podcast Host
Matt Farina's picture
Joined: 06/01/2006
link

As is often the case, do you have a link to this? I don't see a problem here but I'm sure there is other stuff going on in this page that could be the culprit.

Matt Farina
Geeks and God Co-Host
www.innovatingtomorrow.net
www.mattfarina.com

Matt Farina
Geeks and God Former Co-Host
www.mattfarina.com

Joined: 10/03/2006
Here is the link...

It is a test page where I'm playing around. You can see the same problem happens in another table.

http://www.eliotbaptist.com/templates/System/detai...

I have other alignment problems as well but I'm not worried about them.

Note that the church's main website is not currently up.

Much of this pages code comes from the way the host presents things. I'm focused on the code to create the two image tables.

Thanks!
ptb

G&G Podcast Host
Matt Farina's picture
Joined: 06/01/2006
tr and td heights

The reason you are seeing this differently in different browsers is because the issue is with the default heights of your cells. In some browser, based on your font sizes and other defaults, they are large than the 25px height of your image. This causes the problem.

With what you are trying to do I'd use divs and spans instead. They won't suffer the same fate.

I messed around with the table for a minute but couldn't find that errant default value that needs to be changed. It's not the row or column height. I'd switch to divs for the layout. It would be much less of a headache and follow proper coding practices.

Matt Farina
Geeks and God Co-Host
www.innovatingtomorrow.net
www.mattfarina.com

Matt Farina
Geeks and God Former Co-Host
www.mattfarina.com

Joined: 10/03/2006
divs and spans

Thanks very much Matt!!! I will look into it!!!

ptb