Hi allerseits,
ich "quäle" mich seit geraumer zeit mit einem "footer" der eine bestimmte höhe haben und "unten" fixiert sein soll. Ich habs wie folgt umgesetzt:
<!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>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
html, body {
height:100%;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin:0px;
}
-->
</style>
</head>
<body>
<div style="height:100%; width:100%; margin:0px; padding:0px; background-color:#000000;" align="center">
<table border="0" cellpadding="0" cellspacing="0" style="height:100%; width:100px; margin:0px; padding:0px; background-color:#6699FF;">
<tr>
<td style="height:20px; background-color:#6666FF; "> </td>
</tr>
<tr>
<td style="background-color:#669999; "> </td>
</tr>
<tr>
<td style="height:20px; background-color:#FF0000; "> </td>
</tr>
</table>
</div>
</body>
</html>
Das Dokument ist valides XHTML 1.0 Transitional
Bild: steinhauer-gmbh.net/…/firefox_test.jpg
(so schauts aus mit Firefox 1.0 - RICHTIG!)
Bild: steinhauer-gmbh.net/…/IE_test.jpg
(und so mit Internet Explorer 6.0 - FALSCH!)
Nun meine Frage: warum zum teufel verdaut es der IE nicht... obwohl "Das Dokument ist valides XHTML 1.0 Transitional" ? ..also ich hab schon viel gegoogelt aber wie man sieht komme ich nicht weiter, und da dieses Beispiel die Basis für mein Typo3-Projekt werden soll.. bitte ich hier um Hilfe #paralyzed#
ich hoffe auf Tipps oder Lösungsvorschläge...
MfG n-joy
ALso zuerst mal: Nur weil was XHTML valide ist, heißt das noch lange nicht, dass IE, Firefox & Co das alle ident anzeigen 🙂
Und ich hab das ganze schnell mal als html bei mir angeschaut, und da kann der IE 6 das ganz perfekt..
Sonst könntest du ja mal folgendes machen: die 20px Höhe der Zelle direkt zuteilen und wenn das nicht hilft, dann würd ich mal die 100% Höhe weglassen....(wie soll das eigentlich ausschauen, wenn auf der Seite mehr Inhalt ist, als die Seite hoch ist oder wer eine 800x600 Auflösung hat??? Immer gefährlich die Prozente)
georg
Hi,
just2b schriebALso zuerst mal: Nur weil was XHTML valide ist, heißt das noch lange nicht, dass IE, Firefox & Co das alle ident anzeigen 🙂
eben doch... das ist ja auch irgendwo sinn des ganzen ?!
Und ich hab das ganze schnell mal als html bei mir angeschaut, und da kann der IE 6 das ganz perfekt..
also auf XHTML werd ich nich verzichten 😉
Sonst könntest du ja mal folgendes machen: die 20px Höhe der Zelle direkt zuteilen und wenn das nicht hilft, dann würd ich mal die 100% Höhe weglassen....(wie soll das eigentlich ausschauen, wenn auf der Seite mehr Inhalt ist, als die Seite hoch ist oder wer eine 800x600 Auflösung hat??? Immer gefährlich die Prozente)
georg
- höhe direkt zuteilen ? height="20" ? ...gleicher Effekt #paralyzed# 😢
- 100% höhe brauche ich, damit das untere TD(20px) auch unten bleibt, egal wie groß das Fenster ist...
- wenn inhalt größer wird, dann kann man in das mittlere TD "scrolling" per css einbauen oder halt die gesammte seite scrollen lassen...
Aber wie gesagt, ich bekomme das so mit DOCTYPE nicht hin, ergal ob XHTML oder HTML 4.01 es geht immer nicht (mit IE) !
also, weitere vorschläge ? ^^
MfG n-joy
naja dass das der Sinn des ganzen ist, das ist mir schon bekannt.... aber es ist ein Irrglaube, wenn man stur drauf pocht... 🙂
Ich wollts nur schnell bei mir testen, deswegen in html, dass du nicht auf xhtml verzichten willst ist mir klar 🙂
Hm weitere Vorschläge: Weiß jetzt nicht wo ich das herhab, aber teil die Höhe nochmals direkt zu und schreib mei der mitleren Zeile "auto" oder "'*" rein... (oder red ich da grad nen Blödsinn...) aber ausprobierien ist kostenlos 🙂
<tr>
<td height="20" style="background-color:#6666FF; "> </td>
</tr>
<tr>
<td height="auto" style="background-color:#669999; "> </td>
</tr>
<tr>
<td height="20" style="background-color:#FF0000; "> </td>
</tr>
...falsche darstellung im IE
<tr>
<td height="20" style="background-color:#6666FF; "> </td>
</tr>
<tr>
<td height="*" style="background-color:#669999; "> </td>
</tr>
<tr>
<td height="20" style="background-color:#FF0000; "> </td>
</tr>
...falsche darstellung im IE
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height:100%; width:100px; margin:0px; padding:0px; background-color:#6699FF;">
<tr>
<td height="20" style="background-color:#6666FF; "> </td>
</tr>
<tr>
<td height="auto" style="background-color:#669999; "> </td>
</tr>
<tr>
<td height="20" style="background-color:#FF0000; "> </td>
</tr>
</table>
...(ohne DIV vor TABLE) falsche darstellung im IE
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height:100%; width:100px; margin:0px; padding:0px; background-color:#6699FF;">
<tr>
<td height="20" style="background-color:#6666FF; "> </td>
</tr>
<tr>
<td height="*" style="background-color:#669999; "> </td>
</tr>
<tr>
<td height="20" style="background-color:#FF0000; "> </td>
</tr>
</table>
...(ohne DIV vor TABLE) falsche darstellung im IE
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height:100%; width:100px; margin:0px; padding:0px; background-color:#6699FF;">
<tr>
<td style="height:20px; background-color:#6666FF; "> </td>
</tr>
<tr>
<td style="height:auto; background-color:#669999; "> </td>
</tr>
<tr>
<td style="height:20px; background-color:#FF0000; "> </td>
</tr>
</table>
...(ohne DIV vor TABLE) falsche darstellung im IE
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height:100%; width:100px; margin:0px; padding:0px; background-color:#6699FF;">
<tr>
<td style="height:20px; background-color:#6666FF; "> </td>
</tr>
<tr>
<td style="height:*; background-color:#669999; "> </td>
</tr>
<tr>
<td style="height:20px; background-color:#FF0000; "> </td>
</tr>
</table>
...(ohne DIV vor TABLE) falsche darstellung im IE
*ratlos* #paralyzed#
und dass du die 100% weglässt und der mittleren zeile einfach mal 600px gibst, also auf eine AUflösung anpasst und wenn mehr Inhalt ist, dann ists ja so oder so immer ganz unten?
sonst musst dich mit divs und css befassen, da kenn ich mich nicht aus, wie man da was ganz unten definiert ;/
just2b schriebund dass du die 100% weglässt und der mittleren zeile einfach mal 600px gibst, also auf eine AUflösung anpasst und wenn mehr Inhalt ist, dann ists ja so oder so immer ganz unten?
sonst musst dich mit divs und css befassen, da kenn ich mich nicht aus, wie man da was ganz unten definiert ;/
das versuche ich auch gerade, mit DIV und dann per CSS "unten" zu "fixieren" ^^
wenn ich die lösung habe poste ich sie.. bis dahin: lesen und testen #paralyzed#
Ich habe gerade seit vielen Wochen ähnliche Probleme: Dem IE sind bei "position:absolute" Höhen- und Breitenangaben per "height" und "width" scheinbar sch..egal. Wenn man das "postion: absolute"entfernt, ist die Box zwar so groß wie ich sie haben wollte, aber an der falschen Stelle. :-(
Ein "gutes" Beispiel für meine Probleme findet man unter www.bellowski.de.
Wenn es nur den Mozilla/Firefox gäbe, wäre das alles so einfach mit dem XHTML.
Hi,
also ich wollte, dass der "Content-div(in der mitte des Fensters)" den gesammten platz zwischen "header-div(am oberen Rand fixiert)" und "footer-div(am unteren Rand fixiert)" ausfüllt ... dabei aber keine der div's überlappen !
Und nun, nach langem suchen und recherchieren, habe ich nur eine Antwort auf mein Problem: es gibt keine CSS-only Lösung die mit dem IE kompatibel ist o.O (mit JavaScript würde es gehen, aber ich wills ohne)
die einzigen halbwegs brauchbaren Beispiele die ich gefunden habe:
- http://www.stunicholls.myby.co.uk/layouts/3cols2.html
- http://www.sbox.tugraz.at/home/h/hacki/html-und-css/samples/simple_footer.html
- http://limpid.nl/lab/css/fixed/footer
Ansonten empfehle ich folgende Links:
- http://jendryschik.de/wsdev/css/fixed/
- http://www.css-technik.de/
- http://de.selfhtml.org/css/eigenschaften/positionierung.htm
- http://devnull.tagsoup.com/fixed/
sooo, ich vergesse meinen alten Threads nicht, daher hier die Lösung:
ein server-seitiger Internet Explorer Hack:
http://dean.edwards.name/IE7/
..auf deutsch:
http://www.fabrice-pascal.de/bugbase/posfixedie6/
MfG
hier noch mein css/html-code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>IE7 test</title>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]><script src="ie7/ie7-standard-p.js" type="text/javascript"></script><![endif]-->
<style type="text/css">
body {
margin:0px;
padding:0px;
height:100%;
}
#header {
position: fixed;
background: blue;
color: white;
top:0px;
width: 100%;
height:30px;
}
#footer {
position: fixed;
background: red;
color: white;
bottom:0px;
width: 100%;
height:30px;
}
#content {
position:fixed;
background: #FFCCAA;
top:30px;
bottom:30px;
right:10%;
left:10%;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</body>
</html>
vorteile:
- 100%ig alles möglich an layoutdesign
- funktioniert sogut wie mit allen browsern(kenne keinen wo es fehlerhaft dargestellt wird)
- This Page Is Valid XHTML 1.1!
- keine TABLE-tags
- wenig code
- und so "ganz nebenbei" wird auch der png-bug im MSIE behoben
nachteile:
- MSIE(MicroSoft Internet Explorer) 5.x und höher MUSS javascript "aktiviert" haben, sonst wirds falsch dargstellt !
MfG n-joy
nachteile:
- MSIE(MicroSoft Internet Explorer) 5.x und höher MUSS javascript "aktiviert" haben, sonst wirds falsch dargstellt !
Und noch ein ganz großer Nachteil :
Bei jedem Laden der Seite im IE werden erstmal die ganzen Java-Scripte durchgerattert, bis der IE fixed versteht.
Und das dauert einfach zu lange,
daher nicht wirklich zu gebrauchen,
der Dean Edwards - Hack.
jenses