Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

SkillShare / CSS Beauty: Absolute positioning causing problems in IE

Bottom of Page

1 to 4 of 4

  1.  
    • CommentAuthorJB
    • CommentTimeJul 27th 2008 edited
     permalink

    I’m working on a website http://www.scanu.co.uk/test/ with a div stripe with a height of 100% (float_box3). In IE, the logo (.mid_container .logo) is being affected by this div stripe so that when I remove float_box3, the logo is positioned correctly but when the float_box3 div is in place the logo jumps up the page. Any idea what could be causing this? Everything is correct in FF and Safari.

    It is to do with the absolute positioning of float_box3, because as soon as I remove it everything displays perfectly. I have attached a couple of screenshots on how it displays right and wrong. The problem is occuring in IE7 but I haven’t tested in IE6.

    http://www.scanu.co.uk/test/layout_right.gif

    http://www.scanu.co.uk/test/layout_wrong.gif

    Any help appreciated

    Thanks
    /Jeremy

    • CommentAuthorMuffin
    • CommentTimeJul 29th 2008
     permalink
    I do not have any experise in other browsers than internet explorer,
    but if you would just post the css and html I think people will sooner be able to help you
    • CommentAuthorJB
    • CommentTimeAug 4th 2008 edited
     permalink

    Muffin, thanks for the heads-up.

    HTML code:
    <html>

    <head> <title>Lyndale Homes (NI) Ltd</title> <meta name=“description” content=“lyndale homes NI”> <meta name=“keywords” content=“lyndale homes NI”> <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”> <link rel=“stylesheet” href=“style.css” type=“text/css”> <!—[if lt IE 7.]> <script defer type=“text/javascript” src=“pngfix.js”></script> <![endif]—>
    </head>

    <body>

    <div class=“left_nav”> <ul> <li><p><a href=“index.html”>home</a></p></li> <li><p><a href=“index.html”>builds</a></p></li> <li><p><a href=“index.html”>contact</a></p></li> </ul>
    </div>

    <div class=“float_box1”></div>
    <div class=“float_box2”></div>
    <div class=“float_box3”></div>

    <div class=“body_container”>
    <div class=“outer_container”>

    <div class=“upper_container”> <!—div class=“upper_nav”> <ul class=“navlist”> <li><a href=“http://www..co.uk”>home</a></li> <li><a href=“http://www..co.uk”>work</a></li> <li><a href=“http://www..co.uk”>about</a></li> <li><a href=“http://www..co.uk”>contact</a></li>

    </ul> </div—> </div>

    <div class=“mid_container”> <img src=“logo.png” alt=“logo” class=“logo”> </div>

    <div class=“lower_container”> <div class=“lower_left”> </div> <div class=“lower_right”> 3 Goland Buildings Glencairn Park<br>Newtownabbey BT36 5EN<br> t: 028 9034 2129<br> f: 028 9034 2129<br> e: <a href=“mailto:info@lyndalehomesni.co.uk”>info@lyndalehomesni.co.uk</a><br><br>

    Copyright &#169; 2008 Lyndale Homes (NI) Ltd </div> </div>
    </div>
    </div>
    </body>
    </html>

    CSS code:
    body { background:#FFFFFF url(‘body-bg.gif’) repeat-x; margin: 0 auto; padding: 0; }

    a:link {color: #3e515d;}
    a:visited {color: #3e515d;}
    a:active {color: #3e515d;}
    a:hover {color: #3e515d; text-decoration: underline;}

    .left_nav ul { z-index: 2;

    position:absolute; top:431px; width: 400px; height: 200px; text-decoration:none; display:block; float: left; list-style:none;
    }

    .left_nav ul li { width: 227px; height: 54px; text-align: left; font-family: Arial, sans-serif; font-size: 1.2em; font-weight: bold; background: #C32B40; background-repeat: no-repeat; color: #ffffff; line-height: 2.5em;
    }

    .left_nav ul li p { padding:1px 4px 0 7px; margin:0;
    }

    .left_nav ul li a{ display: block; color: #3e515d; text-decoration: none; width: 100%;
    }

    html>body .left_nav li a{ width: auto;
    }

    .left_nav ul li:hover{ color: #B6C9D3; /*background: #C32B40; background-repeat: no-repeat; list-style-image: url(safety_hat.png); list-style-position: inside;*/ background:transparent url(safety_hat.png) no-repeat top left; padding-left: 40px;
    }

    .body_container { margin: 80px auto 0 auto; width: 700px; }
    .outer_container { margin: 0 auto; padding: 0; width: 673px; }
    .upper_container { float: left; margin: 0; padding: 0 0 10px 0; width: 673px; height: 100px; }
    .float_box1 { width: 100%; height: 350px; position:absolute; top:0px; background: #C32B40; /*border-top: 350px solid #C32B40;*/ z-index: 1; }

    .float_box2 { width: 100%; height: 31px; position:relative; top:347px; background: #B6C9D3; /*border-top: 31px solid #B6C9D3;*/ z-index: 1; }

    .outer_container .mid_container .logo { position: relative; top: 0px; left: 0px; z-index: 2;
    }

    .float_box3 { height: 100%; width: 200px; position:absolute; top:0px; left:40px; background: url(menu_back.png); z-index: 1;
    }

    .upper_container .upper_nav { float: left; margin: 0; padding: 0; width: 358px; text-align: left; }

    .mid_container { float: left; margin: 10px 0 0 0; padding: 10px 0 10px 0; width: 673px; height: 180px; }

    .lower_container { float: left; margin: 10px 0 0 0; padding: 10px 0 0 0; width: 673px; text-align: right; font-family: Verdana, Arial, sans-serif; font-size: 0.9em; font-weight: bold; color: #c0c0c0; }
    .lower_container .lower_left { float: left; padding: 0 0 10px 0; }
    .lower_container .lower_right { width: 439px; text-align: left; float: right; padding: 0 0 10px 0; }

    • CommentAuthorrzea
    • CommentTimeAug 18th 2008 edited
     permalink
    Put a DOC type on top of your page.

    Seems like you're using HTML 4.01. Use this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    W3C: http://www.w3.org/TR/REC-html40/sgml/dtd.html

1 to 4 of 4

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page