|
|
Posted by Oliver Wong on 06/05/07 13:26
"JD" <user@example.net> wrote in message
news:5ckj3jF314dnbU1@mid.individual.net...
> 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.
Thanks, aligning the background to the bottom fixed it.
- Oliver
Navigation:
[Reply to this message]
|