Div Ausrichtung in IE und FF unterschiedlich

[Jason]

Hallo,

ich bastel gerade an einem Template, dass oben und unten geweils eine Grafik hat und dazwischen einen Content-Bereich. Mein bisheriger Versuch ist eine Mischung aus Tabelle und div-Elementen. Allerdings wird die untere Grafik im IE zu weit unten angezeigt, so dass Scrollbalken auftauchen.

  
  <table cellpadding="0" cellspacing="0" width="100%">  
   <tr>  
    <td>  
     <!-- add header -->  
     <div id="header" />  
    </td>  
   </tr>  
   <tr>  
    <td height="100%" valign="top">  
Content-Bereich  
  
    </td>  
   </tr>  
   <tr>  
    <td>  
     <!-- add footer -->  
     <div id="footer" />  
    </td>  
   </tr>  
  </table>  

Und hier noch das passende CSS:

  
#header {  
 clear: both;  
 background-position:top;  
 background: url(../resources/images/header.gif);  
 height:48px;  
 width:100%;  
 padding:0;  
 overflow: none;  
}  
#footer {  
 clear: both;  
 background-position:top;  
 background: url(../resources/images/footer.gif);  
 height:48px;  
 width:100%;  
 padding:0;  
 overflow: none;  
}  

[suit]

Mein bisheriger Versuch ist eine Mischung aus Tabelle und div-Elementen. Allerdings wird die untere Grafik im IE zu weit unten angezeigt, so dass Scrollbalken auftauchen.

entscheide dich tabelle oder div-konstruktion, wobei die entscheidung auf div-konstruktion fallen soll

welche grafik zu weit unten angezeigt wird, kann ich aus deinem code nicht ausmachen - da gibts keine grafiken

ohne tabelle "reduziert" sich dein html sinnigerweise auf folgendes - das ist dann auch einfacher

  
<div id="container">  
  <div id="header"></div>  
  <div id="content"></div>  
  <div id="footer"></div>  
</div>  

auch in diesem code gibts keine bilder - wenn du damit dann beim formatieren probleme hast, poste bitte den code inklusive der relevanten informationen (am besten ein online-beispiel) dann kann man dir auch besser helfen

[Jason]

entscheide dich tabelle oder div-konstruktion, wobei die entscheidung auf div-konstruktion fallen soll

Natürlich gibt es in meinem Code Grafiken. Schau doch mal in den CSS-Teil ;-) An deinem Beispiel wäre ebenfalls der CSS-Teil interessant.

[suit]

entscheide dich tabelle oder div-konstruktion, wobei die entscheidung auf div-konstruktion fallen soll

Natürlich gibt es in meinem Code Grafiken. Schau doch mal in den CSS-Teil ;-) An deinem Beispiel wäre ebenfalls der CSS-Teil interessant.

in deinem code gibt es hintergrundgrafiken, aber es gibt keine grafik im html die direkt per <img /> eingebunden ist (das ist auch gut so)

der css-teil wird schwierig, wenn man nicht weiss wies aussehen sollte - aber so zb:

  
  
#container {  
  width: 800px;  
}  
  
#header {  
 height: 48px;  
 background: url(../resources/images/header.gif);  
}  
  
#footer{  
 height: 48px;  
 background: url(../resources/images/footer.gif);  
}  

es ist wichtig sich in erster linie das design und den inhalt zu überlegen und daraus semantisch vernünftigen html-code zu produzieren (mit dem design im hinterkopf, um die seitenelemente halbwegs zu gruppieren)

wenn das halbwegs fertig ist, kann man beginnen

[Jason]

entscheide dich tabelle oder div-konstruktion, wobei die entscheidung auf div-konstruktion fallen soll

wenn das halbwegs fertig ist, kann man beginnen

Das Design steht in meinem Kopf, nur bei der Umsetzung hapert es. Soll auch ganz einfach gehalten sein. Ganz oben im sichtbaren Bereich des Browserfesnters ist die Header-Grafik zu sehen. Ganz unten im sichtbaren Bereich ist die Footer-Grafik zu sehen. Der Content-Bereich soll ich also auf 100% der Höhe erstrecken (header und footer abgezogen).

[suit]

Das Design steht in meinem Kopf, nur bei der Umsetzung hapert es. Soll auch ganz einfach gehalten sein. Ganz oben im sichtbaren Bereich des Browserfesnters ist die Header-Grafik zu sehen. Ganz unten im sichtbaren Bereich ist die Footer-Grafik zu sehen. Der Content-Bereich soll ich also auf 100% der Höhe erstrecken (header und footer abgezogen).

der content-bereich soll 100% hoch abzüglich der höhe von header und footer sein, sehe ich das richtig?

du meinst also sowas:
http://gut.lv/beispiel/stickself.html

dass die idee ansich aber schlecht ist (einen footer am unteren ende des viewports kleben zu lassen) solltest du dir auch nochmal vor augen halten: sieht etwas dämlich aus in großen viewports - ein browser ist kein drucker, von der seite ist es nie gut, drucklayouts 1:1 in einem browser umsetzen zu wollen
http://www.rebell.at/temp/1050x1680_pivot_sticky_footer.png

[Jason]

du meinst also sowas:
http://gut.lv/beispiel/stickself.html

Genau das habe ich gesucht. Die Grafik, die unten angezeigt wird, wird lediglich 25px hoch sein. Von daher sollte das schon passen :-)

[suit]

Genau das habe ich gesucht. Die Grafik, die unten angezeigt wird, wird lediglich 25px hoch sein. Von daher sollte das schon passen :-)

auch wenn die grafik lediglich 25px hoch sein wird - ich nehme ich das auf meinem monitor garnicht mehr bewusst wahr und wenn doch, dann schmunzle ich, weil wieder irgend ein "fähiger webdesigner" versucht hat, ein funktionierendes papier-layout in ein nicht funktionierendes hypertext-layout zu zwängen - wenn du dich also nicht blamieren willst, versuche derartiges zu vermeiden ;)