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 07.01.2005 17:40

variabler Bezugspunkt [position: relative] / Rundungsfehler
 
Hallo,

kennt jemand dafür eine Lösung. Beide absoluten Layer werden schön am Container ausgerichtet. Leider ist dies nicht mehr der Fall sobald im IE der Schriftgrad verändert wird.

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%;
                        }
/***************************************/
#site                {                        /* variabler Port fuer die folgenden absoluten Layer*/
                        position: relative;

/*                        max-width: 69em;
                        min-width: 46em;
*/                        width: 25em;                       

                        margin: 0 auto;
                        border: 1px solid #000000;
                        padding: 5px 0 0 0;
                       
                        background-color: #FFFFFF;
                        }
                       
#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;
                        }
                       
/***************************************/
p                        {
                        height: 7em;
                        }

       
/*]]>*/
</style>

</head>
<body>

<div id="site">
       
       
       

</p>               
       
        <div id="lt"></div>
        <div id="rb"></div>

</div>

</body></html>


ulle 07.01.2005 17:47

:shock:

Habe gerade noch festgestell dass sich der IE auch mit einem Inhalt im Container, also im normalen Schriftgrad verrechnet.

Somit bringt auch kein Hack etwas, nur wie bekomme ich die Kuh vom Eis :?

Beipiel:
Code:

<div id="site">
        Test text - Test text
       

</p>               
       
        <div id="lt"></div>
        <div id="rb"></div>

</div>


ulle 07.01.2005 18:15

:shock: :shock: :shock:

Man hat der IE einen großen KNALL.

Mein Gedanke war nun einfach für den rechten unteren Layer der Bezugspunkt neu zu setzen damit der IE sich nicht verrechnen kann.
Wer lachen will sollte es sich mal anschauen......


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%;
                        }
#site                {/* variabler Port  #lt [absolute] Layer*/
                        position: relative;

/*                        max-width: 69em;
                        min-width: 46em;
*/                        width: 25em;                       

                        margin: 0 auto;
                        }

#rb-port        {/* variabler Port  #rb [absolute] Layer*/
                        position: relative;
                        background-color: #FF0000;
                        }

                       
#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;
                        }
                       
/***************************************/
                       

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

p                        {
                        height: 7em;
                        }

       
/*]]>*/
</style>

</head>
<body>

<div id="site">
        Test text - Test text
       

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

</div>

</body></html>


psycho_dmr 07.01.2005 18:19

du magst den smilie was? :shock:

hab leider kein winIE hier :/ aber will lachen!

ulle 07.01.2005 18:35

So mit Tricky und Tracky kann der IE jetzt was, nur der Gecko (FF1) verrechnet sich nun.

Habe den ganzen Container prozentual in der Breite gestaltet, womit es dann wohl weniger am Schriftgrad als an der position liegt.

Dieser neue Port mit Float hat es dem IE beigebracht und dem FF1 versalzen, so langsam gehen mir die Ideen aus.
Code:

#rb-port        {/* variabler Port  #rb [absolute] Layer*/
                        position: relative;
                        float: right;
                       
                        width: 0;
                        height: 0;
                        }

Hier nochmal alles :arrow:

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%;
                        }
/***************************************/
.clear                {
                        clear: both;
                       
                        line-height: 0;
                        font-size: 0;
                        height: 0;
                        }
/***************************************/
#site                {/* variabler Port  #lt [absolute] Layer*/
                        position: relative;

/*                        max-width: 69em;
                        min-width: 46em;
*/                        width: 40%;                       

                        margin: 0 auto;
                        }

#rb-port        {/* variabler Port  #rb [absolute] Layer*/
                        position: relative;
                        float: right;
                       
                        width: 0;
                        height: 0;
                        }

                       
#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;
                        }
                       
/***************************************/
                       

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

p                        {
                        height: 7em;
                        }

       
/*]]>*/
</style>

</head>
<body>

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

</p>               
       
        <div id="lt"></div>
       
       
        <div id="rb-port">
                <div id="rb"></div>
        </div>
        <div class="clear"></div>
</div>

</body></html>


Dieter 08.01.2005 19:36

Hallo, Ulle!

Meintest Du sowas hier? http://www.spd-metternich.de
Verstell mal im IE die Schriften! Und sage mir, ob Du "sowas" meintest!?

Damit mir :idea:

ulle 08.01.2005 21:39

Zitat:

Verstell mal im IE die Schriften! Und sage mir, ob Du "sowas" meintest!?
Ich denke mal nein, zumal ich kein Problem erkennen kann, IE6 :!] in der ID #site gesetzt ist. [/color]
Dieser kann je nach Ausgabemedium immer an einer anderen Stelle sein, da #side zentriert und relative (%) Breit definiert, genauso ist die Höhe von #side variable.

