SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2002
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Layout Problems

    http://www.crescentcityradioconnecti...ion/msy/106.7/

    The layout is working just fine in Mozilla.

    However, IE6 is not displaying the content background and the text is not displaying. I can't figure out what went wrong. Help!

  2. #2
    SitePoint Zealot sethtrain's Avatar
    Join Date
    Dec 2003
    Location
    Paducah, KY
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all I would like to commend you on your site design. It looks sharp...

    I see what you mean. Have you tried looking at the compatability charts to see if you have anything that isn't compatable?
    --
    sethtrain

  3. #3
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by thebigtymer
    http://www.crescentcityradioconnecti...ion/msy/106.7/

    The layout is working just fine in Mozilla.

    However, IE6 is not displaying the content background and the text is not displaying. I can't figure out what went wrong. Help!
    Had a hard time figuring out your css cause it is so jumbled together without any spacing.

    Anyways, I found the culprit here:
    #contentbox {position:relative;width:97%;margin-left:auto; ......

    Get rid of the "position: relative" in #contenbox and it works fine in ie6, moz and opera.

    If I were you I would get rid of ALL the position relatives in your css. If your positioning with floats then adding a position: selector is meaningless and will inevitably result in conflicts - which is what happened in this situation. You either position with floats, or use relative/absolute with top and left set - not both methods at the same time.

    Might want to check your xhtml:
    http://validator.w3.org/check?uri=ht...ion/msy/106.7/

    -xDev

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You either position with floats, or use relative/absolute with top and left set - not both methods at the same time.
    While in theory you are correct there is a major flaw in IE6 that necessitates using position relative in certain circumstances (not all circumstances though).

    Consider the following extremely simple code:
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .outer {
     margin-left:100px;
     margin-right:100px;
     border:1px solid #000;
     background:blue;
    }
    .fl {
     float:left;
     width:100px;
     height:100px;
     background:red;
    }
    </style>
    </head>
    <body>
    <div class="outer">
      <div class="fl">Float content</div>
    <p>Hello where's my content gone</p>
    <div style="clear:both"></div>
    </div>
    </body>
    </html>
    You would think that nothing could go wrong here, however if you test this page in ie6 you will see that the content next to float is missing. (this is called the IE6 peek-a-boo bug.)

    The solution to geeting the content to display is to give the outer a position:relative and the float a position:relative as well. If you just give the outer a position:relative then the content appears magically, but the float disappears. The float also needs to be given a position relative as well in order for it to show.

    This is a major flaw in IE and this is not the only instance there are many cases of missing images and text and backgrounds all cured by position:relative. Usually if the parent of a float has a fluid layout (designated by margins) or a position set then I usually follow through and give the float a position relative as well. However its best to check as you go as no one wants redundant code.

    You can read more about it here:

    http://www.positioniseverything.net/.../peekaboo.html

    However you are correct in the post above that it wasn't actually necessary this time. Obviously once you start with the position relative you have to follow it through all nested elements.

    Of course we are only talking about IE again

    I just wanted to point it out because this is a question that is posted on the forums many times.

    Paul

  5. #5
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    While in theory you are correct there is a major flaw in IE6 that necessitates using position relative in certain circumstances (not all circumstances though).

    Consider the following extremely simple code:
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .outer {
     margin-left:100px;
     margin-right:100px;
     border:1px solid #000;
     background:blue;
    }
    .fl {
     float:left;
     width:100px;
     height:100px;
     background:red;
    }
    </style>
    </head>
    <body>
    <div class="outer">
      <div class="fl">Float content</div>
    <p>Hello where's my content gone</p>
    <div style="clear:both"></div>
    </div>
    </body>
    </html>
    You would think that nothing could go wrong here, however if you test this page in ie6 you will see that the content next to float is missing. (this is called the IE6 peek-a-boo bug.)

    The solution to geeting the content to display is to give the outer a position:relative and the float a position:relative as well. If you just give the outer a position:relative then the content appears magically, but the float disappears. The float also needs to be given a position relative as well in order for it to show.

    Paul
    Hey thanks for the hack Paul I've encountered the same problem many times before ... never knew there was a name for it ...lol. I've always handled that particular problem by giving the container a height:100% ... Bang! No more peek-a-boo! Looks and behaves the same in all 3 browsers.

    When positioning you should always give the containing block a width and height, that seems to keep all the browsers in check.

    HTML Code:
    <style type="text/css">
    .outer {
     margin-left:100px;
     margin-right:100px;
     border:1px solid #000;
     background:blue;
     color: white;
     height: 100%;
    }
    .fl {
     float:left;
     width:100px;
     height:100px;
     background:red;
    }
    </style>
    </head>
    <body>
    <div class="outer">
      <div class="fl">Float content</div>
    <p>Hello where's my content gone? <strong>RIGHT HERE!</strong></p>
    <div style="clear:both; background: #ddd;">&nbsp;</div>
    </div>
    Great site you linked to. I end up there 99.99% of the time whenever I run into a particularly esoteric bug that I have no clue how or why it's happening!

    EDIT: Just read the solution they came up with for that problem. Seems the height thing is already known though I could've been using height: 1% the whole time without knowing. The hide from ie-mac hack is pretty cool too.

    -xDev

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    particular problem by giving the container a height:100%
    Yes you're right that cures the problem. If the parent doesn't have a specific width/height then strange things happen. However its not always possible when you want a fluid design so the hack is useful in some cases.

    I think IE is there just to make our life awkward

    Paul

  7. #7
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    its not always possible when you want a fluid design so the hack is useful in some cases.

    I think IE is there just to make our life awkward

    Paul
    Ya you got that right. Shame on them for letting that piece of crap go on so long as it has without FIXING IT

    It's always nice to know different ways to outsmart ie, and I'm sure the relative positioning will come in handy sometime

    -xDev

  8. #8
    SitePoint Zealot
    Join Date
    Nov 2002
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, guys. I took out the position: relative's, and it worked great. Check it out in the sig below. I'm amazed how many positive e-mails I've gotten on it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •