Extra padding in table cell for IE

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>
</td>

The relevant CSS:

table td #info{
    width:100%;
    height:14px;
    background-image:url(infoback.jpg);
    background-repeat:repeat-x;
                     }

#write{
      padding-right:5px;
         }

h2{
     padding:0px;
     margin:0px;
     font-size:14px;
     color:#FFFFFF;
     font-family:Verdana, Arial, Helvetica, sans-serif;
      }


.listings td img{
     float:left;
     display:inline;
     padding-right:5px;
                }


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 :)
katneejAsked:
Who is Participating?
 
GrandSchtroumpfConnect With a Mentor Commented:
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;
}
0
 
GrandSchtroumpfCommented:
yes, posting the website will help.

... make sure you use a complete doctype:  http://htmlhelp.com/tools/validator/doctype.html
... and make sure the page validates:  http://validator.w3.org/
0
 
cwcroganCommented:
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>
</td>

and still have targeted every element within the cell with CSS.
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
katneejAuthor Commented:
Thanks for the response. I meant 1/2 pixel as in 1 or 2 pixels. The troubling page is www.jammyjunction.com/animation.php 

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
0
 
GrandSchtroumpfCommented:
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{
    height:14px;
    line-height:14px;
}

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.
0
 
GrandSchtroumpfCommented:
<:°)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.