nicht angemeldet
list-style in FF und IE unterschiedlich
Hallo Forum,
in der beigefügten Beispieldatei tritt folgendes Phänomen auf: im FF (Version 2.0.0.7) werden die Aufzählungssymbole (discs) zwar angezeigt, aber außerhalb des gewünschten Bereiches (siehe die zum Test angezeigten Rahmen), im IE 6.0 werden sie gar nicht angezeigt. Die Seite habe ich bereits validieren lassen. Ferner habe ich zum Test die style-Angabe auch direkt in das <ul>-Tag eingefügt mit demselben Ergebnis. Kann mir bitte jemand hierzu weiter helfen, meine Suche im Forum war nicht erfolgreich.
Schönen Gruß
vom Bronimus
Die Datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Testseite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="de">
<style type="text/css"><!--
* {
margin:0em;
padding:0em;
font-size:100.01%;
}
body {
position:absolute;
top:0px;
left:0px;
width:1024px;
height:100%;
z-index:1;
background-color:#d3dbe6;
background-repeat:no-repeat;
font-family:verdana, arial, helvetica, sans-serif;
text-align:left;
}
img {
border:0px;
}
#navigator {
position:absolute;
top:228px;
left:30px;
width:200px;
height:100%;
z-index:10;
border:1px solid #000000;
color:#9c0000;
font-style:italic;
font-weight:normal;
font-size:21px;
font-family:times, serif;
text-align:right;
line-height:47px;
}
#navigator a {
color:#9c0000;
font-weight:normal;
text-decoration:none;
}
#navigator a:link {
color:#9c0000;
font-weight:normal;
text-decoration:none;
}
#navigator a:hover {
color:#9c0000;
font-weight:bold;
text-decoration:none;
}
#kopfzeile {
position:absolute;
top:135px;
left:260px;
width:538px;
height:80px;
z-index:11;
border:1px solid #000000;
color:#9c0000;
font-size:40pt;
vertical-align:bottom;
}
#inhalt {
position:absolute;
top:240px;
left:260px;
width:538px;
z-index:5;
border:1px solid #000000;
color:#9c0000;
font-size:10pt;
vertical-align:top;
}
#inhalt ul {
list-style:disc outside;
}
#info {
position:absolute;
top:30px;
left:824px;
width:200px;
height:100%;
z-index:4;
border:1px solid #000000;
color:#9c0000;
font-size:11px;
vertical-align:top;
}
--></style>
<body>
<div id="kopfzeile">kopfzeile</div>
<div id="navigator">
navigator 1 <br>
navigator 2 <br>
</div>
<div id="info">
Info-Bereich
</div>
<div id="inhalt">
<p style="font-size: 14pt;">
Überschrift:<br>
</p>
<ul>
<li>Liste 1</li>
<li>Liste 2</li>
<li>Liste 3</li>
</ul>
</div>
</body>
</html>
-
Hi Bronimus,
lies dir am besten noch mal das Kapitel zum definieren von Listen durch,
du hast die eine oder andere wichtige Formatierung nicht vorgenommen,
z.b. margin und padding für die li´s.Und noch ein Link Tipp: Link. ;)
Grüße,
Engin
GYRO-
Hi Engin,
danke für Deine Antwort. Das Kapitel über li's habe ich schon gelesen, ich habe auch schon mit margins und paddings herum gespielt, aber bisher noch keinen Erfolg erzielt (in den styles ist z.B. als Erstes enthalten * {margin:0; padding:0;})
Und danke für den Link Tipp, den habe ich auch schon gefunden und werde es nochmals (!) versuchen, das Beispiel meinen Anforderungen entsprechend anzupassen, zumal es viel einfacher ausschaut, aber wie gesagt, schon mal probiert....Viele Grüße
Bronimus-
Guten Morgen Bronimus,
ich habe auch schon mit margins und paddings herum gespielt, aber bisher noch keinen Erfolg erzielt (in den styles ist z.B. als Erstes enthalten * {margin:0; padding:0;})
Wenn du flächendeckend margins und paddings auf 0 setzt musst
du sie auch an stellen, wo sie gebraucht werden, angeben.http://nimmet.de/beispiele/paddingversion
Have Fun :)
Grüße,
Engin
GYRO-
Hallo Engin,
Wenn du flächendeckend margins und paddings auf 0 setzt musst
du sie auch an stellen, wo sie gebraucht werden, angeben.das war die Lösung, habe vielen Dank für Deine Hilfe. Jetzt wenn ich sie auch noch verstehen werde (?-)), dann habe ich wieder was gelernt.
Nochmals Dank und Gruß
vom Bronimus-
Hi Bronimus,
Jetzt wenn ich sie auch noch verstehen werde (?-)), dann habe ich wieder was gelernt.
Darauf hatte ich dich ja im ersten Post hingewiesen, das du ein
Paar wichtige formatierungen wienicht vorgenommen hast.
Dann guckst du einfach, was ich gemacht habe,
#inhalt ul li{ margin:0 0 0 20px; padding:0; }In deinem bsp. war dieses Feld leer, da du im * an oberster stelle
alle margin und padding auf 0 gesetzt hast, haben sich
die list-styles unter den Rand geschoben, ich habe sie
mittelsmargin:0 0 0 20px;}ein bisschen
in den div reingedrückt. :)Grüße,
Engin
GYRO-
Hallo Engin,
danke, danke, hab' ich gemacht und hat ja auch geklappt. Was ich z.B. nicht verstanden hatte war, dass die Aufzählungssymbole nach links gerutscht werden. Ich interpretiere in diesem Fall die margin-Angabe so, dass mit der margin-Angabe der Rand des eigentlichen Textes gemeint ist ;-).
Übrigens: auf Deinen wohlgemeinten Rat habe ich mich nochmals mit dem Beispiel aus SelfHTML (danke auch für diesen Link, ich kannte das Beispiel schon) beschäftigt und versucht, es meinen Anforderungen anzupassen (man kommt eben ohne absolute Positionierung aus), auch hier macht der IE wieder was er will. Ich habe mich mit box-Modell u.ä. beschäftigt, verstanden habe ich das Verhalten des IE nicht. Obwohl ich margin und padding - wie ich meine - überall gesetzt habe, erscheint doch immer wieder im IE ein zusätzlicher Rand, den ich nicht kapiere. ich hänge die Datei unten an, vielleicht kannst Du mir auch hier auf die Sprünge helfen, irgend etwas habe ich total noch nicht verstanden.Gruß
Bronimus<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
<style type="text/css">
body {
margin:0px;
border:1px solid #000000;
padding:0px;
min-width:41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
background-color:#d3dbe6;
color:#9c0000;
font-family:verdana, arial, helvetica, sans-serif;
font-size:100.01%;
}div#Info {
width:200px;
margin:0px;
border:1px dashed silver;
padding:0px;
background-color:#eeeeee;
font-size:10pt;
float:right;
}
div#Info h2 {
margin:10px 10px 0px 10px;
font-size:12pt;
}
div#Info p {
margin:0px;
padding:10px;
font-size:10pt;
}ul#Navigation {
width:200px;
height:500px;
margin:228px 15px 0px 30px;
border:1px solid #000000;
padding:0;
color:#9c0000;
font-style:italic;
font-weight:normal;
font-size:21px;
font-family:"Times New Roman", Times, serif;
text-align:right;
line-height:47px;
float:left;
}
ul#Navigation li {
list-style:none;
}
ul#Navigation a {
color:#9c0000;
font-weight:normal;
text-decoration:none;
}
ul#Navigation a:link {
color:9c0000;
text-decoration:none;
}
ul#Navigation a:visited {
color:#9c0000;
text-decoration:none;
}
ul#Navigation a:hover {
color:black;
}h1 {
margin:135px 215px 20px 245px;
padding:0px;
border:1px solid #000000;
font-size:30pt;
text-align:center;
}div#Inhalt {
margin:0px 215px 0px 245px;
border:1px dashed silver;
padding:0px;
}
div#Inhalt h2 {
margin:0px;
padding:0px;
font-size:14pt;
}
div#Inhalt p {
margin:0px;
padding:0px;
font-size:12px;
}
div#inhalt ul {
list-style:disc outside;
}
div#inhalt ul li {
margin-left:20px;
}p#Fusszeile {
background-color:#9c0000;
margin:0px;
border:1px solid silver;
padding:0px;
color:#d3dbe6;
font-size:10pt;
text-align:center;
clear:both;
}
</style>
</head>
<body><div id="Info">
<h2>Info-Box</h2>
<p>Hatten Sie sich im letzten Beispiel gewundert,
warum die Überschrift dieser Box nicht als solche ausgezeichnet war?
Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht
und erst in diesem die Hauptüberschrift notiert war,
wäre hier eine Überschrift zweiten Grades noch nicht sinnvoll gewesen.</p>
<p>Im Quelltext dieses Beispiels ist nun zuerst die Seitenüberschrift notiert,
wodurch auch dieses semantische Problem gelöst ist.</p>
</div><ul id="Navigation">
<li><a href="#">Navigator 1 </a></li>
<li><a href="#">Navigator 2 </a></li>
<li><a href="#">Navigator 3 </a></li>
Platzhalter 1 </li>
Platzhalter 2 </li>
<li><a href="#">Navigator 4 </a></li>
<li><a href="#">Navigator 5 </a></li>
<li><a href="#">Navigator 6 </a></li>
</ul><h1>CSS-basierte Layouts</h1>
<div id="Inhalt">
<h2>3-spaltiges Layout mit Kopf- und Fußzeile</h2>
<p>Dieses Beispiel ist um eine Kopf- und Fußzeile erweitert.</p>
<p>Die Kopfzeile ist als Seitenüberschrift mit <h1> ausgezeichnet
und kann genauso gut wie ein <div> über CSS formatiert
- hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden.
Auch eine Grafik könnte in <h1> als Hintergrundbild definiert
oder über <img> eingebunden werden.</p>
<p>Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.</p>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
</div><p id="Fusszeile">Diese Fußzeile stellt über die CSS-Eigenschaft 'clear'
den Elementenfluss wieder her.</p><p><a style="color:black" href="../mehrspaltige.htm#kopf_fuss">zurück</a></p>
</body>
</html>-
Hi Bronimus,
Ich interpretiere in diesem Fall die margin-Angabe so, dass mit der margin-Angabe der Rand des eigentlichen Textes gemeint ist ;-).
So habe ich es auch verstanden. :) Bin ja auch noch Anfänger und weiss nicht,
warum das eine so und das ander so ist. Ich probiere rum, bis es passt oder ergoogle mir das meiste. :)Ich habe mich mit box-Modell u.ä. beschäftigt, verstanden habe ich das Verhalten des IE nicht. Obwohl ich margin und padding - wie ich meine - überall gesetzt habe, erscheint doch immer wieder im IE ein zusätzlicher Rand,
Hast du dir auch den "Box-Modell-Fehler des Internet Explorer" durchgelesen? Da steht zwar bis IE 5.5, allerdings hat die 6er Reihe
auch noch so ihre Probleme mit den margins und paddings, da hilft dir
nur ein hack,
ich habs mal mit dem Star-HTML-Hack gemacht, Link (im Quelltext habe ich den Hack kommentiert), besser wäre es mit einem eigenen
CSS für die IE 6 und kleiner, den sogenannten Conditional Comments.Anfangs wirkt das ein bisschen schwierig, wenn du es aber einmal
inne hast gehts wie von selbst. :)In abgekürzter fassung:
ul#Navigation { margin:228px 15px 0px 30px; } *html ul#Navigation { /* Hack für den IE, da IE ein bisschen anders als standard Konforme Browser rechnet */ margin:228px 15px 0px 15px; }Mit meinen 7 Monate Erfahrungen in HTML und CSS kann ich dir leider auch nicht mehr sagen. :)
Grüße,
Engin
GYRO-
Hallo Engin,
vielen, vielen Dank für Deine Unterstützung. Na, nach 7 Monaten schon so viel "drauf haben", ich plage mich schon ein bisschen länger mit HTML herum und hab' doch noch nicht die Hälfte von dem kapiert, was Du mir gezeigt hast ;-). Jedenfalls: BRAVO und DANKE. Ich werde die Links, die Du mir gesendet hast, nochmals (!) durch arbeiten. Vielleicht kapiere ich es doch noch, aber ich habe allmählich den Eindruck, den IE muss man nicht verstehen, sondern ihn ganz ergeben so nehmen wie er ist :-D.
Schönen Gruß
vom Bronimus
-
-
-
-
-
-
-
