nicht angemeldet
position:relative ändert die (Gesamt-)Höhe im IE!?
Hallo liebe CSS-Profis!
Folgendes Problem:
Ich habe mehrere Div's, die ich überlagern möchte. Da mir jeweils die Breite/ Höhe bekannt ist, habe ich dafür 'position:relative' verwendet.
Im Moz1.5/NS7 und in Opera6/7 funktioniert das auch wunderbar, nur der IE (NS6.2) vergrößert die Höhe des umschliessenden Div's, bzw. die Dokumenthöhe, so als ob die Div's untereinander positioniert wären.
Frage:
- Kann man das irgendwie unterbinden/vermeiden?
- Wenn Ja, wie?
- Oder gibt es einen anderen Ansatz, der das selbe (gewünschte) Ergebnis bringt?
Danke im Voraus für jeden Tipp/Rat!
Gruß aus Köln
Gunther
-
Moin!
Ich habe mehrere Div's, die ich überlagern möchte. Da mir jeweils die Breite/ Höhe bekannt ist, habe ich dafür 'position:relative' verwendet.
Quelltext?
- Kann man das irgendwie unterbinden/vermeiden?
Ja.
- Wenn Ja, wie?
Einfach den IE nicht benutzen.
- Oder gibt es einen anderen Ansatz, der das selbe (gewünschte) Ergebnis bringt?
Sicherlich. Nur der Glaskugeldrucker will grad nicht und ich hab keinen Bock mir den Quelltext zum Problem selbst zu schreiben.
Danke im Voraus für jeden Tipp/Rat!
Klar doch! War selbstverständlich! Bitte!
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix®
--
Als Freiberufler bin ich immer auf der Suche nach Aufträgen: Schulungen, Development. Auch für seriöse Agenturen.-
Moin!
Moin Moin!
Ich habe mehrere Div's, die ich überlagern möchte. Da mir jeweils die Breite/ Höhe bekannt ist, habe ich dafür 'position:relative' verwendet.
Quelltext?Sorry, hab's jetzt extra mal uploaded (da CSS-Dateien extern eingebunden werden) http://www.top-topics.com/test/index.shtml
am besten wird das Problem deutlich bei Verwendung eines MSIE und eines Moz/OP6/7, bei einer Auflösung von 1024x768- Kann man das irgendwie unterbinden/vermeiden?
Ja.
Prima.
- Wenn Ja, wie?
Einfach den IE nicht benutzen.
Toller Tipp! Ich könnte den ja noch beherzigen, aber wie sieht es mit den Usern aus, die die Seite hoffentlich mal besuchen werden...?
- Oder gibt es einen anderen Ansatz, der das selbe (gewünschte) Ergebnis bringt?
Sicherlich. Nur der Glaskugeldrucker will grad nicht und ich hab keinen Bock mir den Quelltext zum Problem selbst zu schreiben.
kleiner Tipp: anderen Drucker kaufen! (scnr)
Danke im Voraus für jeden Tipp/Rat!
Klar doch! War selbstverständlich! Bitte!Danke!
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix®Grins zurück
Gunther - Kann man das irgendwie unterbinden/vermeiden?
-
Folgendes Problem:
Ich habe mehrere Div's, die ich überlagern möchte. Da mir jeweils die Breite/ Höhe bekannt ist, habe ich dafür 'position:relative' verwendet.Im Moz1.5/NS7 und in Opera6/7 funktioniert das auch wunderbar, nur der IE (NS6.2) vergrößert die Höhe des umschliessenden Div's, bzw. die Dokumenthöhe, so als ob die Div's untereinander positioniert wären.
Für mich erscheint das logisch. Mit position:relative verschiebst du die Element nach oben, der Platz an ihrer ursprünglichen Position bleibt aber weiter ausgefüllt bzw. ist durch eine Aussparung belegt. Das ist das Konzept von position:relative. Wo die ursprüngliche Position ist, merkst du ja, wenn du position:relative herausnimmst.
Der Grund, das es im Opera und Gecko so aussieht, wie du willst, und im MSIE nicht, ist, dass diese Browser das Element nicht vergrößern, wenn der Inhalt über die angegebene feste Höhe (33.1em) hinausgeht, sondern der Inhalt fließt aus der Elementbox heraus.Ich verstehe nicht ganz, warum du es so löst, wie du es momentan löst. Das erscheint mir sehr aufwändig und umständlich, du magst deine Gründe haben. Die Korrektur über position:relative könntest du schon alleine damit übergehen, dass du die Grafik bg_hdb.jpg als Hintergrundbild definierst (von #wrap, soweit ich das überblicke). Dann würde der Inhaltstext ganz normal neben dem schwarzen Bild herlaufen.
Darüber hinaus würde ich es komplett anders lösen:
<table id="viewport" width="100%" height="100%" cellpadding="0" cellspacing="0"><tr><td id="t1" class="hv_center">
<div id="outwrap">
<div id="wrap"><div id="head">Online-Bewerbungsmappe</div>
<div id="main">
<p>Herzlich willkommen</p>
<p>und vielen Dank für Ihr Interesse an meiner Bewerbung.</p>
<p>Bitte haben Sie Verständnis dafür, dass für den Zugang zu meinen Unterlagen eine <span title="zusätzliche 
Info's">Benutzeranmeldung</span> erforderlich ist.</p>
<p>Sollten Sie noch keinen Benutzernamen und kein Passwort haben, klicken Sie bitte auf den Link "Zugangsdaten anfordern".</p>
</div></div>
</div>
</td></tr></table>html,body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
color: #000000;
background-color: #ffffff;
font-family: Arial,Helvetica,Verdana,sans-serif;
}#viewport {
height: 100%;
width: 100%;
}
.hv_center {
text-align: center;
vertical-align: middle;
}
#outwrap {
background-image: url(bg_gp.gif);
background-repeat: no-repeat;
width: 50em;
height: 33em;
padding:0;
margin: auto;
}
#wrap {
background-image: url(bg_hdb.jpg);
background-repeat: no-repeat;
margin-left: 64px;
height: 100%;
border: 1px solid #ccc;
}
#head {
font-size: 2.2em;
height: 1.3em;
padding-left: 1em;
text-align: left;
background: url(bg_pt000.gif) repeat-x 0% 100%;
}
#main {
text-align: center;
}
#main p {
margin:0 0 15px 0;
}(bzw. <h1>Online-Bewerbungsmappe</h1>)
Also beide Bilder als Hintergrundbilder und margin-left für #wrap. Breite und Höhe bei #outwrap angeben.
Das wäre dann das media="all"-Stylesheet, die an die Aufsplittung und Extrastyles für Netscape 4 habe ich mich nicht gemacht, vielleicht war in dieser Hinsicht deine Ursprungslösung geeigneter, ich habe es nicht näher untersucht.-
Hallo Mathias!
Folgendes Problem:
Ich habe mehrere Div's, die ich überlagern möchte. Da mir jeweils die Breite/ Höhe bekannt ist, habe ich dafür 'position:relative' verwendet.Im Moz1.5/NS7 und in Opera6/7 funktioniert das auch wunderbar, nur der IE (NS6.2) vergrößert die Höhe des umschliessenden Div's, bzw. die Dokumenthöhe, so als ob die Div's untereinander positioniert wären.
Für mich erscheint das logisch. Mit position:relative verschiebst du die Element nach oben, der Platz an ihrer ursprünglichen Position bleibt aber weiter ausgefüllt bzw. ist durch eine Aussparung belegt. Das ist das Konzept von position:relative. Wo die ursprüngliche Position ist, merkst du ja, wenn du position:relative herausnimmst.
Der Grund, das es im Opera und Gecko so aussieht, wie du willst, und im MSIE nicht, ist, dass diese Browser das Element nicht vergrößern, wenn der Inhalt über die angegebene feste Höhe (33.1em) hinausgeht, sondern der Inhalt fließt aus der Elementbox heraus.ja genau! Kann man den IE auch dazu bewegen?
Ich verstehe nicht ganz, warum du es so löst, wie du es momentan löst. Das erscheint mir sehr aufwändig und umständlich, du magst deine Gründe haben.
Der Grund ist, dass ich mal probieren wollte, die Text Zoom-Funktionen der Browser zu unterstützen, da (afaik) ausser Opera kein Browser auch Tabellen, Hintergrundgrafiken, Rahmen, etc. vernünftig mit aufzieht. Ansonsten gebe ich dir völlig Recht, dass das sehr (bzw. zu)umständlich ist.
Beim IE kann man sich die Mühe eigentlich sparen, wenn man per CSS auf die Zoom-Funktion zurückgreift.Die Korrektur über position:relative könntest du schon alleine damit übergehen, dass du die Grafik bg_hdb.jpg als Hintergrundbild definierst (von #wrap, soweit ich das überblicke). Dann würde der Inhaltstext ganz normal neben dem schwarzen Bild herlaufen.
das wollte ich eben aus vorgenanntem Grund nicht.
Darüber hinaus würde ich es komplett anders lösen:
[Quelltext siehe Originalposting von molily]
Also beide Bilder als Hintergrundbilder und margin-left für #wrap. Breite und Höhe bei #outwrap angeben.
Das wäre dann das media="all"-Stylesheet, die an die Aufsplittung und Extrastyles für Netscape 4 habe ich mich nicht gemacht, vielleicht war in dieser Hinsicht deine Ursprungslösung geeigneter, ich habe es nicht näher untersucht.
Vielen Dank, dass du dir (wieder mal) soviel Gedanken gemacht hast. Ich habe in der zwischenzeit auch noch mal gegrübelt (und im Netz gestöbert) und bin jetzt auf eine 'Lösung' per position:absolute gekommen http://www.top-topics.com/test/index.shtml (Dateien sind upgedated - die Visitenkarte ist noch nicht angepasst).
Das ganze soll übrigens nur als Start-/Eingangsseite dienen, von der aus man entweder Zugangsdaten (per E-Mail, Formmailer) anfordern kann, oder weiter zum zugangsgeschützten Bereich (htaccess) gelangt.
Ich habe mich u.a. für diese Eingangsseite entschieden, da ich über sie ein paar mögliche Dinge (z.B. Javascript de-/ aktiviert, welcher Browser, Fenstergrösse, etc.) über den jeweiligen Client in Erfahrung bringen möchte (natürlich nicht über den Useragent).
Das Layout der eigentlichen Bewerbungsseiten soll ein anderes (oder auch nicht!?) werden.
Für konstruktive Vorschläge, Tipps, oder auch Links zu Beispielseiten wäre ich mehr als dankbar.
Nochmals vielen Dank & Gruß
Gunther-
Hi,
und bin jetzt auf eine 'Lösung' per position:absolute gekommen http://www.top-topics.com/test/index.shtml
autsch... da bist Du aber in die font-size Falle getappt. Vergrößere oder verkleinere die Seite mal im IE. Abgesehen davon, daß durch die absolute Positionierung das Layout durcheinandergerät, ist der Effekt umwerfend..;-)
Merke: nie body { font-size: 1em; } angeben. 100% ober wegen anderer Browserbugs besser 101%.
freundliche Grüße
Ingo-
Hi Ingo,
autsch... da bist Du aber in die font-size Falle getappt. Vergrößere oder verkleinere die Seite mal im IE. Abgesehen davon, daß durch die absolute Positionierung das Layout durcheinandergerät, ist der Effekt umwerfend..;-)
Merke: nie body { font-size: 1em; } angeben. 100% ober wegen anderer Browserbugs besser 101%.
ups, das ist ja ein peinlicher Fehler - Danke für den netten Hinweis!
freundliche Grüße
IngoGruß aus Köln
Gunther
-
-
-