Pagina werkt wel in Firefox maar niet in IE 6.0

dejojo · 9 feb 2007

Onderstaande pagina werkt wel goed in Firefox maar niet in IE 6.0?
In Firefox schuift de footer mooi naar boven of beneden en de pagina past zich aan aan de resolutie van de browser. Pagina vult altijd het volledige browservenster (in mijn geval 99%, maar dat is een bewuste keuze)

In I.E. 6.0 schuift de footer niet naar boven of beneden en past de pagina zich niet aan aan de resolutie van de browser. Mijn vraag is hoe ik dit voor IE 6.0 ook werkend kan krijgen?

Onderstaand heb ik de HTML-code toegevoegd en de betreffende CSS-code:

Voor het gemak heb ik de css-code tussen de Head-tags geplaatst. Dus als je deze code kopieert en plakt, dan zie je wat ik bedoel en misschien kun je me dan helpen ....

CODE

HTML:

<!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=iso-8859-1" /> 
<title>proef</title> 
<style type="text/css"> 
html {height: 99%; } 

body { background-color: #000000; height: 99%;} 

#layout {height: 100% } 
#main {height: 100% } 
#left {height: 100% } 

.table_main {border: 1px solid #CCCCCC; background-color: #ffffff;} 

.td_menu_left { 
background-color: #c4d5d1; 
} 
.td_footer { 
background-color: #CC9900; 
} 

.table_main_content { 
background-color: #ffffff; 
border-top-style: none; 
border-right-style: none; 
border-bottom-style: none; 
border-left-style: none; } 

.td_top_left { 
background-color: #000000; 
} 
.td_top_right { 
background-color: #000000; 
} 

</style> 
</head> 
<body> 

<table id="layout" width="760" border="0" align="center" cellpadding="0" cellspacing="0" class="table_main"> 
<!--DWLayoutTable--> 

<tr> 
<td height="69" colspan="2" valign="top" class="td_top_left" ><!--DWLayoutEmptyCell-->&nbsp;</td> 
<td width="507" valign="top" class="td_top_right"><!--DWLayoutEmptyCell-->&nbsp;</td> 
</tr> 
<tr> 
<td height="33" colspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="table_menu_top"> 
<tr> 
<td width="758" height="25" valign="top" bgcolor="#339933"><!--DWLayoutEmptyCell-->&nbsp;</td> 
</tr> 
</table></td> 
</tr> 
<tr> 
<td id="left" width="159" valign="top" class="td_menu_left"><!--DWLayoutEmptyCell-->&nbsp;</td> 
<td colspan="2" valign="top"><table id="main" width="100%" border="0" cellpadding="5" cellspacing="5" class="table_main_content"> 
<!--DWLayoutTable--> 
<tr> 
<td width="579" height="402" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> 
<!--DWLayoutTable--> 
<tr> 
<td width="579" height="359">&nbsp;</td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
</tr> 

<tr> 
<td height="23" colspan="3" valign="top" class="td_footer"><!--DWLayoutEmptyCell-->&nbsp;</td> 
</tr> 
<tr> 
<td height="1"></td> 
<td width="92"></td> 
<td></td> 
</tr> 
</table> 

</body> 
</html>

-------------------------

Alvast bedankt!

[Moderator-Edit] Html-tag toegevoegd. [/Edit]

peter vazed · 13 feb 2007

Google met
screen-height 100% css
bv deze
http://216.239.59.104/search?q=cach...ml+screen-height+100%+css&hl=en&ct=clnk&cd=14

Daar tref je deze code:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html, body, #container {
min-height: 100%; /* Not supported by IE 5/6, but required for Firefox/Opera */
width: 100%;
height: 100%;
}
/***************************************************************************
* The "height" above is a hack for IE5+/Win. Below it's adjusted using
* the child selector to hide from IE5+/Win.
* Without this, Moz1.0 adds a vertical scrollbar, & Firefox1.0/Opera7.54
* cover everything with the footer when the viewport gets too small.
***************************************************************************/
html>body, html>body #container {
height: auto;
}
body {
margin: 0;
}
#container {
position: absolute;
top: 0;
left: 0;
background-color: #cfc;
}
#main {
margin-bottom: 150px;
height: auto;
}
#header {
width: 100%;
height: 150px;
border-bottom: 1px solid black;
background-color: #fcc;
}
#tab {
width: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0;
border-top: 1px solid black;
width: 100%;
height: 150px;
background-color: #ccf;
}
</style>
</head>

<body>
<div id="container">
  <div id="main">
    <div id="header">Top</div>
    <div id="tab">Middle</div>
  </div>
  <div id="footer">Bottom</div>
</div>
</body>
</html>

!00% height werkt dus in IE en FF anders,

Pagina werkt wel in Firefox maar niet in IE 6.0

dejojo

Gebruiker

peter vazed

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy