4. Probleme bei der Darstellung

[malte]

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

[Detlef G.]

Hallo malte

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!?

Suche mal nach double-margin-bug.

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?

Hast du _alle_ Angaben für margin und padding aller ul und aller li selbst
gesetzt?
Die verschiedenen Browser erreichen ihre Standardanzeige für Listen durch
verschiedene Vorgaben für margin und padding von ul und li.

Auf Wiederlesen
Detlef

[malte]

Besten Dank Detlef,

Suche mal nach double-margin-bug.

:-) danke schön - wieder etwas hinzugelernt..

Hast du _alle_ Angaben für margin und padding aller ul und aller li selbst
gesetzt?
Die verschiedenen Browser erreichen ihre Standardanzeige für Listen durch
verschiedene Vorgaben für margin und padding von ul und li.

Du hast recht - "margin-left" fehlte. Prima nun klappt es und Problem 2 hat sich dadurch auch erledigt :-)

Nun muss ich nur noch einen Mac finden und es in Safari testen :-)

[malte]

Könnt Ihr mir noch sagen, warum bei einer DIV-Höhe von 1px im IE trotzdem eine Zeile eingefügt wird (bei "contentLayerBottom")?

html:

<div id="page">
  <div id="contentLayer">
    <div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    <div id="contentLayerBottom"></div>
  </div>
</div>

css:

div#page {
 text-align:left;
 margin:0 auto;
 width:1000px;
}
div#contentLayer {
 float:right;
 margin-right:15px;
 margin-top:115px;
 display:inline;
 width:731px;
 background-image:url(../images/content_bg.gif);
 background-repeat:no-repeat;
 background-position:center top;
}
div#content{
 padding:15px 30px 15px 30px;

text-align: justify; /* entfernen */
}
div#contentLayerBottom {
 width:731px;
 height:1px;
 position:relative;
 background-image:url(../images/content_bg_bottom.gif);
 background-repeat:no-repeat;
 background-position:center bottom;
}

[Detlef G.]

Hallo malte

Könnt Ihr mir noch sagen, warum bei einer DIV-Höhe von 1px im IE trotzdem eine Zeile eingefügt wird (bei "contentLayerBottom")?

Weil der IE immer soviel Höhe berücksichtigt, wie ein Text mindestens
benötigt, selbst dann, wenn überhaupt kein Text vorhanden ist.

Ein entsprechendes font-size, line-height oder/und overflow:hidden dürfte
helfen.

Wobei sich mir allerdings die Frage stellt, wozu du ein 1px hohes Element
benötigst.

Auf Wiederlesen
Detlef

[malte]

Danke dir für deine Hilfe Detlef,

hat geklappt :-)

Wobei sich mir allerdings die Frage stellt, wozu du ein 1px hohes Element
benötigst.

Um eine gepunktete Linie (mit 4px Freiraum) darzustellen.

Gruß Malte

[wahsaga]

hi,

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

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

rar ist keines der dateiformate, die mein browser darzustellen in der lage ist.

gruß,
wahsaga