XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   variabler Bezugspunkt [position: relative] / Rundungsfehler (http://xhtmlforum.de/showthread.php?t=34045)

ulle 11.01.2005 18:39

@andir - Danke

Rundungsfehler :arrow: nach mehreren Prüfungen habe ich Folgendes festgestellt:

Wird ein Element nicht explizit mit fester Breite/Höhe angegeben,
also mit der Einheit Pixel definiert wird es sowohl beim Firefox,
als auch beim IE evtl. zu Rundungsfehlern kommen,
sofern ein Startpunkt für die absolute Positionierung errechnet werden muß.

D.h. ein errechneter Startpunkt wäre sobald [right] oder [bottom] benutzt werden.
Diese Problem tritt auch auf wenn das Element in dem absolute positioniert wird der BODY ist.
Einzig der Opera scheint diese Probleme nicht zu kennen.

Nun habe ich aber zumindest dem IE den Rundungsfehler mit einem Trick abgewöhnt,
nur der Firefox (Gecko) läßt sich davon nicht überzeugen.

Genannt habe ich das "GHOST"-Container :arrow:
Code:

#rb-port 
                { /* Ghost-Container */
                position: relative; /* variabler Port  fuer #rb [absolute] Layer;
                                                        neuer Port vermeidet IE/FF Rundungsfehler in der Hoehe,
                                                        sonst waere #side-Port verwendbar */

                height: 0;        /* ohne Auswirkung in der Hoehe */               
                width:  0;        /* ohne Auswirkung in der Breite */
               
                margin: 0 0 0 auto; /* [auto] setzt Ghost-Container an den rechten Rand;
                                                        somit wird  Rundungsfehler des IE in der Breite verhindert */
                }

Was wird bewirkt: :arrow: Ich setze einen neuen Bezugspunkt,
somit muß für die Höhe von #side nichts errechnet werden da der neue Bezugspunkt ja ganz unten ist.
Des weiteren wird dieser nicht sichtbare Bezugspunkt durch [margin-left: auto] direkt rechts an den inneren Container-Rand von #side gesetzt.
Dadurch muß der rechte Startpunkt nicht errechnet werden.

Das ganze funktioniert im IE und im Opera, im Firefox habe ich nur noch einen Rundungsfehler beim rechten Startpunkt.

Hat jemand einen Safari bzw. andere Testmöglichkeiten :?:

Hier nochmal der gesamte vereinfachte Code
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/


html,body  {
                margin: 0;
                padding: 3px;
               
                background-color: #DDDDDD;
                color: #000000;
               
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                font-size: 100.01%;
                }

               
p                {
                margin: 7em 0 0 2em;
                }

               
#site        {
                position: relative; /* variabler Port fuer  #lt [absolute] Layer*/

                width: 40%;

                margin: 0 auto;
                border: 1px solid #000000;
                padding: 5px 0 0 0;
               
                background-color: #FFFFFF;
                }

#rb-port 
                { /* Ghost-Container */
                position: relative; /* variabler Port  fuer #rb [absolute] Layer;
                                                        neuer Port vermeidet IE/FF Rundungsfehler in der Hoehe,
                                                        sonst waere #side-Port verwendbar */

                height: 0;        /* ohne Auswirkung in der Hoehe */               
                width:  0;        /* ohne Auswirkung in der Breite */
               
                margin: 0 0 0 auto; /* [auto] setzt Ghost-Container an den rechten Rand;
                                                        somit wird  Rundungsfehler des IE in der Breite verhindert */
                }
               
               
#lt, #rb  { /* links-oben / rechts-unten */
                position: absolute;
               
                width: 3em;
                height: 3em;
               
                background-color: #FF9900;
                }

#lt                {               
                top: 0px;
                left: 0px;
                }
               
#rb                {
                right: 0px;
                bottom: 0px;
                }
 
/*]]>*/
</style>

</head>
<body>

<div id="site">
       
        <h1>nur so zum Test</h1>
               
       

Test text - Test text - Test text - Test text</p>     
       
       
       
        <div id="lt"></div>
       
        <div id="rb-port">
                <div id="rb"></div>
        </div>

</div>

</body></html>


terrikay 11.01.2005 18:51

Mit dem IE 5 gehts gar nicht - da sitzt das orangene Kästchen dann ganz links und das Ganze ist nicht zentriert.

Betrifft sowohl IE 5 als auch IE5.5 - kannst Du auch mit dem IE6 nachahmen, wenn Du ihn in den Quirksmode schickst.

ulle 11.01.2005 21:56

Zitat:

.... - da sitzt das orangene Kästchen dann ganz links und das Ganze ist nicht zentriert.
Stimmt :? , das mit dem zentrieren ist mir aber bewußt, und egal :!:

Zitat:

Mit dem IE 5 gehts gar nicht........
Nun, da habe ich noch was, einfach ins CSS einfügen, somit ist der IE auch im Quirksmode bzw. in Version 5/5.5 bedient. Diese Idee mit dem [float: right] hatte ich ja schon im 3 Versuch, nur dachte ich dasses ohne HACK ginge und habe dabei natürlich den alten IE-Trottel vergessen.
:arrow:
Code:

* html #rb-port 
                { /* fuer IE Win \*/
                float: right;
                /* */ /* for Mac IE */
                }


psycho_dmr 12.01.2005 12:09

Der Safari zeigt bei deinem letzten bsp (da wo du den ganzen code gepostet hast) alles richtig an.

ulle 12.01.2005 13:00

@psycho_dmr, Danke Dir

Super - damit kann man nun zumindest dem IE den Rundungsfehler beim positionieren mit RIGHT, innerhalb eines relativ breiten Containers (% oder em), abgewöhnen.

manithu 13.01.2005 19:59

Opera 7.6 Preview 3 zeigt nur das links obere Kästchen an.

ulle 13.01.2005 20:47

Opera 7.52 Kein Problem :!:
Code:

Opera

Version        7.52       
Build        3834       
Platform        Win32       
System        Windows XP       
         
Java        Sun Java Runtime Environment version 1.4

@manithu :arrow: Opera 7.6 Preview 3, da habe die wohl verschlimmbessert


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:00 Uhr.

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

© Dirk H. 2003 - 2019