XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Pixelgenaues Design - Boxmodell-Fehler im IE 6 ??? (http://xhtmlforum.de/showthread.php?t=33416)

Mirakulum 13.10.2004 13:34

Pixelgenaues Design - Boxmodell-Fehler im IE 6 ???
 
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).

:arrow: 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]

magicmomo 28.10.2004 09:03

schonmal padding probiert?


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:28 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020