Eskimo Posted June 26, 2008 Share Posted June 26, 2008 I have a design using tables (don't judge me) and css that displays correctly in FF3, but when I load it in IE7 to test compatibility my header and footer are incorrect heights and so do not display properly. Index Page: <!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>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <table id="wrapper" cellpadding="0" cellspacing="0"> <!-- Header --> <tr> <td class="header" colspan="2"><img src="images/banner.gif" alt="banner" title="banner" /></td> </tr> <!-- End Header --> <tr> <td class="sidebar"> <!-- Sidebar --> <table cellpadding="0" cellspacing="0"> <tr> <td>Side bar link</td> </tr> <tr> <td>Side bar link</td> </tr> <tr> <td>Side bar link</td> </tr> <tr> <td>Side bar link</td> </tr> <tr> <td>Side bar link</td> </tr> </table> <!-- End Sidebar --> </td> <td class="content"> <table cellspacing="0" cellpadding="0"> <tr> <td width="20%" rowspan="4"> </td> <td width="56%"> </td> <td width="20%" rowspan="4"> </td> </tr> <tr> <td align="right"><h1>Page Header</h1></td> </tr> <tr> <td align="left"><h2>Sub-header</h2> <p>Page content goes herePage content goes herePage content goes herePage content goes herePage content goes herePage content goes here</p> <p> </p></td> </tr> </table> </td> </tr> <tr> <td class="footer" colspan="2"> <table class="footertext" cellspacing="0" cellpadding="0"> <tr> <td class="smallfont"> Copyright © 2008.</td> </tr> </table> </td> </tr> </table> </body> </html> CSS: /* Global Styles */ body, html, #wrapper { color: #FFFFFF; height:100%; margin: 0; padding: 0; border: none; text-align: center; } h1 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #709DE8; font-size: 18px; font-style: normal; font-weight: bold; font-variant: normal; text-decoration: none; } h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; } h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; } td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; } td { color: #FFFFFF; } /* Section specific styles */ .header { background-image:url(images/headerbg.gif); padding: 10px 10px; height: 10%; border:none; margin:0; } #wrapper { margin: 0 auto; text-align: left; vertical-align: middle; width: 100%; } .sidebar { width: 15%; vertical-align: top; background-image:url(images/sidebarbg.gif); padding: 20px 20px; } .content { vertical-align: top; background-image:url(images/mainbg.gif); } .footer { vertical-align: middle; background-image: url(images/footerbg.gif); background-repeat:repeat-x; height: 5%; } .footertext { width: 100%; border-style: none; } .smallfont { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; text-decoration: none; padding: 5px 5px; } When I delete the 100% in the body, html style, it works, but I want to page to display as 100% of the browser window. I've uploaded the page here: http://www.aviationdownunder.net/test2/ so you can view in the different browsers. I'd appreciate any help, besides telling me to not use tables, I know I'm not meant to but I don't feel its powerful enough to make the whole design yet. Link to comment https://forums.phpfreaks.com/topic/111997-firefoxie-problem/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.