zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE 6/7 Footer rutscht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.08.2010, 08:11
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.07.2009
Ort: Wanne-Eickel
Beiträge: 223
TanjaP. befindet sich auf einem aufstrebenden Ast
Standard IE 6/7 Footer rutscht

Ich habe meine Seiten mal gründlich entdivt und nach dieser Vorlage umgebaut; musste jedoch einige Änderungen machen, weil mein Footer transparent ist.
Auf der linken Seite habe ich eine Grafik per background eingebunden, darunter steht ein ©2004-2010 welches per span aus dem Menu eingebunden wird.
In den gängigen Browsern sieht alles ok aus, im IE6/7 wird jedoch das Menü zu hoch gesetzt und das ©rutscht in die Grafik.
Habe dem Menu im Hack schon testweise Höhe gegeben, was aber leider nicht geholfen hat.
Der relevante css-Teil:
Code:
html {
background : #ffffcc;
background-image : url('/hp/verlauf.gif');
background-position : top left;
height : 100%;
padding : 0;
margin : 0;
background-attachment:fixed;
}
body {
font-family:  "Book Antiqua", Georgia, Arial, sans-serif;
text-align : center;
color : #008080;  
padding: 0;
margin: 0;
height: 100%;
  	}
#container {	
background-image : url('/hp/seite.gif');
background-attachment:fixed;
background-position : right;
background-repeat : no-repeat;
padding-bottom : 6.3em;
}

#content {
width: 100%;
}
#inhalt {
margin-left : 160px;
text-align: center;
}

#footer {
background-color : #ffffcc;
background-image : url('/hp/footerlogo.gif');
background-repeat : no-repeat;
background-position : left;
width: 100%; 
position: fixed;
left: 0;
bottom: 0;
height: 6em;
	
}
#footer-inner{}


/* ======================================
Hacks für IE´s
====================================== */

* html body {
		height: 100%;
		overflow: hidden;
	}
	
* html #container{
	overflow: auto;
	height: 100%;
	}
*html #inhalt {
margin-left : 150px;
margin-right: 17px;
}	

* html #footer {
	position: absolute;
	height: 5.4em;
	h\eight: 6em;
	}

* html #footer-inner {
	margin-right: 17px;
	/*height: 110px;*/
	}
/* ======================================
Menu im Footer und copyright/anker
====================================== */

.menu {
margin : auto;
width : 45em;
height : 10%;
text-align : center;
}
.menu ul {
margin-top : 0.063em;
}
.menu li {
margin : 0.063em;
display : block;
background-image : url('/hp/footerbutton.gif');
float : left;
color : teal;
width : 128px;
height: 20px;
}
.menu  a:hover {
font-style : italic;
}
.menu .aktiv {
font-style : italic;
font-weight : bold;
color : #ff6600;
}
a {
color : #008080;
text-decoration : none;
}

.anker {
font-style : italic;
font-size: 0.8em;
float: right;
margin-right: 3px;}

.copy {
font-style : italic;
font-size: 0.6em;
color: #9af3cf;
float: left;
margin-left: 6px;
margin-top: 42px;}
und die betreffende Seite.
Ich weiß, das es nicht besonders gut lesbar ist, es soll auch einfach nur "da" sein und die Schrift im Footer muss ich kleiner machen, sonst bricht der Text teilweise um.
Helft Ihr mir auf die Sprünge?

Tanja
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.08.2010, 12:41
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Gib #footer-inner mal testweise Layout per zoom: 1; und verwende bei .copy padding-top statt margin-top.

Und welchen Sinn hat height: 10%; bei .menu? Abgesehen davon, dass es eh flach fällt, da #footer-inner keine height-Deklaration hat.

Außerdem siehe [FAQ]FAQ[/FAQ] "CSS-Prolog".

