✔ Breiten Angaben in verschiedenen Brwosern?

Status
Nicht offen für weitere Antworten.
son gohan

son gohan

Erfahrenes Mitglied
Hallo,

ich habe ein schönes Muster entworfen mit CSS aber die ganze Sache sieht leider nur im opera Browser, netscape und mozilla was aus, im IE Browser tritt ein Problem auf, dort fällt das Desing zusammen, es liegt wohl an der Breitenangabe und ich meine hier im Forum auch schon mal was ähnliches gelesen zu haben.

Wer kann mir da weiterhelfen?
HTML: 
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>info</title>
</head>
<body>
<div style="width:700px;" align="center"><!--b1-->
<!--b2-->
<div style="background-color:#FFFFFF; width:100%; padding:0px; border-top:0px solid #DF0000; border-left:1px solid #009F00; border-right:1px solid #009F00; border-bottom:0px solid #DF0000;">
<span style="float:left; background-color:#1FA30C; width:25%; height:20px;"></span>
<span style="float:left; background-color:#24BE0E; width:25%; height:20px;"></span>
<span style="float:left; background-color:#2DE712; width:25%; height:20px;"></span>
<span style="float:left; background-color:#82F372; width:25%; height:20px;"></span>
<br style="clear:both;">
<span style="float:left; background-color:#82F372; width:25%; height:60px;"></span>
<span style="float:left; background-color:#2DE712; width:25%; height:60px;"></span>
<span style="float:left; background-color:#24BE0E; width:25%; height:60px;"></span>
<span style="float:left; background-color:#1FA30C; width:25%; height:60px;"></span>
<br style="clear:both;">
<span style="float:left; background-color:#1FA30C; width:25%; height:20px;"></span>
<span style="float:left; background-color:#24BE0E; width:25%; height:20px;"></span>
<span style="float:left; background-color:#2DE712; width:25%; height:20px;"></span>
<span style="float:left; background-color:#82F372; width:25%; height:20px;"></span>
<br style="clear:both;">

<p>uuuu</p>
<p>uuuu</p>
 
<span style="float:left; background-color:#1FA30C; width:25%; height:20px;"></span>
<span style="float:left; background-color:#24BE0E; width:25%; height:20px;"></span>
<span style="float:left; background-color:#2DE712; width:25%; height:20px;"></span>
<span style="float:left; background-color:#82F372; width:25%; height:20px;"></span>
<br style="clear:both;">
<span style="float:left; background-color:#82F372; width:25%; height:60px;"></span>
<span style="float:left; background-color:#2DE712; width:25%; height:60px;"></span>
<span style="float:left; background-color:#24BE0E; width:25%; height:60px;"></span>
<span style="float:left; background-color:#1FA30C; width:25%; height:60px;"></span>
<br style="clear:both;">
<span style="float:left; background-color:#1FA30C; width:25%; height:20px;"></span>
<span style="float:left; background-color:#24BE0E; width:25%; height:20px;"></span>
<span style="float:left; background-color:#2DE712; width:25%; height:20px;"></span>
<span style="float:left; background-color:#82F372; width:25%; height:20px;"></span>
<br style="clear:both;">

</div><!--Ende b2-->
</div><!--Endeb1-->
 
</BODY>
</HTML>
 
Box-Modell

Der IE interpretiert das BOX-MODELL falsch und addiert den linken/rechten Rahmen mit 1px zu den 700px nicht dazu, was korrekterweise eine Gesamtbreite von 702px für das DIV ergibt.

Hier ein Workaround:
Code: 
<div style="width:702px;" align="center"><!--b1-->
Im zweiten DIV entfernst Du die Weitenangabe und verwendest für die SPANs ebenfalls eine Pixelangabe - also 700px / 4 = 175px:
Code: 
<div style="padding:0px; border-left:1px solid #009F00; border-right:1px solid #009F00;">
<span style="float:left; background-color:#1FA30C; width:175px; height:20px;"></span>
<span style="float:left; background-color:#24BE0E; width:175px; height:20px;"></span>
<span style="float:left; background-color:#2DE712; width:175px; height:20px;"></span>
<span style="float:left; background-color:#82F372; width:175px; height:20px;"></span>
<!-- usw. -->
 
... oder du gibst deiner HTML-Datei eine Dokumenttyp-Deklaration mit URI, dann arbeiten alle Browser im Standardmode. Also einfach ändern in:
Code: 
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01  Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
 
Box-Modell

@ hela: dein Tipp mit der Dokumenttyp-Deklaration incl. URI löst aber nicht das Problem im IE (5.5).
 
Hallo maik,

vielen Dank für deinen tipp, aber leider bleibt rechts ein Rand von 1 px übrig bei der Variante, wenn ich mein Doctype änder auf <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> und deine Pixelangaben einbaue.

Wenn ich den alten Doctype aber behalte und deine Pixel Variante nehme, funkt es im opera und IE, aber im Netscape und Mozilla ist weiterhin 1 px Abstand rechts zuviel.

Die einzige Möglichkeit bei der es bei allen Browsern von mir geht, ist die mit meinen Original und dem neuen Doctype, aber nach deiner Info geht das wiederum im IE 5.5 nicht.

