nicht angemeldet
Div im IE nicht schoen! ;-(
0 0 
Struppi
Div im IE nicht schoen! ;-(
Moin Moin,
nachdem ich mich bisher erfolgreich um Divs druecken konnte, darf ich nun in die Geheimnisse eintauchen und stosse auch auf wenig Gegenliebe. Kann aber auch an der Zeit, der Musik oder dem schlechten Kaffee liegen.
Mein Problem:
Der IE wurschtelt ein paar Pixel zur Positionierung eines Blockelements dazu. Nun bin ich auch auf den "3-Pixel-Bug" gekommen, bin aber als HTML-Schlampe wohl nicht in der Lage den Fehler, falls es dieser sein sollte, zu beheben:
Das CSS:
div#basic
{
width:800px;
border-width:1px;
border-color:#2256BF;
border-style:solid;
}
div#topLeft
{
background-color:#abc;
width:180px;
height:80px;
margin:0px;
padding:0px;
float:left;
}
div#topRight
{
background-color:#def;
width:620px;
height:80px;
margin-left:180px;
padding:0px;
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="basic">
<div id="topLeft"></div>
<div id="topRight"></div>
</div>
</body>
</html>
Mozilla/Firefox, Opera sind gnaedig. Die beiden Bloecke werden pixelgenau aneinandergereiht; IE zieht den zweiten Block aber in eine zweite Reihe. Zum Haareraufen. Ich weiss schon, warum ich kein Designgott bin. Wenn jemand den Fehler findet oder diverse Dirty-Hacks hat: immer gerne!
Gruss in die Nacht... und Danke, ne!
Jan
-
div#topRight
{
background-color:#def;
width:620px;
height:80px;
margin-left:180px;
padding:0px;
}Hallo.
Du kannst ganz einfach einen kleinen Hack benutzen
* html div#topRight{width:*hier steht angepasste größe*;}Alles was hinter * html steht, wird von allen überlesen ausser dem IE!
also praktisch:
div#topRight
{
background-color:#def;
width:620px;
height:80px;
margin-left:180px;
padding:0px;
}
* html div#topRight{width:*hier steht angepasste größe*;}Alle Browser(auch IE) übernehmen alles Werte von div#topRight.
Anschließend nimmt der IE den Wert von width überschrieben.
Das würden alle anderen Brwoser auch tun aber das tun sie nicht dank dem * html.Hoffe ich konnte dir helfen.
mfg
Phil Z.
-
Hej Phil,
Du kannst ganz einfach einen kleinen Hack benutzen
* html div#topRight{width:*hier steht angepasste größe*;}Alles was hinter * html steht, wird von allen überlesen ausser dem IE!
Wunderbar. Das hat grundsaetzlich zum Verstaendnis beigetragen! Danke dafuer!
Das Problem ist aber nicht die eigentlich Weite, die sieht wunderbar aus. Wuerde auch elegant passen, wenn der div#topRight nicht nach unten rutscht.
Das Ganze sieht so aus:
http://img226.imageshack.us/img226/1999/divtesths0.gifWie gesagt: In Mozilla und Opera lueppt's.
Danke auf jeden Fall!
Jan
-
-
div#topLeft
{
background-color:#abc;
width:180px;
height:80px;
margin:0px;
padding:0px;
float:left;
}div#topRight
{
background-color:#def;
width:620px;
height:80px;
margin-left:180px;
padding:0px;
}ich würde hier einfach die Breite rausnehmen, da sich das DIV so oder so an die Breite des restlichen Inhalt anpaßt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Wenn mich nicht alles täuscht wird der Browser damit in den fehlerbehafteten Quirks Modus versetzt?
und folglich im IE u.a. der Boxmodell Bug ausgelöst.Struppi.
--
Javascript ist toll (Perl auch!)-
Hej Struppi,
danke fuer Dein Feedback...
Ich bin heute abend auf die Loesung gestossen:
ein
"margin-right:-180px;" im "leftTop" bringt den IE zur korrekten Ansicht. Den Tipp, die Breite rauszunehmen, hab ich auch beherzigt.
Danke!
Gruss,
Tim.. aeh Jan! ;)
-
