zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden variabler Bezugspunkt [position: relative] / Rundungsfehler

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.01.2005, 17:40
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.01.2005, 17:47
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard



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>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.01.2005, 18:15
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard



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>
__________________
</ulle>
Mit Zitat antworten
  #4 (permalink)  
Alt 07.01.2005, 18:19
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.10.2004
Beiträge: 990
psycho_dmr befindet sich auf einem aufstrebenden Ast
Standard

du magst den smilie was?

hab leider kein winIE hier :/ aber will lachen!
Mit Zitat antworten
  #5 (permalink)  
Alt 07.01.2005, 18:35
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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

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>
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 08.01.2005, 19:36
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #7 (permalink)  
Alt 08.01.2005, 21:39
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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

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.
__________________
</ulle>
Mit Zitat antworten
  #8 (permalink)  
Alt 09.01.2005, 11:22
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.10.2004
Beiträge: 990
psycho_dmr befindet sich auf einem aufstrebenden Ast
Standard

ä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)
Mit Zitat antworten
  #9 (permalink)  
Alt 10.01.2005, 21:28
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
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
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.01.2005, 14:13
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 12:46 Uhr.