zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE: div-Box rutscht in die Fußzeile

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.11.2008, 12:51
mux mux ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.11.2008
Beiträge: 8
mux befindet sich auf einem aufstrebenden Ast
Standard IE: div-Box rutscht in die Fußzeile

Hallo,
ich habe ein Problem, sicher gibt es die Lösung schon irgendwo, aber ich weiß nicht so recht, wie ich danach suchen soll. Als CSS-Anfänger weiß ich z.T. gar nicht, wie ich das Problem beschreiben geschweige denn, mit welchen Suchbegriffen ich suchen muss. Nun denn:

ich habe eine Seite mit mehreren div-Boxen:
-container mit fester Breite (800px)
- darin faux columns "2 Spalten": Navigation und Inhalt
- unten (unter dem container und ebenfalls feste Breite 800px)) feststehend eine Fußzeile (immer am unteren Bildrand, solange ein überlanger Inhalt sie nicht nach unten verschiebt)

So sah's aus, alles funktionierte prima, ging der Inhalt bis nach unten, verschob er die Fußzeile automatisch. Die Höhe der faux columns-Box war auf auto gesetzt.

Nun wollte ich an den unteren Rand der faux columns noch eine Box setzen, eine Grafik, als abgerundeter grafischer Abschluß der faux columns-Box. Die Höhe dieses "Randes" musste ich auf 40px setzen, da das auch die Höhe der Grafik ist.

Bei Firefox und Chrome funktioniert alles weiterhin wie gewünscht, im IE rutscht jetzt aber diese 40px-Grafik über die Fußzeile, und erst danach rutscht die Fußzeile wie gewünscht runter.

Meine Vermutung ist, daß der IE nur mit height:auto in der über der Fußzeile liegenden Box richtig reagiert, aber eigentlich hab ich keine Ahnung, was ich machen muss, um auch im IE den gewünschten Effekt zu erzielen.
Danke für eure Hilfe!
Mux
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.11.2008, 12:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Hier steht, was nötig ist, damit dir geholfen werden kann: http://xhtmlforum.de/40080-f-r-frage...twortende.html
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.11.2008, 14:52
mux mux ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.11.2008
Beiträge: 8
mux befindet sich auf einem aufstrebenden Ast
Standard

ok ok, dachte, die Beschreibung wäre genau genug. Also hier die Codes:

Code:
<div id="container">
	<div id="faux">
		<div id="navi">
		</div>
		<div id="content">
		</div>
	</div>
	<div id="contentbottom">
	</div>
</div>
<div id="footer">
</div>
und

Code:
html, body {
height:100%;
}
/*Container mit fester Breite für Navi und Content*/
#container {
width:800px;
margin:auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
#faux{
width:800px;
background: url(conkachel.jpg) repeat-y;
height:auto;
float:left;
}
#navi {
display:block;
width: 150px;
float:left;
margin: 0.4em 0;
}
#content{
width: 580px;
float:right;
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: 30px;
padding: 0 10px;
}
#contentbottom {
background: url(conbottom.gif) no-repeat;
float:left;
width:800px;
height:40px;
}
#footer {
clear:both;
width: 800px;
height: 25px;
margin:auto;
margin-top:-25px;
}
Ich hoffe, nun ist mein Problem verständlicher. Danke
Mit Zitat antworten
  #4 (permalink)  
