[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 621
  • Last Modified:

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 :)
0
katneej
Asked:
katneej
  • 4
1 Solution
 
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
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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:
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:
<:°)
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now