Extra padding in table cell for IE

Posted on 2005-05-09
Last Modified: 2008-02-01
Hi all,

In firefox, this padding is not there, however, in IE there is this 1/2 pixel gap between the heading of a table cell and the image and its text:

<td  width='50%'   bgcolor=$colour>
<div id='info'><h2>Tra la la</h2></div>
<a href='somepage.html'><img src='picture' border='0'></a>
<div id='write'>text goes here<div>

The relevant CSS:

table td #info{


     font-family:Verdana, Arial, Helvetica, sans-serif;

.listings td img{

The required layout:

Some Heading here  |
``````````````````      <______MYSTERY IE GAP HERE
image| writing here  |
         | more writing |

I can post the website if required..many thanks for help in advance.

Kate :)
Question by:katneej
    LVL 30

    Expert Comment

    yes, posting the website will help.

    ... make sure you use a complete doctype:
    ... and make sure the page validates:
    LVL 2

    Expert Comment

    1/2 pixel? are you sure? A pixel is a pixel. It's either on or off, you can't display a half pixel (or any other portion for that matter). While you are allowed to specify fractional pixels, the browser must round up or down to the nearest whole pixel - there is no other way.

    Grand is correct, posting the site or more of the code would be of tremendous help here. It would appear to me that the problem has nothing to do with the table cell, but the elements inside. It looks like you have a slight case of divitis :) I don't believe you need as much markup as you have. You could have id'd the table cell and had this markup:

    <td id="info">
      <h2>Some Heading</h2>
      <a href="#"><img src="somepic.jpg" alt="" /></a>
      <p>Writing here. More writing here</p>

    and still have targeted every element within the cell with CSS.

    Author Comment

    Thanks for the response. I meant 1/2 pixel as in 1 or 2 pixels. The troubling page is  

    As yu can see, between the 'tra la la' heading and the picture and text there is a gap but not on firefox..many thanks
    LVL 30

    Expert Comment

    from this rule:  table td #info{ height:14px; },
    i assume you want the div to be 14px high... because your background image is 14px high...
    but when you use font-size: 14px, the default line-height (vertical space that your text takes) is a little more than 14px... (should be something like 125% of 14px).
    so, if you don't want the height to expand in IE (that's a buggy behaviour in IE), you need to set the line height as well:

    table td #info{

    The best solution is not to specify any height at all for the div and use a background image that is higher than 14px and supports to be cropped.
    LVL 30

    Accepted Solution

    Note that your background-image could nicely support to be cropped:  make it something like 50px high and use the dark red color to fill the rest of the image.

    Or, even better, you can use a combination of background image and color (don't forget to remove the height:14px):

    table td #info{
        background: #8A0602 url(infoback.jpg) repeat-x left top;
    LVL 30

    Expert Comment


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

    758 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now