SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 5.5 causing me some problems

    I thought everything was great with my design. Works in IE 6 and Firefox which is the 2 biggys I try to design for.

    Anyway I check a couple pages of my site at work today in IE 5.5 and noticed they are a little messed up...not much.

    http://www.geocities.com/deronsizemore/index.htm
    http://www.geocities.com/deronsizemore/portfolio.htm

    Both are left aligned instead of center which I would like them to be center. The index.htm has some padding left or a white space at the left on the "wavecrashing" pic at the top.

    The portfolio site also is left aligned and not centered, and also along with the white space on the left has a white space on the right as well (but I think this is because my footer is messed up and I've taken care of that problem, just havn't re-uploaded the site yet).

    I know its something easy with the left align and center positions...I just can't remember how to center sites for all browsers, it'd be great if IE wouldn't suck so bad.

    As far as the white spaces on the left of the images at the top of the page, I'm lost there.

  2. #2
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that tough eh?

  3. #3
    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 Deron,

    The centering is covered in the FAQ

    You just need to add text-align:center in the body tag for ie5/5.5 and ie6 in quirks mode.

    The problems with the gap in the image is something to do with quirks mode which is caused by those comments above the doctype. You will just have to hack ie and I'm assumimg you are staying in quirks mmode etc.

    Code:
    body {
    margin: 0;
    padding: 0;
    color: #000000;
    background: url(http://www.geocities.com/deronsizemore/images/bg2.gif);
    text-align:center;
    }
    #outer {
    width: 700px;
    background: url(http://www.geocities.com/deronsizemore/images/bg.gif) repeat-y left top;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    _height: 100%;
    min-height: 100%;
    margin: auto;
    clear: both;
    position: relative;
    text-align:left;
    }
    * html #outer{width:704px}
    * html #picheader img {margin-left:-3px}
    
    That should cure those two issues. Remember that in quirks mode ie has a broken box model and needs to be fed the same values as ie5 and 5.5.

    Hope that helps

    Paul

  4. #4
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Man!! I seriously always forget about the FAQ for the easy stuff!


    What exactly is quirks mode Paul? I'm not familiar with it...although I assume I should be?

  5. #5
    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)
    Quote Originally Posted by deron
    What exactly is quirks mode Paul? I'm not familiar with it...although I assume I should be?
    Yes you should as it can have a big impact on your page!

    Quirks mode is triggered by doctype switching and is a means whereby the browser supports legacy behaviour (e.g. bad code and deprecated mark up ).

    In quirks mode ie uses things such as the broken box model and all the other little quirks that IE applies to make their pages work. That means it doesn't work strictly to standards and will make a best guess at what you meant if your code is incorrect.

    While that explanation is a bit over simplified thats basically what happens (I'll explain better later when I wake up)

    Paul


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
  •