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;
}