SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Help! Layout breaks in IE6

    Hi,

    my new website completely breaks in IE6! Can anybody tell me how to fix this?

    In Firefox and Safari everything looks perfect...

    Thanks for any help.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    First of all remove the text-align:center form the body element as that throw the absolute positioning out in IE6 unless you have also wrapped the page in a wrapper and then applied text-align:left.

    You don't seem to need text-align:center in the body element so just remove it and most of the page will click back into place.

    You also have the 3px jog (see faq on floats) on the main content which is why its being placed further away than other browsers. This is also combined with the fact that your #side is 200px wide but you have only placed the content 196px away which means that in good browers the background overlaps but doesn't in IE.

    You will need to add these 2 hacks to make it ork in IE6.

    Code:
    * html #side{margin-right:-7px}
    * html #content{margin-left:193px}
    Usually the best approach with a 2 column layout is to float both columns and this avoids the 3px jog and other float clearing bugs.

  3. #3
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks for your help. The "text-align:left" in the body selector was very stupid of me, thanks for telling me.

    Do you think I can circumvent the two hacks you recommended, if I just float both columns to the left? Or add a wrapper div and float both columns left and right respectively?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    yes you could avoid the hacks if you floated both columns but you'd need to shift the content over to overlap like this.

    Code:
    #content {float:left;margin-left:-4px; width: 500px; text-align: left; background: url(http://pedros-paella.designbits.de/images/bg_content.png) repeat-y; padding: 12px 34px 0 34px;}
    Remember to clear the floats if you have stuff underneath

  5. #5
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Thanks but that makes it look kind of ugly in other browsers because there's gap between #side and #content. So I better leave it as you recommended in your first post.

    There still isn't any hack to make repeating transparent PNGs work in IE6, right?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    There still isn't any hack to make repeating transparent PNGs work in IE6, right?
    Not really - but it does depend on the type of repeat. If its just a uniform repeating border that has no pattern then you can use the sizing="scale" attribute in the alpha image loader. This will stretch the image to the size of the element.

    e.g.

    The vertical borders on this example are tiled in good browsers but scaled in Ie6.

    http://www.pmob.co.uk/temp/transparent-test4.htm

    If the image is more complicated or has a definite repeat effect then it can't really be done as the alpha image loader will only "crop","image" or "scale".

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Thanks but that makes it look kind of ugly in other browsers because there's gap between #side and #content.
    Did you forget the negative margin to cause the overlap.

    Code:
    #content {float:left;margin-left:-4px; width: 500px; text-align: left; background: url(http://pedros-paella.designbits.de/images/bg_content.png) repeat-y; padding: 12px 34px 0 34px;}
    That works on every browser I have IE, Opera , Safari, Firefox.

  8. #8
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I redesigned the site using a two-column approach as you suggested in your first post. However, in IE6 the banner images are not displayed. It seems like they are dropped down for some reason. Can you tell me why this happens?

    Will I need another hack for this? Thanks for your help...

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Remove the hacks that were in place for the other version

    Remove these.
    Code:
    * html #side{margin-right:-7px}
    * html #main{margin-left:193px}

  10. #10
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Arrghh. Sorry, I can't believe I did that. Thanks! Unfortunately, I won't have access to IE6 before tomorrow. But it should be fixed now, I guess. Thanks!


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
  •