07.01.2005, 16: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> 
|
| Sponsored Links |
|
07.01.2005, 16:47
|
|||
|
|||
 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>
|
| Sponsored Links |
|
07.01.2005, 17:15
|
|||
|
|||
|
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>
|
|
07.01.2005, 17:19
|
|||
|
|||
|
du magst den smilie was?
hab leider kein winIE hier :/ aber will lachen!
|
|
07.01.2005, 17: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;
}
 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>
|
|
08.01.2005, 18: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 
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben."
|
|
08.01.2005, 20:39
|
|||
|
|||
|
Zitat:
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>
|
|
09.01.2005, 10: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)
|
|
10.01.2005, 20:28
|
|||
|
|||
|
Zitat:
Pixelfehler in der Position. Im FF alles OKAY2. 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>
|
| Sponsored Links |
|
11.01.2005, 13: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
__________________
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
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Linear-Darstellung
