nicht angemeldet
div in IE7 width:auto problem
Hallo zusammen,
ich hab hier ein verschachteltes Div. Im Firefox funktioniert das alles soweit ganz gut, nur im IE7 gibts da ein klitzekleines Problem.
Weiß jemand ne Lösung dafür?
hier mal die datei http://www.flightlines.eu/test/test.html
hier der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">
body { background:#0099CC;}
#sitearea {position:absolute; top:2%; left:10%; width: 80%; min-width:800px; max-width:1600px; height:90%; min-height:550px; background-color:#ffffff; padding-top:10px; background:#FFFFFF; }
#banner {width: auto; margin-left: 10px; margin-right: 10px; padding-left:10px; padding-right:10px; height: 131px;
background:#669900;}
#box1 {position:absolute; left:10px; top:150px; z-index:3; width:124px; height:200px;
background:#CC6633;}
#box2 {position:absolute; margin-left:173px; margin-right:10px; margin-top:19px; margin-bottom:30px; z-index:5; width:auto; height:auto; background:none; overflow:auto; background:#9999CC;}
</style>
<body>
<div id="sitearea">
<div id="banner"> </div>
<div id="box1"> </div>
<div id="box2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>
</div>
</body>
</html>
Es soll natürlich so wie im FF dargestellt werden, wie krieg ich das den im IE hin ohne eine feste Breite zu definieren? Die Box links hat eine feste Breite und Position.
Danke schonmal für eure Hilfe!
-
hier mal die datei http://www.flightlines.eu/test/test.html
a) This page is not Valid XHTML 1.0 Transitional!
b) wenn du vertikal und horizontal zentrieren möchtest, interessiert dich das hier vieleicht: https://redaktion.selfhtml.org/ticket/486 ansonsten begnüge dich mit dem forumsfaq - die von dir gewählte methode ist etwas unpraktisch-
hier mal die datei http://www.flightlines.eu/test/test.html
a) This page is not Valid XHTML 1.0 Transitional!
b) wenn du vertikal und horizontal zentrieren möchtest, interessiert dich das hier vieleicht: https://redaktion.selfhtml.org/ticket/486 ansonsten begnüge dich mit dem forumsfaq - die von dir gewählte methode ist etwas unpraktischUnd was genau hat das mit meinem Problem zu tun?
Ich hab das css zeug einfach driekt reingeschrieben, weil ich nicht noch ne externe css datei hochladen wollte.
Und wieso sollte ich was vertikal oder horizontal zentrieren wollen?
hast du dir den link überhaupt mal im Firefox und im IE7 angeschaut?-
hier mal die datei http://www.flightlines.eu/test/test.html
a) This page is not Valid XHTML 1.0 Transitional!
b) wenn du vertikal und horizontal zentrieren möchtest, interessiert dich das hier vieleicht: https://redaktion.selfhtml.org/ticket/486 ansonsten begnüge dich mit dem forumsfaq - die von dir gewählte methode ist etwas unpraktischUnd was genau hat das mit meinem Problem zu tun?
invalider code führt per defintion irgendwann irgendwo zu problemen, ohne validen code ist produktives arbeiten nicht möglich
Ich hab das css zeug einfach driekt reingeschrieben, weil ich nicht noch ne externe css datei hochladen wollte.
das hab ich nicht bemängelt
Und wieso sollte ich was vertikal oder horizontal zentrieren wollen?
breite 80%, 10% abstand nach links mittels absoluter positionierung? - du möchtest scheinbar einen 80%-breiten-container immer gleichmäßig in der mitte des viewports stehen haben - oder irre ich da?
hast du dir den link überhaupt mal im Firefox und im IE7 angeschaut?
nein, da mit dein code gleich eine watschn ins gesicht verpasst hat und produktives arbeiten mit invalidem code oder per ungünstiger anweisungen im css möglich ist
und ich mit mir ZIEMLICH sicher, dass du #sitearea zumindest horizontal zentrieren möchtest
-
und ich mit mir ZIEMLICH sicher, dass du #sitearea zumindest horizontal zentrieren möchtest.
Ja, nur ist das leider nicht das Problem. Wenn du dir die Seite, zu der ich den link geposted hab mal im IE7 und im FF angeschaut hättest, wüsstest du was das Problem ist, für das ich hier eine Lösung suche.
Und was du bemängelt hast ist, dass der code nicht valid ist. Kann ich verstehen, werde ich noch beheben, schön und gut - wenn ich es durch den Validator schicke, sagt der, das es an dem style zeug im head liegt. Ergo hast du doch quasi bemängelt, dass ich das den style ins head geschrieben hab, da eben genau das zu invalidem code führt, richtig?
Nichts für ungut - ich weiß man sollte immer valid coden, da ich aber kein Experte bin, ist das im Moment meine kleinste Sorge. Ich mach das relativ am Schluss. Ja, ich weiß, dass das umständlich ist.
-
und ich mit mir ZIEMLICH sicher, dass du #sitearea zumindest horizontal zentrieren möchtest.
Ja, nur ist das leider nicht das Problem.in weiterer folge irgendwann schon
Wenn du dir die Seite, zu der ich den link geposted hab mal im IE7 und im FF angeschaut hättest, wüsstest du was das Problem ist, für das ich hier eine Lösung suche.
nein, dein problem IST in weiterer folge die absolute positionierung (absolute positionierte elemente werden aus dem textfluss entfernt und wirken sich nicht mehr auf umliegende elemente aus) - wenn du photografx vorschlug, mit float arbeitest, wirst du feststellen warum das so ist
Und was du bemängelt hast ist, dass der code nicht valid ist. Kann ich verstehen, werde ich noch beheben, schön und gut - wenn ich es durch den Validator schicke, sagt der, das es an dem style zeug im head liegt. Ergo hast du doch quasi bemängelt, dass ich das den style ins head geschrieben hab, da eben genau das zu invalidem code führt, richtig?
dass css über das style-attribut eingebunden wird, habe ich nicht bemängelt - das tut auch nichts zur sache, sofern es richtig gemacht wird - bei invaliden code treibt es aber den internet explorer (und jeden anderen browser) in den quirksmode - die darus resultierende fehlerkorrektur produziert dann nur im besten fall das gewünschte
Nichts für ungut - ich weiß man sollte immer valid coden, da ich aber kein Experte bin, ist das im Moment meine kleinste Sorge.
valider code sollte immer deine erste sorge sein
Ich mach das relativ am Schluss. Ja, ich weiß, dass das umständlich ist.
ja, da du dann am schluss _ALLES_ nochmal machen darfst, da der internet explorer im quirksmode mit falschem box-model rechnet
breite = margin + border + padding + width
für den ie heisst das = margin + border - padding + widthdaraus ergibt sich eine völlig andere darstellung und das solltest du UNBEDINGT beherzigen
im aktuellen stadium ist es schlau den code den du jetzt hast komplett wegzuwerfen und neu zu beginnen
du willst eine horizontal zentrierte seite mit flexibler breite und einem zweispaltigen inhalt
horizontal zentrieren ist mit margin: auto kein problem, zweispaltige layouts sind mit float kein problem
für all das ist position: absolute hinderlich und nicht empfehlenswert, besonders dann, wenn du kein experte bist und vermutlich die konsequenzen von absoluter positionierung (noch) nicht abschätzen kannst
im übrigen beziehen sich einige der genannten bugs nicht explizit auf den ie7 sondern auf dessen vorgänder der je nach statistik immer noch zwischen 20 und 40% marktanteil hat - den zu vernachlässigen ist ein fehler
-
Hi,
Und was du bemängelt hast ist, dass der code nicht valid ist. Kann ich verstehen, werde ich noch beheben, schön und gut - wenn ich es durch den Validator schicke, sagt der, das es an dem style zeug im head liegt. Ergo hast du doch quasi bemängelt, dass ich das den style ins head geschrieben hab, da eben genau das zu invalidem code führt, richtig?
Nein, wir bemaengeln generell die Dreistigkeit, hier mit nicht validem Code angerannt zu kommen, und dann "Hilfe" zu verlangen.
Valider Code ist *absolute* Grundvoraussetzung fuer eine "funktionierende" Webseite - ohne solchen macht sich kaum ein Mensch, der ueber etwas grundlegende Ahnung verfuegt, auf die Suche nach den Ursachen von Darstellungsfehlern. Und deshalb ist es deine Aufgabe, eher sogar Pflicht, validen Code herzustellen, bevor du zu einem Problem fragst - wenn es dann immer noch bestehen sollte, suchen wir gerne mit dir zusammen nach einer Loesung.
Aber die "das mach ich spaeter noch, erst mal will ich dieses Detailproblem loesen"-Einstellung *ist* nach der Erfahrung vieler hier, die sich schon lange mit der Materie beschaeftigen, absoluter Bloedsinn, weil Zeitverschwendung.
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
-
-
-
Hi ...
so lange du nicht mit überlappenden ebenen arbeitest ...
solltest du für so "einfache" layouts eher auf Position:absolute verzichtengeht relativ einfach mit floats und margins ... das versteht (mit Ausnahmen *grr*) auch der IE ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Besser!?</title> <style type="text/css" > body { background:#0099CC;} #sitearea {position:absolute; top:2%; left:10%; width: 80%; min-width:800px; max-width:1600px; height:90%; min-height:550px; background-color:#ffffff; padding-top:10px; background:#FFFFFF; } #banner {width: auto; margin-left: 10px; margin-right: 10px; padding-left:10px; padding-right:10px; height: 131px; background:#669900;} #box1 { width:125px; height:200px; background:#CC6633; float: left; margin: 20px 20px 0px 10px; } #box2 { width:auto; height:auto; background:none; overflow:auto; background:#9999CC; margin: 20px 10px 30px 0px; } </style> </head> <body> <div id="sitearea"> <div id="banner"> </div> <div id="box1"> </div> <div id="box2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div> </body> </html>@sphinx ... du kannst ja einfach im klartext sagen das die Style anweisungen in den <head> gehören ... ;) War wahrscheinlich eh nur ein copy paste versehen ...
lg
Alexx-
geht relativ einfach mit floats und margins ... das versteht (mit Ausnahmen *grr*) auch der IE ...
was sollte daran der ie nicht verstehen? double-float-margin-left ist kein problem da es dafür einen extrem einfachen workaround gibt, ansonsten hält sich der browser schön an das was passieren soll
-
Hi ...
so lange du nicht mit überlappenden ebenen arbeitest ...
solltest du für so "einfache" layouts eher auf Position:absolute verzichten@sphinx ... du kannst ja einfach im klartext sagen das die Style anweisungen in den <head> gehören ... ;) War wahrscheinlich eh nur ein copy paste versehen ...
lg
AlexxUnd genau da haben wir das Problem. Es überlappen sich bei der website die div, dass es nur so eine wahre Freude ist... Was mach denn in diesem Falle?
-
Hi,
Und genau da haben wir das Problem. Es überlappen sich bei der website die div, dass es nur so eine wahre Freude ist... Was mach denn in diesem Falle?
Das:
solltest du für so "einfache" layouts eher auf Position:absolute verzichten
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."-
Hi,
Und genau da haben wir das Problem. Es überlappen sich bei der website die div, dass es nur so eine wahre Freude ist... Was mach denn in diesem Falle?
Das:
solltest du für so "einfache" layouts eher auf Position:absolute verzichten
MfG ChrisB
Ja und was nehm ich stattdessen?
Mit position:relative komm ich nicht allzu weit - gleiches gilt, wenn ich gar keine positionsangabe mache. Die Box links besteht nämlich aus vier Teilen - im Hintergrund eine Grafik oben / mitte / unten und darüber liegt ein div in dem der ganze Text steht.-
Ja und was nehm ich stattdessen?
photografx hatte bereits gesagt, dass dich die float-eigeschaft interessieren könnte
Mit position:relative komm ich nicht allzu weit - gleiches gilt, wenn ich gar keine positionsangabe mache. Die Box links besteht nämlich aus vier Teilen - im Hintergrund eine Grafik oben / mitte / unten und darüber liegt ein div in dem der ganze Text steht.
wie schon erwähnt, behebe zuerst deine probleme aussen herum, arbeite dich dann nach innen vor
sorge dafür, dass du einen dynamisch wachsenen, sich im textfluss befindlichen container hast der mittels margin: auto; zentriert wurde, dieser container selbst braucht keinerlei positionierung
wenn das zufriedenstellend in jedem browser funktioniert, kannst du dich nach weiter innen vorarbeiten - es ist absolut sinnlos, so zu arbeiten, wie du es tust - "das pferd von hinten aufzäumen" triffts ziemlich gut
also nochmal:
a) valider code (beginnend mit der "ersten zeile")
b) 1 container mittels margin: auto; horizontal zentriert
c)in diesem container 2 elemente mittels float und entsprechender breite (summer der breite dieser beiden elemente = breite des containers) danach d) ein pseudo-element welches den textfluss wieder in ordnung bringt (die fusszeile, die bestimmt kommen wird, eignet sich dafür - die kommt als drittes element auch in den container)-
Ja und was nehm ich stattdessen?
photografx hatte bereits gesagt, dass dich die float-eigeschaft interessieren könnteMit position:relative komm ich nicht allzu weit - gleiches gilt, wenn ich gar keine positionsangabe mache. Die Box links besteht nämlich aus vier Teilen - im Hintergrund eine Grafik oben / mitte / unten und darüber liegt ein div in dem der ganze Text steht.
wie schon erwähnt, behebe zuerst deine probleme aussen herum, arbeite dich dann nach innen vor
sorge dafür, dass du einen dynamisch wachsenen, sich im textfluss befindlichen container hast der mittels margin: auto; zentriert wurde, dieser container selbst braucht keinerlei positionierung
wenn das zufriedenstellend in jedem browser funktioniert, kannst du dich nach weiter innen vorarbeiten - es ist absolut sinnlos, so zu arbeiten, wie du es tust - "das pferd von hinten aufzäumen" triffts ziemlich gut
also nochmal:
a) valider code (beginnend mit der "ersten zeile")
b) 1 container mittels margin: auto; horizontal zentriert
c)in diesem container 2 elemente mittels float und entsprechender breite (summer der breite dieser beiden elemente = breite des containers) danach d) ein pseudo-element welches den textfluss wieder in ordnung bringt (die fusszeile, die bestimmt kommen wird, eignet sich dafür - die kommt als drittes element auch in den container)Ok, ich hab mir mal den link angeschaut, den du in deinen 2. Post gestellt hast (btw. - ich bekomm da im FF die ganze Zeit einen Zertifikatsfehler).
Ich hab das mal ausprobiert - aber für einen Container mit dynamischer Breite und Höhe nicht wirklich hinbekommen.
Zu c.): das wird ein klein wenig schwierig - der Container soll 80% breit sein, die Box links hat eine feste Breite von 124px, die Box rechts soll den rest auffüllen.
zu d.): Ich hab keine Ahnung von was du redest. Was ist ein pseudo-element?
Welcher textfluß muss in Ordnung gebracht werden und warum ist der textfluß "unordentlich"?-
Ok, ich hab mir mal den link angeschaut, den du in deinen 2. Post gestellt hast (btw. - ich bekomm da im FF die ganze Zeit einen Zertifikatsfehler).
das zertifikat musst du nur temporär annehmen, dann sollte es auch keine fehler gebe - funktioniert bei mir in 4 browsern einwandfrei
da du aber nur vertikal mit dynamische breite zentrieren willst, sollte das hier ausreichen - margin: auto funktioniert für alle gänigen browser, auch den ie6 - der übrigens im quirksmode (bei invalidem code) mit dem schnipsel nicht zurecht kommt, min und max-width versteht er aber trotzdem nicht
#container {
width: 80%;
min-width: 500px;
max-width: 1500px;
margin: 0 auto;
}Ich hab das mal ausprobiert - aber für einen Container mit dynamischer Breite und Höhe nicht wirklich hinbekommen.
Zu c.): das wird ein klein wenig schwierig - der Container soll 80% breit sein, die Box links hat eine feste Breite von 124px, die Box rechts soll den rest auffüllen.ich sagte bereits: don't put the cart before the donkey - feste breite und einnehmen der restbreite ist ein nicht minder komplexes thema mit css - verstehe zuerst mal, wie man zwei dynamisch breite elemente nebeneinander packst, bevor du duch an andere dinge wagst - übrigens wird dies im internet explorer 6 nicht funktioneren
pinzipiell funktioniert das so: die rechte spalte hat breite auto und links einen aussenabstand von 124px, die andere spalte ist darin negativ rausgeschoben (um seine eigene breite)
zu d.): Ich hab keine Ahnung von was du redest. Was ist ein pseudo-element?
pseudo - zb <div style="clear: both"></div> - normalerweise würde man das mit :after machen, da hat aber der ie etwas dagegen
Welcher textfluß muss in Ordnung gebracht werden und warum ist der textfluß "unordentlich"?
elemente ausserhalb des textfluss (zb float, position: absolute) wirken sich nicht oder nur noch bedingt auf ihre elternelemente aus - das hat zur folge, dass das umliegende element (der container) nicht mitwächst
-
das zertifikat musst du nur temporär annehmen, dann sollte es auch keine fehler gebe - funktioniert bei mir in 4 browsern einwandfrei
Ich meine ich hätte das im FF3 gemacht - er meckert aber trotzdem jedes Mal wenn ich die Seite aufrufe
(src.selfhtml.org:443 verwendet ein ungültiges Sicherheitszertifikat.Dem Zertifikat wird nicht vertraut, weil das Aussteller-Zertifikat unbekannt ist.
(Fehlercode: sec_error_unknown_issuer))
anzeigen tut er die Seite trotzdem.da du aber nur vertikal mit dynamische breite zentrieren willst, sollte das hier ausreichen - margin: auto funktioniert für alle gänigen browser, auch den ie6 - der übrigens im quirksmode (bei invalidem code) mit dem schnipsel nicht zurecht kommt, min und max-width versteht er aber trotzdem nicht
#container {
width: 80%;
min-width: 500px;
max-width: 1500px;
margin: 0 auto;
}tja - das tut leider bei mir nicht. Ich hab den container div nach einem anderen div im body stehen. Davor steht ein div das eine Hintergrundgrafik enthält, mit position:absolute, da ich es sonst nicht hinbekommen hab, die Grafik komplett oben links in die Ecke zu positionieren - wenn ich es ohne position:absolute mache und den enstehenden Rand mit negativen margins ausgleiche bekomm ich sowohl im FF als auch im IE horizontale scrollbalken.
Wenn ich für den container ein position:relative verwende funktioniert es.Ich hab das mal ausprobiert - aber für einen Container mit dynamischer Breite und Höhe nicht wirklich hinbekommen.
Zu c.): das wird ein klein wenig schwierig - der Container soll 80% breit sein, die Box links hat eine feste Breite von 124px, die Box rechts soll den rest auffüllen.
ich sagte bereits: don't put the cart before the donkey - feste breite und einnehmen der restbreite ist ein nicht minder komplexes thema mit css - verstehe zuerst mal, wie man zwei dynamisch breite elemente nebeneinander packst, bevor du duch an andere dinge wagst - übrigens wird dies im internet explorer 6 nicht funktionerenIch wäre dir dankbar wenn du mir hier keine Lehrstunde erteilen würdest, sondern mir einfach dabei hilfst mein Problem in den Griff zu kriegen. :)
pinzipiell funktioniert das so: die rechte spalte hat breite auto und links einen aussenabstand von 124px, die andere spalte ist darin negativ rausgeschoben (um seine eigene breite)
Das ist nicht das Problem - das Problem ist, wie krieg ich es hin, dass ich über die linke Spalte noch ein div legen kann, ohne position:absolute zu verwenden.
zu d.): Ich hab keine Ahnung von was du redest. Was ist ein pseudo-element?
pseudo - zb <div style="clear: both"></div> - normalerweise würde man das mit :after machen, da hat aber der ie etwas dagegenWelcher textfluß muss in Ordnung gebracht werden und warum ist der textfluß "unordentlich"?
elemente ausserhalb des textfluss (zb float, position: absolute) wirken sich nicht oder nur noch bedingt auf ihre elternelemente aus - das hat zur folge, dass das umliegende element (der container) nicht mitwächst.
-
Ok, ich bin dämlich. Der Groschen ist bei mir endlich gefallen. Ich saß einfach davor und hab die Lösung nicht gesehen... :)
Danke für eure Hilfe! -
Davor steht ein div das eine Hintergrundgrafik enthält, mit position:absolute, da ich es sonst nicht hinbekommen hab, die Grafik komplett oben links in die Ecke zu positionieren
was spricht gegen ein hintergrundbild im body und ggf noch eins im html-element?
Ich wäre dir dankbar wenn du mir hier keine Lehrstunde erteilen würdest, sondern mir einfach dabei hilfst mein Problem in den Griff zu kriegen. :)
wenn du nichts lernst, fragst du nächstes mal wieder und kannst dein problem wieder nicht selbst lösen, das bringt nix
Das ist nicht das Problem - das Problem ist, wie krieg ich es hin, dass ich über die linke Spalte noch ein div legen kann, ohne position:absolute zu verwenden.
warum solltest du das wollen? es ist schlauer sich zu überlegen, was man "darstellen" will, als sich zu überlegen, wie man es darstellen will - überlege zuerst was das ding, das "drüber" soll, aussagen soll
-
-
-
-
-
-
-
-
-
-