Cild-Elemente von #side können ja nun mit [position: absolute] entsprechend positioniert werden :idea:

Dies Funktioniert auch mit top / bottom - Angaben sehr gut, nur beim positionieren right / bottom habe ich Problem mit dem IE, da evtl. Rundungsfehler.

Mit meinen Versuchen das Problem mit einem 'tricky' Workaround zu umgehen habe ich zwar mit letzt gezeigter Lösung mit dem IE keine Probleme mehr, dafür aber nun mit Firefox, dieser hat im letzten Beispiel nun die Rundungsfehler.

Verstehen kann man es nur wenn man sich die einzelnen Schritte kopiert und ansieht.

Übrigens ist dies nur ein stellvertrettenes Beispiel für ein Anwendung die ich plane, d.h. zur absoluten Positionierung habe ich keine Alternative. :!:

psycho_dmr 09.01.2005 11:22

ähm also wenn ich das jetz richtig verstanden hab, zeigen das erste bsp beide browser bei dir richtig an.
wenn du die schriftgröße änderst stimmts bei dir zwar im FF noch aber nichtmehr im IE?

-> bei mir stimmts dann auch im FF nichtmehr...

das zweite bsp stimmt bei mirim IE schonmal garnich (lol...), aber im FF hab ich auch hier nen pixelfehler (wie bei bsp1 ist der untere orangene kasten über der rechten linie)

das dritte, jo das stimmt im IE, aber nich im FF

-> bei mir zeigt der FF keins richtig an ^^ (sobald schriftgröße geändert wird)

ulle 10.01.2005 21:28

Zitat:

ähm also wenn ich das jetz richtig verstanden hab, zeigen das erste bsp beide browser bei dir richtig an.
wenn du die schriftgröße änderst stimmts bei dir zwar im FF noch aber nichtmehr im IE?
1. Beispiel: verrechnet sich der IE mit dem Layer der in der unteren rechten Ecke sein soll.
:arrow: Pixelfehler in der Position. Im FF alles OKAY

2. Beispiel: im FF immer noch alles OKAY und im IE der super-GAU

3. Beispiel: im IE alles OKAY - nun habe ich aber im FF einen Pixelfehler.

___________

Naturlich tritt der Fehler nur bei bestimmten Containergrößen im #side auf, und die größe wird ja beeinflußt durch den Schriftgrad bzw. der Bildschirmbreite.

___________


Wie positioniert Ihr denn "absolute" von unten/rechts innerhalb eines variablen Containers fehlerfrei :?: :?:

andir 11.01.2005 14:13

Meine Beobachtungen:

System : Win2K alle Patches, I.E. 6.0 / FF 1.0 FR / CRT-Monitor


Beispiel 1: Oben Links: beide Browser ok
unten rechts: I.E. Rundungsfehler - Abstand beide Seiten ca. 1px gleibbleibend über mehr als "normal" Schriftgröße

FF: Rundungsfehler bei Änderungen, es ist nur der untere Abstand betroffen, mal fehlt ein Pixel, mal wird der border von #site überlappt. Das ist wie eine unendliche Folge: gut- zu wenig - gut- zuviel - gut - zu wenig - gut - zu viel.......

Ausnahme: bei extemer Verkleinerung stimmt auch der seitliche Abstand nicht mehr (Überlappung des Borders)

Beispiel 3: Hier stimmts im I.E. 6.0, der FF hat Fehler dazugewonnen - jetzt stimmen auch die seitlichen Abstände allgemein nicht mehr: Bei extremen Vergrößerungen /Verkleinerungen wird der Border von #site teilweise durchbrochen.

Bei den Fehlern im FF ist eine gewisse Periodizität erkennbar, es scheint sich tatsächlich um Rundungsfehler zu handeln.


Habe testhalber top left oder right bottom mit 0; 0px; 0em; 0% ersetzt - es bestehen keine Abhängigkeiten.

Wenn Du #site breiter definierst, z.B. mit 45em ( für den I.E.) tritt der seitliche Fehler im I.E. nicht mehr auf, nur der untere Fehler.
Gleiches gilt, wenn du dem IE per Svend Tofte Hack eine gewisse Skalierfähigkeit mitgibst: Ab einer bestimmten Größenordnung des umliegenden Containers #site verschwindet beim I.E. der seitliche Fehler.

Mehr, als was in

http://www.positioniseverything.net/...es/common.html

zum 1px rounding error drinsteht, weiß ich auch nicht :?

andir


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

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

© Dirk H. 2003 - 2019