SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: ie quirk

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ie quirk

    online view, local preview and ms ie 7 browsershots dont show any errors, but at my friends house ms ie 7 shows this: http://www.phuset.dk/ny/bslisbeth/untitled-1.gif instead of this: http://www.phuset.dk/ny/bs221007/ind...0a25f403d0.png
    after the erronous visualization i have added a .clear above the .presentation's and i havent gotten her to send me a new screenshot afterwards

    does anybody know what is going on?

    (i know there are other ie 5x and ie6 problems but i will request help on those later)

    the actual page is http://www.phuset.dk/ny/index.html

    maybe i should also mention that i get the quirk in local preview too, but only for the top image, and only before i allow blocked content or before i refresh after having resized my browser window

    thanks
    rasmus

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

    The page is out in all versions of IE and if the window is moved up and down then the layout completely mis-aligns.

    This is due to your misuse of position:relative on many elements that don't require it. IE's layout algorithms when position:relative is used is shaky at best and when combined with tables you are heading for disaster.

    Remove all the position:relatives from your code (apart form the one I gave you in the other thread).

    e.g.

    Code:
    html, body, #center-and-middle {
        color: #333; 
        background-color: #94A653; 
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        text-align: center; 
        line-height: 15px;
        height: 100%;
        margin: 0;
        padding: 0;
        border: none;
        }
    
    #center-and-middle {
        margin: 0 auto;
        vertical-align: middle;
        }
    
    h1 {
        font-family: Times New Roman;
        font-size: 24px; 
        margin: 0;
        }
    
    .strong {
        font-weight: bold; 
        }
    
    a:link, a:visited  {
        color: #BD1220;
        text-decoration: none;
        }
    
    a:hover, a:active {
        color: #3B7128;
        text-decoration: underline;
        }
    
    p {
        margin: 0;
        }
    
    img {
        margin: 0; 
        border: 0; 
        display: block; 
        }
    
    #toplinks {
        padding: 5px;
        color: #FFF;
        letter-spacing: 1pt;
        font-size: 10px; 
        }
    
    #toplinks a:link, #toplinks a:visited {
        color: #FFF;
        text-decoration: none; 
        text-transform: uppercase; 
        font-weight: bold; 
        }
    
    #toplinks a:hover, #toplinks a:active {
        color: #BD1220;
        text-decoration: underline;
        }
    
    #page {
        background-image: url("http://www.phuset.dk/ny/images/bg.png");
        background-repeat: no-repeat;
        width: 884px;
        height: 384px;
        text-align: left;
        padding: 40px; 
        }
    
    #logo {
        float: left;
        margin-right: 20px; 
        }
    
    .presentation {
        float: left;
        width: 221px; 
        text-align: center;
        margin-top: 40px;
        }
    
    .presentation img {
        border: 2px solid #94A653; 
        margin: 0 auto;
        }
    
    #imagecolumn {
        float: left;
        }
    
    #businesscard {
        border: 2px solid #036;
        padding: 5px; 
        margin-right: 40px; 
        width: 187px; 
        background-color: #e6e9e2; 
        }
    
    #businesscard img {
        border: 1px solid #036; 
        float: right; 
        }
    
    #businesscard-variation {
        border: 2px solid #036;
        padding: 5px; 
        margin-right: 281px; 
        width: 187px; 
        background-color: #e6e9e2; 
        }
    
    #logobottom {
        text-align: center; 
        width: 201px; 
        margin-top: 120px; 
        }
    
    #menucolumn {
        float: left;
        width: 201px; 
        margin-right: 40px; 
        }
    
    #menucolumn img {
        float: left;
        margin-right: 5px;
        }
    
    #menubox {
        border-top: 1px solid #BD1220; 
        }
    #menubox a{position:relative;}
    #menubox a:link, #menubox a:visited {
        display: block; 
        color: #3B7128;
        text-transform: uppercase; 
        font-weight: bold; 
        letter-spacing: 1pt;
        font-size: 10px; 
        border-bottom: 1px solid #BD1220;
        padding: 5px;
        }
    
    #menubox a:hover, #menubox a:active {
        color: #BD1220;
        text-decoration: underline;
        }
    
    #contentcolumn {
        float: left;
        width: 382px; 
        }
    
    .clear {
        clear: both;
        height:1px;
        overflow:hidden;
      margin-top:-1px;
    }
    This fixes it for me.

    I don't like sites that are vertically centred anyway and I would ditch the table and just start the layout at the top of the screen as per usual.

    Hope that helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    everything is sorted now
    thank you very much
    rasmus


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
  •