nicht angemeldet
"Fehlerhafte" Darstellung von Div's im IE
suitHallo zusammen,
ich habe nun die halbe Nacht an folgendem Problem gesessen und es nicht lösen können. Vielleicht kann mich ja mal einer von dem Schlauch heben auf dem ich stehe. Danke schon mal im vorraus!
Ich habe folgende CSS Datei:
/* CSS Document */
body { font-size: 12px; font-family: Helvetica,Arial,sans-serif;}
#Fix1 {position: absolute; left:0; top:0; bottom: 85%; width: 10%; height: 15%; background-color: #af9e93; }
#Logo {position: absolute; left:10%; top:0; bottom: 85%; width: 80%; height:15%; background-color: #af9e93;}
#Fix2 {position: absolute; left:90%; top:0; bottom: 85%; width: 10%; height:15%; background-color: #af9e93;}
#Fix3 {position: absolute; left:0; top: 15%; bottom: 70%; width: 10%; height:15%; background-color: #af9e93;}
#Var1 {position: absolute; left:0; top: 30%; bottom: 5%; width: 10%; height:65%; background-color: #FF8c00;}
#Fix4 {position: absolute; left:10%; top: 15%; bottom: 80%; width: 15%; height:5%; background-color: #af9e93;}
#Menue {position: absolute; left:10%; top: 20%; bottom: 10%; width: 15%; height:70%; background-color: #FFF5EE;}
#Var2 {position: absolute; left:10%; top: 90%; bottom: 5%; width: 15%; height:5%; background-color: #FF8c00;}
#MainC3 {position: absolute; left:25%; top: 15%; bottom: 5%; width: 15%; height:80%; background-color: #FFF5EE;}
#Breadcrumbs {position: absolute; left:40%; top: 15%; bottom: 80%; width: 50%; height:5%; background-color: #af9e93;}
#Content {position: absolute; left:40%; top: 20%; bottom: 10%; width: 50%; height:70%; background-color: #FFF5EE; overflow: auto;}
#Var3 {position: absolute; left:40%; top: 90%; bottom: 5%; width: 50%; height:5%; background-color: #FF8c00;}
#Fix6 {position: absolute; left:90%; top: 15%; bottom: 70%; width: 10%; height:15%; background-color: #af9e93;}
#Var4 {position: absolute; left:90%; top: 30%; bottom: 5%; width: 10%; height:65%; background-color: #FF8c00;}
#Copyright{position: absolute; left:0; top: 95%; bottom: 0%; width: 100%; height:5%; background-color: #FF8c00;}
und die entsprechende Webseite die auf diese CSS referenziert:
<html>
<head>
<link href="./css/template.css" rel="stylesheet" type="text/css"/>
</head>
<body style="overflow:auto;">
<div id="Fix1">f1</div>
<div id="Logo">Logo</div>
<div id="Fix2">f2</div>
<div id="Fix3">f3</div>
<div id="Var1">v1</div>
<div id="Fix4">f4</div>
<div id="Menue">menue</div>
<div id="Var2">v2</div>
<div id="MainC3">Pics</div>
<div id="Breadcrumbs">Bread</div>
<div id="Content">Content</div>
<div id="Var3">v3</div>
<div id="Fix6">f6</div>
<div id="Var4">v4</div>
<div id="Copyright">Copy</div>
</body>
</html>
Im Firefox werden die Div's nahtlos aneinander gefügt, so wie es auch sein soll, im Opera sind je nach Skalierung winzige "Nähte" zu sehen, aber auch damit könnte ich leben, aber der IE macht wunderwerke der Lücken zwischen den einzelnen Div's, vorallem in der Breite. Kann mir da jemand einen Rat geben? (Ich weiss, IE weglassen ist ne gute Idee, aber leider noch nicht praktikabel).
Danke und viele Grüße ins WWW
x-mac
-
Hi,
Kann mir da jemand einen Rat geben?
Rat #1: Validiere deinen HTML-Code. (Dazu wirst du ihn erst mal vervollstaendigen muessen, DocType-Angabe, etc.)
Mit fehlerhaftem Code ist die Suche nach den Ursachen von Darstellungsfehlern naemlich sinnfrei. Und dem Quirks Mode gehst du mit deinem derzeitigen Code auf jeden Fall auch in die Falle.Rat #2: Baue kein komplettes Layout auf absoluter Positionierung auf - das ist unflexibel, und in den Haenden von Anfaengern auch reichlich fehleranfaellig. Mache dich mit alternativen Formatierungsmoeglichkeiten wie floats etc. bekannt.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“ -
Kann mir da jemand einen Rat geben?
wie schon erwähnt, ist dein seitenaufbau suboptimal
deine probleme (die spalten und lücken) entstehen vorrangig durch nicht bekannte faktoren
der anzeigebereich des browsers ist in pixel eingeteilt - hausnummer du hast 1000 pixel horizontalen anzeigebereich und 3 bereiche absolut jeweils um 33.33% versetzt nebeneinander positioniert
dann sind diese drei bereiche jeweils 333.3 pixel breit - das wird von der anzeige etwas schwierig, da es keine halben pixel gibt
bei einem schlauen browser werden alle elemente auf 333 abgerundet, bei einem anderen auf 334 aufgerundet, bei wieder einem anderen zwei auf 333 abgerundet und eins aufgerundet - bei noch einem anderen werden zwei andere abgerundet usw
da du jedes element absolut positioniert hast, ist dieser effekt sehr häufig zu sehen
noch dazu ist dir die größe des anzeigebereichs nicht bekannt - wenn also jemand einen 1001 pixel breiten viewport hat, müsste jedes der elemente im beispiel 333.63 pixel breit sein, wenn jemand einen 999 pixel breiten viewport hat, dann 332.97 usw - da der alleine der scrollbalken in jedem browser unterschiedlich breit ist, oder die rahmenstärke des fensters, die anzahl und größe der toolbars bekommst du hier auch unterschiede zusammen
wenn du ein festgezimmertes layout haben willst, dass in jedem browser exakt gleich aussieht, musst du eine grafik nehmen - und nichtmal dann ist eine exakt idente darstellung gewährleistet (farbprofile zb)
ein flexibles layout mit absoluter positionierung ist wie erwähnt keine anfängersache - wenn du das ganze nahtlos haben möchtest, kannst du nun
die vorschläge von chrisb befolgen und ein floatbasierendes layout aufziehen, ober deine %-angaben gegen absolute pixelangaben tauschen (dann wächst die seite aber nicht auf größeren viewports und das ist ein entscheidender nachteil)um validen code solltest du dich aber in beiden fällen kümmern, da wie schon erwähnt eine echte fehlersuche (die in deinem fall imho nicht relevant ist) so nicht produktiv ist
-
Hallo,
danke ersteinmal für Eure Antworten.
die Div's zu floaten habe ich zuerst versucht und bin dann, nach irrwitzigen Zeilenumbrüchen durch den IE hier im Forum auf die Idee mit den "absoluten Positionen" mit wiederum relativen Werten gestossen. Die offenen Lücken lassen sich mit erhöhten Weitenangaben auch "ausmalen", so dass das Problem geringer geworden ist.
Das der Code nicht valide ist, ist mir schon klar, allerdings wollte ich Euch die gesamte Codemasse nicht antun, da es hier um eine kleine spezifische Frage ging. Der Code dient als Vorlage für ein Joomla-Template und hat deswegen weder Header noch sonstige weitere Informationen.
Wenn also die Idee mit dem floaten von Euch noch ausgeführt werden kann, tut Euch keinen Zwang an.
Grüße
x-mac-
Wenn also die Idee mit dem floaten von Euch noch ausgeführt werden kann, tut Euch keinen Zwang an.
ich dachte du willst die seite umsetzen, wieso sollen wir uns dann irgendwelchen zwängen hingeben :p
bitte folgendes lesen:
http://www.css4you.de/wslayout1/index.htmlwenn du damit dein layout nicht umsetzen kannst, darfst du gerne wieder fragen - aber vorbeissen wird dir hier sicher niemand etwas ;)
-
-