Edit: Erledige letzteren Punkt als erstes, und passe immer auf, wenn Du margin-top einsetzt, Stichwort "collapsing margins".
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Geändert von heiko_rs (24.08.2010 um 12:46 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.08.2010, 13:38
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.07.2009
Ort: Wanne-Eickel
Beiträge: 223
TanjaP. befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Gib #footer-inner mal testweise Layout per zoom: 1;
hat nichts geändert
Zitat:
verwende bei .copy padding-top statt margin-top.
das auch nicht
Zitat:
Und welchen Sinn hat height: 10%; bei .menu?
war noch css-Leiche aus dem alten Stylesheet
Zitat:
Außerdem siehe FAQ "CSS-Prolog".
genau wie Du gesagt hast, es sah dann überall verrutscht aus, hab´s angepasst und jetzt gehts.

Danke
Tanja
Mit Zitat antworten
  #4 (permalink)  
Alt 24.08.2010, 13:50
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

zoom: 1; für sämtliche divs ist allerdings eh nicht verkehrt (natürlich nur für IE < 8 ) - div { zoom: 1; } Nur in Ausnahmefällen muss man dies mal für ein einzelnes div per "normal" zurücksetzen - wann das nötig ist, merkt man dann schon

collapsing margins ist dennoch ein wichtiges Thema - man muss immer vorsichtig sein, wenn man einem "first-child" margin-top gibt, denn falls es nicht floatet o.ä., kann es sein Elternelement runterrutschen lassen, sofern dieses nicht z.B. border-top oder padding-top hat. Du hattest einige entsprechende Kandidaten im CSS (wenngleich nicht Dein Copyright-span, da dieses floatet).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 24.08.2010, 13:56
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 heiko_rs Beitrag anzeigen
zoom: 1; für sämtliche divs ist allerdings eh nicht verkehrt (natürlich nur für IE < 8 ) - div { zoom: 1; } Nur in Ausnahmefällen muss man dies mal für ein einzelnes div per "normal" zurücksetzen - wann das nötig ist, merkt man dann schon
Arg, Heiko, das meinst du doch nicht ernst? Pauschalhacks?
Damit macht man mindestens so viel kaputt wie gut.
Mit Zitat antworten
  #6 (permalink)  
Alt 24.08.2010, 14:09
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Arg, Heiko, das meinst du doch nicht ernst? Pauschalhacks?
Doch, wenn man weiß was man tut Wenn ich eine neue Seite schreibe, mache ich das immer so, weil ich genau weiß, wo hasLayout bei divs kontraproduktiv wäre (und es dann zurücksetze).

Oder momentan bei einer sehr umfangreichen CMS-Website, deren CSS ich komplett neu schreibe, habe ich dasselbe gemacht. Denn dieses CMS hat so unendlich viele divs, und die alle gezielt zu erfassen, würde halt ewig dauern (und bisher musste ich bei keinem einzigen dieser divs hasLayout zurücksetzen).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 24.08.2010, 14:16
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

Sorry, ich halte das für absolut keine gute Idee -- unabhängig vom Projektumfang und Wissen des Ausführenden.

hasLayout/zoom ist ein Hack. Ich bin der Überzeugung, diese (unvermeidlichen) Hacks sollten nur gezielt eingesetzt werden -- und kommentiert werden. Damit man auch später noch weiß, was man warum getan hat.
Mit Zitat antworten
  #8 (permalink)  
Alt 24.08.2010, 14:24
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
hasLayout/zoom ist ein Hack.
Ja, aber ich fühle mich bei meinen Projekten wohler, wenn alle divs, die hasLayout bekommen dürfen (und das sind fast immer alle), es auch tatsächlich bekommen. So kann man das ja auch kommentieren, und ebenfalls eine hasLayout-Zurücksetzung (z.B. damit das betreffende div nicht komplett neben einen Float rutscht o.ä.).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #9 (permalink)  
Alt 24.08.2010, 14:29
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

Nein, tut mir leid -- absolut keine Zustimmung.
Viel zu extrem sind die Auswirkungen von hasLayout.

Mit der gleichen Begründung könnte man allen Elementen overflow:hidden geben -- man weiß ja, was man tut und kann es gegebenenfalls zurücksetzen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.08.2010, 14:45
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

overflow: hidden; mit seinen extremen Risiken ist allerdings imho nicht vergleichbar mit hasLayout, und außerdem betrifft letzeres ja auch nicht alle Browser, sondern nur den IE < 8.

Und wie gesagt, für mich ist die Alternative, entweder gebe ich allen divs pauschal hasLayout, und setze es für diejenigen zurück, die es nicht haben dürfen, oder ich gebe es allen, die es haben dürfen, gezielt per Selektor. Aber unterm Strich wäre das Ergebnis dasselbe, d.h. von z.B. 20 divs hätten 19 hasLayout.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
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
Footer container werden untereinander dargestellt... Ntracks CSS 10 07.08.2010 19:24
cssstickyfooter.com | horizontales Scrollen --> Footer verschwindet daigo CSS 0 19.05.2009 11:56
Footer im Blog rutscht hoch wuntzt CSS 4 28.01.2008 17:33
Layout - footer und layer[links] - Probleme - (CSS-Anfänger) Basti_LRT CSS 1 08.10.2007 23:03
Footer Problem blub19 CSS 6 25.01.2005 12:46


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