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> Link to comment https://forums.phpfreaks.com/topic/113601-tables-are-stretching-100-high-but-oddly-in-ie/ 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. Link to comment https://forums.phpfreaks.com/topic/113601-tables-are-stretching-100-high-but-oddly-in-ie/#findComment-584535 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.