✔ Darstellungsproblem IE

[PasiXXL]

Hallo,

im Moment bin ich dabei eine Homepage zu erstellen, die nur noch aus <div>-Tags bestehen soll. Jedoch macht mir die unterschiedliche Darstellung von IE und Firefox Probleme. Der scrollbare DIV-Tag wird nur im Firefox dargestellt.

Ich denke, dass es etwas mit dem z-index zu tun hat, konnte aber keine Lösung finden. Es wäre nett, wenn jemand sich mal die Seite anschaut und mir sagen könnte, wo das Problem liegt.

Ich füge zusätzlich die CSS-Datei ein:

#wrapper{
    position: absolute;
    left: 50%;
    width: 1014px;
    margin-left: -507px; /* negative Hälfte von width */
    top: 50%;
    height: 621px;
    margin-top: -310.5px; /* negative Hälfte von height */
    z-index:1;
    
}


body{
    color:#000000;
    font-family: Arial, Verdana, "Times New Roman";
    margin:0;
    padding:0;
    background:#CCC;
    overflow-y:hidden;
    z-index:0;
     
}

#banner{
    background: #CCC url(banner.jpg) no-repeat;
    width:676px;
    height:244px;
    float:left;
    border-left:2px solid #000;
    margin-left:42px;
    z-index:0;
}


#logo{
    background: #CCC url(logo.jpg) no-repeat;
    width:244px;
    height:244px;
    float:left;
    border-left:2px solid #000;
    z-index:0;
}
    
#menu{
    color:#fff;
    width:1014px;
    background:#CCC url(menu.gif) no-repeat;
    height:45px;
    float:left;
    z-index:0;
}

#menu a{
    font-weight:bold;
    color:#fff;
    text-decoration:none;
    padding-left: 15px;
    
}

#menu a:hover{
    text-decoration:underline;
    
}
    


/* Das sieht nur der Internet Explorer! \*/
* html .menu_link {
margin-top: 13px;
}
/* Das sah nur der Internet Explorer! */



.menu_link {
margin-left: 53px;
margin-top: 13px;
}


#menu_info{
    color:#fff;
    width:1014px;
    background:#79292A;
    height:30px;
    float:left;
    z-index:0;
}

#contentbox{
    color:#000;
    background:#DEDEDE;
    width:460px;
    border-top:2px solid #000;
    border-left:2px solid #000;
    border-bottom:2px solid #000;
    height:242px;
    float:left;
    margin-left:42px;
    z-index:0;
}

#content{
    position:absolute; 
    width:450px; 
    height:230px; 
    left: 50px; 
    top: 325px; 
    overflow-y: auto; 
    overflow-x: hidden;
    z-index:200;
}

#bild{
    background: #CCC url(banner.jpg) no-repeat;
    width:460px;
    height:242px;
    border:2px solid #000;
    float:left;
    z-index:0;
}

#footer{
    color:#fff;
    width:1014px;
    background:#CCC url(footer.gif) repeat-x;
    height:60px;
    float:left;
    z-index:0;
}

Vielen Dank für die Hilfe

PasiXXL

 

[Maik]

Hi,

kann es sein, dass das DIV #content in das DIV #contentbox eingeschlossen gehört?

<div id="contentbox">
         <div id="content">...</div>
</div>

#content{
        /*position:absolute;*/ /* auskommentiert = deaktiviert */
        width:450px;
        height:230px;
        /*left: 50px;*/ /* auskommentiert = deaktiviert */
        /*top: 325px;*/ /* auskommentiert = deaktiviert */
        overflow-y: auto;
        overflow-x: hidden;
        z-index:200;
}

Auf diese Weise wird das DIV bei mir im IE angezeigt.

 

[PasiXXL]

Na klar. Der DIV-Tag muss von der "contentbox" eingeschlossen werden!
Der IE ist wohl in dieser Hinsicht ein bisschen penibler.

Danke für deine Hilfe

PasiXXL