SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Berlin
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IEs-WIN shows a wrong position for DIVs with correct CSS-orders

    Hi there, the following page

    http://www.birdsart.de/isb/isb-index.html

    looks normal & correct in NN6, Oprea 6, Safari, IE 5.1 & Mozilla 1,5 (all MAC). I checked the site with IE-WIN 5,5, the hidden layers are on wrong positions. Is this a known problem, and how should I changed the CSS to ensure a correct layout in the WIN-IE?

    thanx in advance for your time!

    the css-code:

    body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background: url(bilder/halbkreis.gif) fixed no-repeat right bottom;
    }

    html>body>ul li a{
    width: 200px;
    height: 30px;
    }

    h1{
    font-size: 18px;
    font-weight: bold;
    color: #990033;
    }

    h2{
    font-size: 12px;
    font-weight: bold;
    color: #990033;
    }

    p {
    font-size: 12px;
    padding-left: 20px;
    }

    /*-------------------------------- layers ------------------------------*/

    #kopf {
    position: absolute;
    left: 0px;
    margin-left: -1px;
    padding-left: 50px;
    height: 60px;
    background: #ccc;
    border-bottom: 1px solid #990033;
    width: 100%;/*IE 5 mac zeigt sonst kurze flaeche*/
    z-index: 2;
    }

    #kopf-sitemap {
    position: relative;
    margin-left: 75%;
    padding-top: 15px;
    padding-top: 15px;
    height: 60px;
    z-index: 3;
    top: 10px;
    left: 0px;
    }

    #content {
    position: absolute;
    top: 120px;
    left: 200px;
    padding: 0px 40px;
    width: 60%;
    line-height: 150%;
    color: #333333;
    z-index: 1;
    }

    /*--------------------------------navigation layers ------------------------------*/

    #menu {
    position: absolute;
    left: -1px;
    top: 120px;
    margin-left: -1px;
    text-align: right;
    width: 200px;
    height: 400px;
    background: #FFFFFF;
    z-index: 19;
    }

    #firstlink{
    position: absolute;
    top: 120px;
    left: 196px;
    text-align: right;
    z-index: 4;
    visibility: hidden;
    }

    #seclink{
    position: absolute;
    top: 156px;
    left: 196px;
    text-align: right;
    z-index: 5;
    visibility: hidden;
    }

    #seconelink{
    position: absolute;
    top: 156px;
    left: 395px;
    text-align: right;
    z-index: 6;
    visibility: hidden;
    }

    #secseclink{
    position: absolute;
    top: 192px;
    left: 395px;
    text-align: right;
    z-index: 7;
    visibility: hidden;
    }

    #thirdlink{
    position: absolute;
    top: 228px;
    left: 196px;
    text-align: right;
    z-index: 8;
    visibility: hidden;
    }

    #footer {
    position: fixed;
    bottom: 0;
    left: 0px;
    margin-bottom: -1px;
    margin-left: -1px;
    height: 40px;
    background: #ccc;
    border-top: 1px solid #990033;
    width: 100%;/*IE 5 mac zeigt sonst kurze flaeche*/
    padding: 10px 0px 0px 80px;
    z-index: 20;
    }

    /*--------------------------------crumbtrail------------------------------*/

    #crumbtrail{
    position: absolute;
    left: 0px;
    top: 70px;
    padding: 15px 0px 15px 60px;
    width: 100%;
    color: #333333;
    z-index: 22;
    }

    p.crumbtrail {
    margin: 5px 0px 5px 70px;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: bold;
    }


    /*--------------------------------listen------------------------------*/

    ul {
    list-style: none;
    left: -1px;
    padding-left: 1px;
    margin-left: 0px;
    text-indent: -1px;
    width: 200px;
    border-bottom: 1px solid #990033;
    }

    ul li a {
    display: block;
    text-decoration: none;
    color: #990033;
    background: #fff;
    padding-top: 5px;
    padding-right: 8px;
    border-bottom: 0 solid #990033;
    border-top: 1px solid #990033;
    border-right: 1px solid #990033;
    border-left: 1px solid #990033;
    height: 30px;
    width: 200px;
    line-height: 18px;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: bold;
    }

    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; }
    * html ul li a { height: 1%; }
    /* End */

    li a:hover{
    display: block;
    color: #FFFFFF;
    background-color: #990033;
    }

    #firstlinkul{
    background: #FFFFFF;
    }


    a:link{
    color: #990033;
    letter-spacing: 1px;
    font-weight: bold;
    }

    a:hover{
    color: #990033;
    letter-spacing: 1px;
    font-weight: bold;
    text-decoration: none;
    }

    a:visited{
    color: #990033;
    letter-spacing: 1px;
    font-weight: bold;
    }

  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,

    You haven't taken into account ie's broken box model. and because you are using the xml prologue this throws ie6 into quirks mode and it also uses the broken box model.

    Changing the height as below should allow the elements to be positioned correctly.

    Code:
    ul li a {
     display: block;
     text-decoration: none;
     color: #990033;
     background: #fff;
     padding-top: 5px;
     padding-right: 8px;
     border-bottom: 0 solid #990033;
     border-top: 1px solid #990033;
     border-right: 1px solid #990033;
     border-left: 1px solid #990033;
     height: 30px;
     vertical-align: 0;
     line-height: 18px;
     font-size: 12px;
     letter-spacing: 1px;
     font-weight: bold;
     }
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; }
    * html ul li a { height: 36px; }
    /* End */
    See the FAQ sticky thread for more info on the box model and how to overcome it depending on quirks or standards mode.

    You will need to check through your code and adjust any other elements that are critically placed. There is also a scrollbar showing in firefox which you might want to fix also (sorry I didn't have to time to do it all ).

    Hope that helps.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Berlin
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up thanx a lot, now it works

    Paul,

    thanx a lot, now I can sleep better!!


    neophron


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
  •