How can i stop this cell from doubling its height?

Question

Ok so I have begun changing my pages to CSS so I can link to style sheets for all their benefits.

The page will get run through html tidy from w3 after all the incompatible bits are altered to css.

Html tidy

After adding some css instead of the incompatible html i had before that doesnt come out good through html tidy the cells are twice their height.

Here's a link to the page in progress:

and here is one of the cells in questions code:

<td style="width: 283px; height: 30px; 
    background-image: url('EmuNewNGd_Template/techage_map1_featurebar.jpg')">
   <p align="center">
       <b>
          <font color="#000080" size="2" face="Tahoma">
            Bringing You Nothing But The Best
         </font>
      </b>
   </p>
</td>

any ideas why they are so big because their size when viewed in a browser is not 30px but much larger.

Keep in mind that I'm not very good with CSS.

Answer 1

They are bigger because there are <p> elements in the table which contain the text. By default <p> elements have a margin. You can remove that by adding this to your css:

#AutoNumber9 tbody tr td p { margin: 0; padding: 0; }

This is specific only for the table with the id #AutoNumber9. If you want to do that for all <p> elements on the site you can add:

p {
    margin: 0;
    padding: 0;
}