SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    Colonel Jack O'neill Josh_'s Avatar
    Join Date
    Apr 2004
    Location
    NC
    Posts
    689
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer producing horizontal scroll in firefox, not in IE

    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!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •