IE6 ignoring "height" CSS attribute?

am 05.06.2007 00:10:07 von Oliver Wong

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:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

System is unavailable. Please try at a
later time.

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?

- Oliver

Re: IE6 ignoring "height" CSS attribute?

am 05.06.2007 01:45:09 von lws4art

Oliver Wong wrote:
>
> .messageBarTop {
> background: url(img/messageBarTop.gif) no-repeat;
> width: 723px;
> height: 9px;
> margin: 0;
> border: 0;
> padding: 0;
> float: top;

*top*?

float: left | right | none | inherit there is no top.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: IE6 ignoring "height" CSS attribute?

am 05.06.2007 09:53:27 von Shion

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:
>
>
> 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:

header

Text...

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.

Re: IE6 ignoring "height" CSS attribute?

am 05.06.2007 15:26:06 von Oliver Wong

"JD" 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:
>>
>>
>> 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:
>
>

header

Text...

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