Footer producing horizontal scroll in firefox, not in IE

**Josh_** · Oct 8, 2004, 17:23

Yes, I know this means i'm doing something wrong. I can't figure it out, I've changed things all over the place to try to get it to go away.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="logo"><img src="images/logo.jpg" /></div>

<div id="outerdiv"><br />
<div id="updatesdiv" >
  <table width="100%" border="1" cellspacing="0" cellpadding="0" style="height:200px;">
    <tr>
      <td class="cell">
	  <span class="heading">Newest Games</span>
	  </td>
      <td class="cell"><span class="heading">Popular Games</span></td>
      <td class="widecell"><span class="heading">Updates and News</span></td>
      <td class="widecell"><div style="border:1px solid yellow;"><img src="http://cp.fastclick.net/cid18087/media41615.gif?3149" /></div></td>
    </tr>
  </table>
</div>

<table border="1" cellspacing="0" cellpadding="0" id="content">
  <tr>
    <td width="25%">&nbsp;</td>
    <td width="25%">&nbsp;</td>
    <td width="25%">&nbsp;</td>
    <td width="25%">&nbsp;</td>
	<td style="width:120px;"><img src="http://www.lunarpages.com/banners/images/banner_ads_120x600_01.gif"></td>
  </tr>
  <tr>
    <td colspan="5" height="60">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5" height="30">&nbsp;</td>
  </tr>
</table>
<div id="footer">Testing testing</div>
</div>

</body>
</html>

Code:

/* commented backslash hack  \*/ 
html, body{height:100%;} 
/* end hack */
html,body {margin:0;padding:0}
body {
background-color:#f93;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#logo {
background:url(images/logobg.jpg)
}
#outerdiv {
width:100%; height:100%;
border:0px solid purple;
margin:0; padding:0;
}
#updatesdiv {
background:url(images/bgpattern.gif); 
border:1px solid black; 
height: 200px; 
margin-left:30px; 
margin-right:28px; 
margin-bottom:2px;
}
#content {
margin-left:2%;margin-right:2%; border:0px solid red;
height:100%;
width:96%
}
.cell {
width:20%; 
text-align:center;
vertical-align:top;
padding-top:2px;
}
.heading {
font-size:12pt; 
font-weight:bold;
color:#01006f;
border-bottom:1px solid gray;
}
.widecell {
width:30%; 
text-align:center;
vertical-align:top;
padding-top:2px;
}
#footer {
width:100%;
clear:both;
height:30px;
background-color: #ccc;
color: black;
border-top:1px solid black;
font-size:10pt;
text-align:center;
vertical-align:middle;
}

Thanks!

**Paul O'B** · Oct 11, 2004, 15:19

It lookslike its your content thats causing it.

Try reducing the size slightly to accomodate the border and ie's rounding errors.

Code:

#content {
margin-left:2%;margin-right:2%; border:0px solid red;
height:100%;
width:95.9%;
}

Paul

The SitePoint Forums have moved.

User Tag List

Thread: Footer producing horizontal scroll in firefox, not in IE

Thread Tools

Display

Footer producing horizontal scroll in firefox, not in IE

Bookmarks

Bookmarks

Posting Permissions