background image in table not lining up with other images

[randyriegel]

First off, I'm not a web designer but have dabbled in it here and there. Use my VPS more as a learning tool. I am starting some work on a site for a friend and am having a problem with background image in a table.

The background image is a pixel or two (can't tell on screen) above the images that I'm placing in the <td> tag of the table. Below is the CSS and html code I have.

CSS

body {
    margin-left: 7%;
    margin-right: 7%;
    margin-top: 0px;
}

table.header {
    width: 100%;
    background-image: url("images/ft_logo_05.gif");
    border-width: 0px;
    padding: 0px;
    border-spacing: 0px;
}

HTML CODE

<table class="header">
    <tr>
        <td>
            <img src="images/ft_logo_01.gif" />
        </td>
        <td>
            <img src="images/ft_logo_02.jpg" />
        </td>
        <td>
            <img src="images/ft_logo_04.gif" />
        </td>
    </tr>
    <tr>
        <td><img src="images/ft_logo_06.gif" /><td>
    </tr>
</table>

He is example of what I'm getting: http://dev.fasttrackrentals.com

I've checked the background image I'm using and it's same height as my header which I sliced up using photoshop. Anyone have any ideas what I could be doing wrong?

[mommaroodles]

First off, I'm not a web designer but have dabbled in it here and there. Use my VPS more as a learning tool. I am starting some work on a site for a friend and am having a problem with background image in a table.

The background image is a pixel or two (can't tell on screen) above the images that I'm placing in the <td> tag of the table. Below is the CSS and html code I have.

CSS

body {
    margin-left: 7%;
    margin-right: 7%;
    margin-top: 0px;
}

table.header {
    width: 100%;
    background-image: url("images/ft_logo_05.gif");
    border-width: 0px;
    padding: 0px;
    border-spacing: 0px;
}

HTML CODE

<table class="header">
    <tr>
        <td>
            <img src="images/ft_logo_01.gif" />
        </td>
        <td>
            <img src="images/ft_logo_02.jpg" />
        </td>
        <td>
            <img src="images/ft_logo_04.gif" />
        </td>
    </tr>
    <tr>
        <td><img src="images/ft_logo_06.gif" /><td>
    </tr>
</table>

He is example of what I'm getting: Fast Track Rentals

I've checked the background image I'm using and it's same height as my header which I sliced up using photoshop. Anyone have any ideas what I could be doing wrong?

ideally you should hv zipped everything up and made it available so we can help you - you havent made it all that easy with the info you provided.

[Main Street James]

table.header {
    width: 100%;
    background-image: url("images/ft_logo_05.gif");
    border-width: 0px;
    padding: 0px;
    border-spacing: 0px;
}

I've checked the background image I'm using and it's same height as my header which I sliced up using photoshop. Anyone have any ideas what I could be doing wrong?

Have you set the margins, padding, border and border-spacing to 0px for the <tr> & <td> tags? Some browsers don't start out with 0px padding & 0px margin. We start every page's stylesheet with this just to be sure they're all starting on a level playing field:

* {
   margin: 0;
   padding: 0;
}

[the_ancient]

Have you set the margins, padding, border and border-spacing to 0px for the <tr> & <td> tags? Some browsers don't start out with 0px padding & 0px margin. We start every page's stylesheet with this just to be sure they're all starting on a level playing field:

* {
   margin: 0;
   padding: 0;
}

Watch using Master Resets, or rather if your going to us a master reset make sure you redefine the spaces for common tags like UL, P, BLOCKQUOTE, etc as the master reset screws them up badly.

No CSS Reset - Snook.ca

[the_ancient]

First off, I'm not a web designer but have dabbled in it here and there. Use my VPS more as a learning tool. I am starting some work on a site for a friend and am having a problem with background image in a table.

The background image is a pixel or two (can't tell on screen) above the images that I'm placing in the <td> tag of the table. Below is the CSS and html code I have.

He is example of what I'm getting: Fast Track Rentals

I've checked the background image I'm using and it's same height as my header which I sliced up using photoshop. Anyone have any ideas what I could be doing wrong?

You must have corrected it because it looks fine in both FF and Chrome on my system

If you just learning Design however I would like to point out that Tables should be used to display tabular data, Layout should be done with div's not tables

[Main Street James]

Watch using Master Resets, or rather if your going to us a master reset make sure you redefine the spaces for common tags like UL, P, BLOCKQUOTE, etc as the master reset screws them up badly.

We define each and every tag we use in a page in the CSS without exception. We even have the server append supplemental CSS formatting based on platform/browser/version if necessary to maintain a consistent user experience across platforms, browsers & browser versions. It's a PITA but our designer is OCD enough that it is the lesser of two evils.

[JPC-Sabrina]

Take a look at this thread posted by our CTO. It is a good HTML and CSS course that may be of some assistance. It is a basic course. Sometimes a quick refresh is helpful.

Thread:
30 Days to Learn HTML and CSS

30 Day Free Course:
30 Days to Learn HTML & CSS - Free Tuts+ Premium Course