malte: 4. Probleme bei der Darstellung

Beitrag lesen

Nabend,

ich habe in verschiedensten Fällen Probleme mit der Darstellung...

Hier die RAR:
http://crustymalte.sytes.net/test.rar

Problem 1:

Der IE zeigt mir falsche Pixelwerte an:

15px margin sind eingestellt - Firefox, Opera, Netscape etc. zeigen es richtig an - IE jedoch kommt mir mit 30px :-D!?

Oder stimmt etwas in der CSS nicht - wüsste allerdings nicht so recht was...

Problem 2:

Durch die Aufzählungsliste wurde die Navigation ein Stück nach rechts verschoben - kann man den Anfang wieder ursprünglich, allerdings ohne Punkt davor an den linken Rand bekommen?

Problem 3:

Durch klicken der Naviagation, schiebt sich die Aufzählliste ja immer weiter nach rechts, dieses habe ich durch Negativ-Werte versucht zu vermeiden - soweit klappt es auch ganz gut. Der IE erkennt es leider nicht und verschiebt den großen DIV nach unten. Was kann ich ändern, damit es sich überlappt? Mit dem Z-Index habe ich es leider nicht hinbekommen :-/

problem 4:

Ein Kumpel meinte gestern, im Safari wird die Navigation falsch dargestellt - nun habe ich leider nicht die Möglichkeit es selbst zu testen. Seht Ihr es vielleicht anhand der CSS:

html {
height:100%;
}
body, a, table, td, input {
 background-color:#41413F;
 font-family:Arial;
 font-size:11px;
 color:#D2D2D2;
}
body#pageId {
 padding:0;
 margin:0 0 0 0;

text-align:center; /* zentrierung im ie */
}
img {
border:none;
}

p,h1,h2,h3,h4,h5,h6,li,dt,dd {
 color:#D2D2D2;
}

a:link {
 text-decoration:none;
}
a:visited {
 text-decoration:none;
}
a:hover {
 color:#A28D60;
 text-decoration:none;
}
a:active {
 color:#A28D60;
 text-decoration:none;
}

#menu a:link {
 text-decoration:none;
 font-weight:bold;
}
#menu a:visited {
 text-decoration:none;
 font-weight:bold;
}
#menu a:hover {
 color:#A28D60;
 text-decoration:none;
 font-weight:bold;
}
#menu a:active {
 color:#A28D60;
 text-decoration:none;
 font-weight:bold;
}

/*
-----------------------------------------------------------------------------
NAVIGATION
-----------------------------------------------------------------------------*/
/* formatierung des baums */
li {
   list-style-type:none;
}
span.childs {
   cursor:pointer;
}

/* klassen für das öffnen und schließen eines knotens */
li.treeMenu_opened ul {
   display:block;
}
li.treeMenu_closed ul {
   display:none;
}

/* elemente */
.navi1 {
 background-image:url(../images/navi_bg.gif);
 background-repeat:no-repeat;
 height:25px;
 width:186px;
 display:block;
 padding-left:24px;
 line-height:25px;
 vertical-align:middle;
}
.navi1Bottom {
 background-image:url(../images/navi_bg.gif);
 background-repeat:no-repeat;
 height: 26px;
 width:186px;
 display:block;
 padding-left:24px;
 line-height:26px;
 vertical-align:middle;
}
.navi2 {
 background-image:url(../images/navi_bg.gif);
 background-repeat:no-repeat;
 left:-40px;
 position:relative;
 height:25px;
 width:186px;
 display:block;
 padding-left:43px;
 line-height:25px;
 vertical-align:middle;
}
.navi3 {
    background-image:url(../images/navi_bg.gif);
 background-repeat:no-repeat;
    left:-80px;
 position:relative;
    height:25px;
    width:186px;
 display:block;
 padding-left:61px;
 line-height:25px;
 vertical-align:middle;
}
.navi4 {
 background-image:url(../images/navi_bg.gif);
 background-repeat:no-repeat;
 left:-120px;
 position:relative;
 height:25px;
 width:186px;
 display:block;
 padding-left:79px;
 line-height:25px;
 vertical-align:middle;
}

/*
-----------------------------------------------------------------------------
DIV KLASSEN
-----------------------------------------------------------------------------*/

div#page {
 text-align:left; /* seiteninhalt wieder links ausrichten */
    margin:0 auto;  /* horizontale zentrierung */
    width:1000px;

height:500px;
 border: 1px ridge silver;
}

div#menuLayer {
    float: left;
 margin-left:15px;
    top:0px;
 position:relative;
    width:186px;
 background-image:url(../images/logo_p_bg.gif);
 background-repeat:no-repeat;
 background-position:91px 29px;
 z-index:1;

border: 1px ridge silver;
}
div#contentMenu {
    left:0px;
    top:115px;
 position:relative;
    width:186px;

}

div#contentLayer {
    float:right;
 margin-right:15px;
 top:115px;
 position:relative;
 width:700px;
 height:298px;
 z-index:2;

border: 1px ridge silver;
}