Paul: Browser Konflikt mit IE 6 und Opera

Hey Leuz
Habe gerade ein neues Layout erstellt. Es soll ein Layer basierendes Layout sein und auf moeglichst vielen Browsern laufen.
Mein Browser ist Firefox 2.0.0.2 auf einem Mac System. Mein Problem ist, dass die seite eine kleine Macke beim IE 6 und Opera hat. Undzwar ist das DIV Layer von der Navi zu gross (1 oder 2 Pixel) und somit entsteht ein grauer Balken der durch den Adler geht.
Ein Beispiel findet hier: www.phpaul.de/new/test2.html
Danke fuer eure Hilfe.
Verbesserungen sind auch gerne gesehn.

Den HTML Code koennt ihr auf der Seite finden.

Hier findet ihr die CSS Inhalte:

body {
 font-family:Helvetica, Arial, sans-serif;
 margin:0;
 background-color: #d5d5d5;
}

#root {
 border: #000000;
 border-width:1px;
 width:920px;
 height:auto;
 background-color:#FFFFFF;
 margin-left:auto;
 margin-right:auto;
 margin-top:15px;
}

#banner {
        height: 117px;
 background-color:#0000CC;
 background-image:url(../images/banner2.gif);
 background-position:right;
 margin:0;
}

#nav {
 width:920px;
 height: 30px;
 background-color:#CCCCCC;
 background-image:url(../images/nav_back.gif);
 background-repeat:repeat-x;
 margin:0;
}

#nav p {
 margin:0;
 padding:0;
}

#nav ul {
 word-spacing:35px;
 margin:0;
 margin-left:40px;
 padding-top:0;
 list-style-type:none
}

#nav li {
 padding:0;
 margin-left:15px;
 display:inline
}

#nav a {
 text-decoration:none;
 color:#000000;
 font-weight:bold;
 font-size:16px;
}

#nav a:hover {
 text-decoration:none;
 color:#999999;
 font-weight:bold;
 font-size:16px;
}

#main {

float: left;
 width:670px;
 height:100%;
 background-color:#FFFFFF;
}

#menu {
 float:right;
 width: 250px;
 height:100%;
 background-color:#FFFFFF;
 z-index:2;
 background-image:url(../images/menu_back.gif);
}

#menuinside {
 padding-left:25px;
 padding-right: 20px;
}

  1. Hey Leuz
    Habe gerade ein neues Layout erstellt. Es soll ein Layer basierendes Layout sein und auf moeglichst vielen Browsern laufen.
    [...] Mein Problem ist, dass die seite eine kleine Macke beim IE 6 und Opera hat. Undzwar ist das DIV Layer von der Navi zu gross (1 oder 2 Pixel) und somit entsteht ein grauer Balken der durch den Adler geht.

    Hi,
    Du könntest zb das Adlerbild ganz lassen und absolut positionieren. Dann bräuchte die äußere Box '#root' nur noch ein 'position: relative' und die 'ul' von der Navi einen entsprechenden rechten Abstand, damit sie nicht unter den Adler rutscht.

    Grüße
    gaby