Aufgabe:
In mittig platzierter Box fester Größe (799px breit) sollen nebeneinander die Box #bb (242px) und #tt (409px) stehen, so daß #tt 91 px vom rechten Rand entfernt ist, d.h. der Abstand der beiden 53px beträgt (4px gehen noch für den Rahmen drauf).
Umsetzung:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
html, body {
height:100%;
padding:0;
margin:0;
font-family: Verdena, Arial, Helvetica, sans-serif;
}
#horizon {
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block;
}
#content {
margin-left: -400px;
position:absolute;
top:-240px;
left:50%;
width:799px;
height: 480px;
visibility: visible;
border: 1px solid #085194;
}
#bb {
width:242px;
float:left;
border:solid 1px red;
}
#tt{
width:409px;
margin-right:91px;
margin-top:20px;
float:right;
text-align:left;
border:solid 1px green;
}
#t1 {
text-align:right;
}
#t2 {
padding-top:5px;
font-size: 30px;
}
-->
</style>
</head>
<body>
<div id="horizon">
<div id="content">
<div id="bb">
[img]dummy.jpg[/img]</div>
<div id="tt">
<div id="t1">Lalalalalalal</div>
<div id="t2">Lololololo</div>
</div>
</div>
</div>
</body>
</html>
Mozilla, Konqueror, Opera sind okay, aber der IE 5.5 und auch 6.0 (!!!) machen die content-box um den margin-right-Betrag größer und verschieben den textblock tt aber um das Doppelte (!) dieses Betrages nach links - warum ????
Folgender Alternativcode funktioniert dann im IE, aber nicht mehr im Konqueror:
Code:
#tt{
width:409px;
position:relative;
left:-91px;
top:20px;
float:right;
text-align:left;
border:solid 1px green;
}
Wie ist das was passiert zu verstehen und gibt es eine Lösung für beide Browser (ohne Hacks, zur Not mit validen Hacks) ?
Bin gespannt auf Eure Antworten
Michael[/code]
13.10.2004, 13:34
Pixelgenaues Design - Boxmodell-Fehler im IE 6 ???
Ähnliche Themen
Linear-Darstellung
