|
|
Posted by JD on 06/05/07 07:53
Oliver Wong wrote:
> I've got a pair of images to give a rounded-edge look to some of my blocks
> of texts. messageBarTop.gif is 723px wide by 9px tall, and
> messageBarCenter.gif is 723px wide by 5 px tall. Here's the HTML code I'm
> using:
> <snip>
>
> This seems to work fine in Firefox, but in IE6, there's a big white gap
> between the .messageBarTop div and the .messageBarCenter div. If I set the
> height of messageBarTop to 0px, Firefox correctly doesn't display the
> messageBarTop.gif image at all, whereas IE displays it with the identical
> big white gap, leading me to believe that IE6 is ignoring that my
> specified height alltogether.
>
> What can I do to get rid of the gap in IE6?
Without seeing your images, it's difficult to suggest a solution. Still,
you don't actually need the height property to get this to work.
Try:
<div class="box">
<h2>header</h2>
<p>Text...</p>
</div>
and:
..box {
width: 300px;
background: url(bottom.gif) no-repeat left bottom;
}
..box h2 {
background: url(top.gif) no-repeat left top;
}
Then add padding to the nested elements as needed.
Navigation:
[Reply to this message]
|