Firefox/IE Problem

Eskimo · 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.

Sign In

Firefox/IE Problem

Recommended Posts

Eskimo

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information