nicht angemeldet
IE 6 zerreist CSS-formatiertes DIV
Hallo,
Ich bin offiziell mit dem Redesign des xine-projekts betraut :) (Linuxer unter Euch kennen es).
Ich wollte mir natürlich best practise geben und gleich alles xhtml usw. konform machen. Ich habe das ganze Layout gesetzt, wobei ich immer mit Mozilla und Konqueror geprüft habe. Jetzt war das Ding fertig und ich schau mir das Ding vom Geschäft aus unter Windows an (IE 6).
Es war furchtbar! Der IE hat alle DIVs, die ich auf die Höhe 1px gesetzt habe gut 15px hoch gemacht.
Ich habe das mal als Beispiel extrahiert:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>::: XINE - A Free Video Player :::</title>
<style type="text/css">
<!--
BODY {
font-family:Helvetica, Arial, sans-serif;
color:#000000;
margin:0px;
pading:0px;
border-width:0px;
}
* {
padding:0px;
margin:0px;
}
table {
empty-cells:show;
table-layout:fixed;
border-collapse:collapse;
}
div.teaser {
height:50px;
background-color:#EEEEEE;
vertical-align:middle;
}
div.hline1 {
height:1px;
background-color:#FFFFFF;
}
div.hbar {
height:22px;
background-color:#DFDFDF;
vertical-align:middle;
div.layout {
width:100%;
border-width:0px;
padding:0px;
margin:0px;
color:#000000;
}
-->
</style>
</head>
<div class="layout">
<div class="teaser">
<table height="100%">
<tr>
<td>TEASER</td>
</tr>
</table>
</div>
</div>
<div class="layout">
<div class="hline1"></div>
</div>
<div class="layout">
<div class="hbar">
<table height="100%">
<tr>
<td>HBAR</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Konkret ist die hline1 zu beachten, alles andere scheint zu stimmen.
Ich bin streng nach den CSS-Regeln auf w3c.org und Selfhtml vorgegangen und zwei Browser zeigen es so an, wie ich es mir denke.
Ist IE blöd oder ich?
Thomas
-
Grüß Gott.
Ich wollte mir natürlich best practise geben und gleich alles xhtml usw. konform machen. Ich habe das ganze Layout gesetzt, wobei ich immer mit Mozilla und Konqueror geprüft habe.
<div class="layout">
<div class="teaser">
<table height="100%">
<tr>
<td>TEASER</td>
</tr>
</table>
</div>
</div>Oh mein Gott.
<div class="layout">
<div class="hline1"></div>
</div>Oh mein Gott.
<div class="layout">
<div class="hbar">
<table height="100%">
<tr>
<td>HBAR</td>
</tr>
</table>
</div>
</div>Oh Gott, oh Gott.
Ich bin streng nach den CSS-Regeln auf w3c.org und Selfhtml vorgegangen und zwei Browser zeigen es so an, wie ich es mir denke.
Ist IE blöd oder ich?Der IE interessiert mich hier erstmal nicht, etwas mehr amüsiert bin ich über Deine Aussage "HTML-konform" und "streng nach CSS-Regeln auf w3c.org". Denn wenn ich mir den Quark da oben anschaue, habe ich den Eindruck, Du hast überhaupt nicht kapiert, worum es bei CSS überhaupt geht:
"By separating the presentation style of documents from the content
of documents, CSS2 simplifies Web authoring and site maintenance.""Style sheets complement structured documents (e.g., HTML and XML
applications), providing stylistic information for the marked-up
text."Man muß erstmal auf die Idee kommen, ein Element in eine einzellige Tabelle zu verbannen und diese Tabelle dann noch in zwei <div>s zu stecken. Was hat das mit tabellarischen Daten zu tun?
Oder noch schlimmer: Eine horziontale Linie, für die es ein wunderschönes Element namens <hr> gibt, aus zwei <div>s aufzubauen.Wenn Du den Rest dieser Seite in demselben Stil aufbaust und zum Beispiel Überschriften statt mit <h1> bis <h6> zu markieren nichtssagenderweise mit drei verschachtelten <div>s setzt oder Absätze mit leeren <div>s einfügst statt mit <p>, brauchst Du Dich um irgendwelche Konformitäten nicht wirklich zu kümmern.
Lerne doch erstmal den Grundgedanken hinter HTML und CSS. HTML zum inhaltlichen Markieren von Text, CSS um diesen Textstellen "Farbe" zu geben.
Schönen Tag noch.
Der Trennungs-Papst. -
Das problem ist das die <div>'s sich unterschiedlich auf jedem Browser verhalten! Das gleiche Problem ist auch auf dem Mac!
Div ist ein RiesenProblem deshlab würde ich vorschlagen! Das du die css in separeten Dateien speicherst und dann mit der Browserweiche arbeitest!
Also du machst eine css für den Mozilla und Konqueror und eine für den IExplorer! Und dann prüfst du oben im Head Bereich mit Javascript ab ob du Mozilla oder IExplorer bist!
So kannst du für jeden Browser individuell deine Seiten gestallten1
Gruss
Wally
-
hi
Das problem ist das die <div>'s sich unterschiedlich auf jedem Browser verhalten! Das gleiche Problem ist auch auf dem Mac!
Unsinn.
Also du machst eine css für den Mozilla und Konqueror und eine für den IExplorer! Und dann prüfst du oben im Head Bereich mit Javascript ab ob du Mozilla oder IExplorer bist!
noch unsinniger.
Grüße aus Bleckede
kai
-
-
hi
<?xml version="1.0" encoding="iso-8859-1"?>
kein UTF-8 ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
nur 1.0? ;)
BODY {
font-family:Helvetica, Arial, sans-serif;
color:#000000;
margin:0px;
pading:0px;
border-width:0px;
}background-color fehlt.
* {
padding:0px;
margin:0px;
}aaaaaaaah! mach das weg!!! du weißt nicht, was du tust!
den ganzen <div>'s fehlt color - is besser das anzugeben ('color:inherit')
<div class="layout">
<div class="teaser">
<table height="100%">
<tr>
<td>TEASER</td>
</tr>
</table>
</div>
</div>Was ist DAS?
<h1>TEASER</h1> und sonst nichts.<div class="layout">
<div class="hline1"></div>
</div><hr/> soll es auch geben.
<div class="layout">
<div class="hbar">
<table height="100%">
<tr>
<td>HBAR</td>
</tr>
</table>
</div>
</div>
</body>
</html>ach du sch*****
Ich bin streng nach den CSS-Regeln auf w3c.org und Selfhtml vorgegangen und zwei Browser zeigen es so an, wie ich es mir denke.
an die technischen Regeln hälst du dich, aber vom Konzept her ist das Müll, keinerlei Struktur drin!
Grüße aus Bleckede
Kai
-
Hi,
<?xml version="1.0" encoding="iso-8859-1"?>
kein UTF-8 ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
nur 1.0? ;)Ich will die Browser nicht zu sehr verwirren :)
BODY {
font-family:Helvetica, Arial, sans-serif;
color:#000000;
margin:0px;
pading:0px;
border-width:0px;
}background-color fehlt.
Notiert
* {
padding:0px;
margin:0px;
}aaaaaaaah! mach das weg!!! du weißt nicht, was du tust!
Nun ja, ich nehme das eigentlich ganz gerne, weil ich es hasse, wenn irgendwo irgendwelche bstände sind, die ICH nicht ausdrücklich dort will, aber ok, man kann das auch erreichen in dem man alle Elemente, die man benutzt dahingehend formatiert.
den ganzen <div>'s fehlt color - is besser das anzugeben ('color:inherit')
Notiert
<div class="layout">
<div class="teaser">
<table height="100%">
<tr>
<td>TEASER</td>
</tr>
</table>
</div>
</div>Was ist DAS?
<h1>TEASER</h1> und sonst nichts.NEIN!
Hier wurde ich wohl von einigen Missverstanden. Es geht mir hier nicht nur um die Textformatierung, sondern um Designerwägungen. Ich brauche ganz oben einen Bereich mit einer Farbe A, dann soll eine 1px hohe Linie mit Farbe B kommen und dann nochmal eine 1px hohe Linie mit Farbe C kommen. Dabei ist die Tabelle und der Text mal vollig nebensächlich. Das ganze soll so eine Art 3D-Effekt geben.Und sorry, ich denke dass ich mich ganz gut mit dem Konzept von CSS auskenne. Früher hätte man soetwas mit zig Tabellen und blinden Gifs gemacht, warum also nicht Code und Bandbreite sparen, wenn es soetwas wie CSS gibt.
Die eigentliche Frage ist sowieso, warum IE dieses verflixte DIV nicht einen Pixel hoch macht.
MfG Thomas
-
hi
Ich will die Browser nicht zu sehr verwirren :)
is kaum ein unterschied aus Browsersicht.
Nun ja, ich nehme das eigentlich ganz gerne, weil ich es hasse, wenn irgendwo irgendwelche bstände sind, die ICH nicht ausdrücklich dort will, aber ok, man kann das auch erreichen in dem man alle Elemente, die man benutzt dahingehend formatiert.
naja, dann haben aber die <p>, <h*> und selbst tabellen oder formularelemente nirgendwo mehr 'nen abstand.
NEIN!
Hier wurde ich wohl von einigen Missverstanden. Es geht mir hier nicht nur um die Textformatierung, sondern um Designerwägungen. Ich brauche ganz oben einen Bereich mit einer Farbe A, dann soll eine 1px hohe Linie mit Farbe B kommen und dann nochmal eine 1px hohe Linie mit Farbe C kommen. Dabei ist die Tabelle und der Text mal vollig nebensächlich. Das ganze soll so eine Art 3D-Effekt geben.h1{border:5px outset red;} so in der art?
Zumindest due Tabelle selbst MUSS ein <h1> sein, sonst ist das kein stück besser als reines Tabellen+Blindgif-Layout.Grüße aus Bleckede
kai
-
Hallo
<div class="layout">
<div class="teaser">
<table height="100%">
<tr>
<td>TEASER</td>
</tr>
</table>
</div>
</div>Was ist DAS?
<h1>TEASER</h1> und sonst nichts.NEIN!
Hier wurde ich wohl von einigen Missverstanden. Es geht mir hier nicht nur um die Textformatierung, sondern um Designerwägungen. Ich brauche ganz oben einen Bereich mit einer Farbe A, dann soll eine 1px hohe Linie mit Farbe B kommen und dann nochmal eine 1px hohe Linie mit Farbe C kommen. Dabei ist die Tabelle und der Text mal vollig nebensächlich. Das ganze soll so eine Art 3D-Effekt geben.Man kann auch <h1>'s, aber auch den Anderen (h2, h3, etc.),
Hintergrundfarben und Rahmen geben. Letztere kann man auf
einzelne Seiten beschränken und so den 3D Effekt bringen.MfG Thomas
-
Hallo
<div class="layout">
<div class="teaser">
<table height="100%">
<tr>
<td>TEASER</td>
</tr>
</table>
</div>
</div>Was ist DAS?
<h1>TEASER</h1> und sonst nichts.Danke, so ähnlich habe ich's hinbekommen
-
-
-