Alt 06.11.2008, 15:33
{ 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

Ich sehe keinen Grund, warum #contentbottom das float benötigt, da es genauso breit ist wie die beiden gefloateten Elemente darüber.
Könntest hier gleich clearen. Es ist sowieso sauberer im Container zu clearen:



Davon abgesehen dürfte dein konkretes Problem sein, dass #content 100% Höhe hat UND einen Margin-Bottom, was 100% + 30px ergibt.
__________________
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
  #5 (permalink)  
Alt 06.11.2008, 17:38
mux mux ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.11.2008
Beiträge: 8
mux befindet sich auf einem aufstrebenden Ast
Standard

Hey, erstmal danke für die schnelle Antwort. Leider lösen deine Tipps mein Problem nicht auf.

Zitat:
Zitat von andir Beitrag anzeigen
Ich sehe keinen Grund, warum #contentbottom das float benötigt, da es genauso breit ist wie die beiden gefloateten Elemente darüber.
Könntest hier gleich clearen. Es ist sowieso sauberer im Container zu clearen:
Das hatte ich auch gedacht. Wenn ich hier gleich cleare, taucht aber das Problem, das ich beim IE habe, auch bei den übrigen Browsern auf: Die #contenbottom-Grafik legt sich über den Footer statt ihn runter zu schieben.

Zitat:
Davon abgesehen dürfte dein konkretes Problem sein, dass #content 100% Höhe hat UND einen Margin-Bottom, was 100% + 30px ergibt.
Nein, das Problem hat mit dem margin nichts zu tun bzw. auch wenn ich den margin rausnehme, bleibt das Problem bestehen.

Im Link-Tipp von Corina unter Aktuelles | Webdesign mit XHTML und CSS fand ich etwas zu einem Problem vom IE mit der Eigenschaft min-height bzw. height. Kann diese Sache vielleicht mit meinem Problem zusammenhängen? Wie gesagt, bei meinem Container mit der auto-height gab es das Problem nicht, bei der conntenbottom-Box mit der festen Höhe jedoch schon...
Grüße
Mux
Mit Zitat antworten
  #6 (permalink)  
Alt 06.11.2008, 18:14
{ 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

Dann wäre es sinnvoll, wenn Du eine lauffähige HTML-Datei auf irgendeinen Testwebspace packst und hier verlinkst. ( Mach halt "verräterische" Angaben raus.)
So kann ich dein Problem nicht nachvollziehen.
__________________
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
  #7 (permalink)  
Alt 06.11.2008, 19:14
mux mux ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.11.2008
Beiträge: 8
mux befindet sich auf einem aufstrebenden Ast
Standard

ok, schau mal auf test

wenn ich das Browserfenster verkleinere, rückt die gelbe Zeile nach unten. wenn sie den Footer berührt:
beim IE schiebt sich die gelbe Zeile über bzw. unter den Footer.
bei firefox und chrome schiebt die gelbe Zeile den Footer bei Berührung aus dem viewport heraus --> so soll es auch sein.

Und nun hab ich leider auch noch entdeckt, dass opera sofort bei Verkleinerung des Fensters den Footer aus dem Bild schiebt...Himmel hilf...
Mit Zitat antworten
  #8 (permalink)  
Alt 06.11.2008, 19:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von mux Beitrag anzeigen
ok, schau mal auf test

wenn ich das Browserfenster verkleinere, rückt die gelbe Zeile nach unten. wenn sie den Footer berührt:
beim IE schiebt sich die gelbe Zeile über bzw. unter den Footer.
bei firefox und chrome schiebt die gelbe Zeile den Footer bei Berührung aus dem viewport heraus --> so soll es auch sein.
Nimm das Clear beim Footer weg.
Cleare innerhalb von #container, z.B. mit einem hr-Element. Gib diesem Element eine passende Höhe,

Zitat:
Und nun hab ich leider auch noch entdeckt, dass opera sofort bei Verkleinerung des Fensters den Footer aus dem Bild schiebt...Himmel hilf...
Das ist normal. Opera braucht einen Reload.
Mit Zitat antworten
  #9 (permalink)  
Alt 06.11.2008, 20:25
mux mux ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.11.2008
Beiträge: 8
mux befindet sich auf einem aufstrebenden Ast
Standard

Hallo Corina,
ja, so funktioniert's. Weiß nicht, ob ich's jetzt auch so gemacht habe, wie du meintest: ich hab jetzt unter die gelbe Zeile eine 10px hohes hr-Element eingefügt, in dem dann auch gecleart wird. Das ganze auf visibility:hidden und nun schiebt auch im IE die gelbe Box den Footer bei Berührung weg.
Danke schön!
Noch ein kleines neues Problemchen dabei: bei chrome hüpft der Footer nun beim Fenster vergrößern und verkleinern manchmal einfach raus, bleibt weg, und manchmal kommt er wieder...ganz als hätte er einen eigenen Willen
Kann man das auch noch ändern bzw. würde ich gern verstehen, was es mit diesem scheinbar willkürlichen Verschwinden auf sich hat.
Grüße, Mux
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 06.11.2008, 20:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

10px ist keine passende Höhe. Du musst Platz in Höhe des Footers schaffen!
Dein Online-Code ist nicht aktualisiert.
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


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Header entfernen tripple CSS 17 15.06.2010 16:41
#boxes a:hover.info: 2.posting mit css !!! marioN CSS 5 25.01.2004 18:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, marioN CSS 2 19.01.2004 18:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:33 Uhr.