katneej
asked on
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(infob
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 :)
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(infob
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 :)
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.
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.
ASKER
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
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
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<:°)
... make sure you use a complete doctype: http://htmlhelp.com/tools/validator/doctype.html
... and make sure the page validates: http://validator.w3.org/