ultrus Posted July 7, 2008 Share Posted July 7, 2008 Hello, I made a template that includes a header and footer, stretching 100% high. It works great in FireFox, Safari, etc, but in IE the header and footer are stretching out of what is required. I created a simplified concept of my template that demonstrates the issues I'm having below. If I remove the doctype everything looks ok. However I need to keep in place so that other features can work properly. Any ideas on how to resolve this? Thanks much for the assist, Page can be seen here: ultran.info/test.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=UTF-8" /> <title>CSS height: 100%; Test</title> <style> body, html { height: 100%; margin: 0px; background-color: #000000; } table { padding: 0px; border-spacing: 0px; border-width: 0px; width: 100%; border-collapse: collapse; margin: 0px; } td { padding: 0px; border-spacing: 0px; border-width: 0px; vertical-align: top; text-align: left; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10pt; margin: 0px; } </style> </head> <body> <table style="width: 100%; height: 100%;"> <tr> <td id="left" style="background-color: #999999;"> </td> <td id="center" style="width: 400px; height: 100%;"> <table style="height: 100%; width: 100%;"> <tr> <td style="height: 80px; background-color: #FF9900;"> height: 80px; </td> </tr> <tr> <td style="background-color: #CC0000;"> height: (not specified - looks great in FireFox, causes odd stretching in IE, unless doctype is removed) </td> </tr> <tr> <td style="height: 30px; background-color: #FF9900;"> height: 30px; </td> </tr> </table> </td> <td id="right" style="background-color: #999999;"> </td> </tr> </table> </body> </html> Here is a simpler version doing the same thing: url: ultran.info/test2.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=UTF-8" /> <title>CSS height: 100%; Test</title> <style> body, html { height: 100%; margin: 0px; background-color: #000000; } table { padding: 0px; border-spacing: 0px; border-width: 0px; width: 100%; border-collapse: collapse; margin: 0px; } td { padding: 0px; border-spacing: 0px; border-width: 0px; vertical-align: top; text-align: left; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10pt; margin: 0px; } </style> </head> <body> <table style="height: 100%; width: 100%;"> <tr> <td style="height: 80px; background-color: #FF9900;"> height: 80px; </td> </tr> <tr> <td style="background-color: #CC0000;"> height: (not specified - looks great in FireFox, causes odd stretching in IE, unless doctype is removed) </td> </tr> <tr> <td style="height: 30px; background-color: #FF9900;"> height: 30px; </td> </tr> </table> </body> </html> Quote Link to comment Share on other sites More sharing options...
scottybwoy Posted July 8, 2008 Share Posted July 8, 2008 you can try html { height:100% background:#C00; padding: 80px 0 30px 0; } #header { position: absolute; top: 0; height: 80px; width: 100%; background: F90; } #footer { position: absolute; bottom: 0; height: 30px; width: 100%; background: F90; } <body> <div id="header"> </div> <div id="footer"> </div> </body> Although I've not tested it. Have a play around, it may be the way forward. Good luck. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.