Jetzt habe ich die Qual der Wahl, entweder oder? Was empfhielt ihr mir Leute?
 
Habe mich mal in der Browserstatistik umgesehen: der IE5 liegt bei 5 bis 10%, Tendenz fallend.
 
Hallo hella,

ja gut, dank denke ich das du die gleiche Meinung wie ich vetritts, die Lösung mit dem neuen Doctype für alle neueren Browser zu verwenden.

Immerhin kann man die sich ja auch kostenlos dowloaden, nur mit Modem macht das net so ein spaß wegen der Dowload Zeit.

Aber dieser blöde Doctype auch immer, der kann einem manchmal den letzten Nerv kosten. Ich denke den neuen Doctype werde ich jetzt wohl am besten einfach immer verwenden.
 
Box-Modell

Wie es scheint, hast du die markierte CSS-Eigenschaft für das zweite DIV noch nicht entfernt:

Code: 
<div style="padding:0px; width:100%; border-left:1px solid #009F00; border-right:1px solid #009F00;">


Wenn ich diese CSS-Eigenschaft herausnehme, funktioniert es (bei mir im IE 5.5, Moz 1.6, NN 7.0, Opera 7.23) einwandfrei; es entsteht kein Abstand zum rechten Rahmen. Die DOCTYPE-Methode spielt dabei überhaupt keine Rolle. Ob nun mit einer der beiden genannten, oder ohne DOCTYPE-Angabe: die Browsers stellen das Muster in allen drei 'Varianten' korrekt dar.


Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01  Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>info</title>


</head>
<body>
<div style="width:702px;" align="center"><!--b1-->
<!--b2 ohne width:-->
<div style="padding:0px; border-left:1px solid #009F00; border-right:1px solid #009F00;">
<span style="float:left; background-color:#1FA30C; width:175px; height:20px;"></span>
<span style="float:left; background-color:#24BE0E; width:175px; height:20px;"></span>
<span style="float:left; background-color:#2DE712; width:175px; height:20px;"></span>
<span style="float:left; background-color:#82F372; width:175px; height:20px;"></span>
<br style="clear:both;">
<span style="float:left; background-color:#82F372; width:175px; height:60px;"></span>
<span style="float:left; background-color:#2DE712; width:175px; height:60px;"></span>
<span style="float:left; background-color:#24BE0E; width:175px; height:60px;"></span>
<span style="float:left; background-color:#1FA30C; width:175px; height:60px;"></span>
<br style="clear:both;">
<span style="float:left; background-color:#1FA30C; width:175px; height:20px;"></span>
<span style="float:left; background-color:#24BE0E; width:175px; height:20px;"></span>
<span style="float:left; background-color:#2DE712; width:175px; height:20px;"></span>
<span style="float:left; background-color:#82F372; width:175px; height:20px;"></span>
<br style="clear:both;">

<p>uuuu</p>
<p>uuuu</p>

<span style="float:left; background-color:#1FA30C; width:175px; height:20px;"></span>
<span style="float:left; background-color:#24BE0E; width:175px; height:20px;"></span>
<span style="float:left; background-color:#2DE712; width:175px; height:20px;"></span>
<span style="float:left; background-color:#82F372; width:175px; height:20px;"></span>
<br style="clear:both;">
<span style="float:left; background-color:#82F372; width:175px; height:60px;"></span>
<span style="float:left; background-color:#2DE712; width:175px; height:60px;"></span>
<span style="float:left; background-color:#24BE0E; width:175px; height:60px;"></span>
<span style="float:left; background-color:#1FA30C; width:175px; height:60px;"></span>
<br style="clear:both;">
<span style="float:left; background-color:#1FA30C; width:175px; height:20px;"></span>
<span style="float:left; background-color:#24BE0E; width:175px; height:20px;"></span>
<span style="float:left; background-color:#2DE712; width:175px; height:20px;"></span>
<span style="float:left; background-color:#82F372; width:175px; height:20px;"></span>
<br style="clear:both;">

</div><!--Ende b2-->
</div><!--Endeb1-->

</body>
</html>
 
Hallo feh,

maik hat schon recht und ich wollte mit meinem obigen Beitrag nicht dazu beitragen, dass du die Dokumentdeklaration wahllos einsetzt. Sicherlich ist das unheimlich verwirrend, aber du solltest dir unbedingt mal die Zeit nehmen und dich mit dem Boxmodell auseinandersetzen. Der DOCTYPE "HTML 4.01 Transitional + URI" ist OK, aber es ist eben auch wichtig, dass man das entsprechende Browserverhalten kennt.

Mir gings auch so: Wenn man's begriffen hat, dann erscheint der DOCTYP auch nicht mehr blöd und raubt einem auch nicht mehr den letzten Nerv.

edit:
@michaelsinterface
Der IE interpretiert das BOX-MODELL falsch ...
Zum Vergrößern anklicken....
Ich bin der Meinung, dass der IE das Boxmodell nicht falsch, sondern eben nur anders (wie ein uralter Internet-Explorer) interpretiert.
 
Zuletzt bearbeitet:
Hallo,

vielen Dank, ich werd noch beklopt von diesem blöden bocksenmodel.

Ich will aber demnächst mal versuchen es 100 pro zu verstehen.

gruß
feh
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück