IE6 ignoring "height" CSS attribute?

Discussion in 'HTML' started by Oliver Wong, Jun 4, 2007.

  1. Oliver Wong

    Oliver Wong Guest

    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:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    ..messageBarTop {
    background: url(img/messageBarTop.gif) no-repeat;
    width: 723px;
    height: 9px;
    margin: 0;
    border: 0;
    padding: 0;
    float: top;
    }
    ..messageBarCenter {
    background: url(img/messageBarCenter.gif) top left repeat;
    width: 713px;
    padding: 0 5px 0 5px;
    margin: 0;
    }

    </style>
    </head>
    <body>
    <div class="messageBarTop"></div>
    <div class="messageBarCenter">System is unavailable. Please try at a
    later time.</div>
    </body>
    </html>

    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
     
    Oliver Wong, Jun 4, 2007
    #1
    1. Advertising

  2. 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
     
    Jonathan N. Little, Jun 5, 2007
    #2
    1. Advertising

  3. Oliver Wong

    JD Guest

    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.
     
    JD, Jun 5, 2007
    #3
  4. Oliver Wong

    Oliver Wong Guest

    "JD" <> wrote in message
    news:...
    > 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
     
    Oliver Wong, Jun 5, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Wayfarer
    Replies:
    4
    Views:
    820
  2. Danny
    Replies:
    8
    Views:
    14,004
    brucie
    Jul 17, 2004
  3. Muffinman

    IE6, CSS & height in %

    Muffinman, Oct 31, 2005, in forum: HTML
    Replies:
    0
    Views:
    388
    Muffinman
    Oct 31, 2005
  4. perspolis
    Replies:
    1
    Views:
    2,608
    Mark Rae
    Jan 23, 2007
  5. Sascha Roth
    Replies:
    2
    Views:
    830
    Sascha Roth
    Jul 3, 2009
Loading...

Share This Page