3 replies [Last post]
mediamole
mediamole's picture
Offline
Regular
UK
Last seen: 10 years 4 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-11
Posts: 41
Points: 19

I'm having a problem with sticky footer when viewed in IE7 whereby it's showing a scroll bar when the data overflows. I don't get this issue in other browsers apart from IE7.

Any ideas? I thought was a padding or margin issue, but I've got the footer depth calculated correctly I think.

You can see the issue at preview page

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>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
 
    <link rel="stylesheet" href="reset.css" type="text/css" media="all" />
    <link rel="stylesheet" href="screen.css" type="text/css" media="all" />
 
 
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script src="jqbanner.js" type="text/javascript"></script>
 
       <!--[if !IE 7]>
	<style type="text/css">
		#wrapper {display:table;height:100%;}
	</style>
    <![endif]-->
 
 
 
</head>
<body>
   <p class="accessaid"><a href="#nav">Skip To Navigation</a></p>
 
   <div id="wrapper">
     <div id="main" class="fixclear">
    <div id="branding">
        <h1 title="Chandlery Direct Store UK"><a href="#" title="Chandlery Direct Store UK">Chandlery Direct Store UK</a></h1>
	<h4>01234 567 890</h4>
        <p><img src="shopping-basket.png" height="19" width="19" alt="" /><strong>Your basket has </strong> 0 Item(<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/drunk.png" title="Drunk" alt="Drunk" class="smiley-content" /> <strong>Total:</strong> 0 <a href="#">Checkout</a></p>
    </div>
    <div id="nav-wrap">
	<div id="nav">
	    <ul>
		<li><a href="#">Victron</a></li>
                <li><a href="#">Morso</a></li>
                <li><a href="#">Thetford</a></li>
                <li><a href="#">Eberspacher</a></li>
                <li><a href="#">Dometic</a></li>
                <li><a href="#">Alde</a></li>
	    </ul>
	</div>
	<form action="#" method="post">
	    <p><input type="text" size="10" id="stxt" value="Search" /><input src="search-btn.png" type="image" alt="" /></p>
	</form>
    </div>
 
    <div id="jqb_object">
              <div class="jqb_slides">
                  <p class="jqb_slide"><a href="#"><img src="banner1.png" height="380" width="985" alt="" /></a></p>
                  <p class="jqb_slide"><a href="#"><img src="banner2.png" height="380" width="985" alt="" /></a></p>
                  <p class="jqb_slide"><a href="#"><img src="banner3.png" height="380" width="985" alt="" /></a></p>
		  <p class="jqb_slide"><a href="#"><img src="banner4.png" height="380" width="985" alt="" /></a></p>
              </div>
	      <div class="jqb_bar">
                 <div id="btn_next" class="jqb_btn jqb_btn_next"></div>
                 <div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>
            </div>  
    </div>
 
 
    <div id="maincontent" class="fixclear">
        <div id="supp-nav">
	      <h3>Cabin <em>Equipment</em></h3>
	       <div class="navbox">
		 <ul>
                   <li><a href="#">LPG Gas Equipment</a></li>
                   <li><a href="#">Fixtures &amp; Fittings</a></li>
                   <li><a href="#">Entertainment Equipment</a></li>
                   <li><a href="#">Lighting</a></li>
                 </ul>
	      </div>
	       <h3>Other <em>Products</em></h3>
	       <div class="navbox">
		  <ul>
                   <li><a href="#">Batteries</a></li>
                   <li><a href="#">Battery Monitoring</a></li>
                   <li><a href="#">Battery Isolators</a></li>
                   <li><a href="#">Battery Charging</a></li>
                   <li><a href="#">Inverter Chargers / Multis &amp; Quattros</a></li>
                   <li><a href="#">Installation Parts &amp; Panels</a></li>
                   <li><a href="#">DC/DC Converters</a></li>
                   <li><a href="#">Generators</a></li>
                   <li><a href="#">Inverters</a></li>
                   <li><a href="#">Isolation Transformers</a></li>
                   <li><a href="#">Solar PV</a></li>
                   <li><a href="#">Wind Turbines</a></li>
                  </ul>
	       </div>
	</div>       
	<div id="content">
	    <div id="wtxt">
		<h2>Welcome to <em>Chandlery Direct</em></h2>
		<p>Chandlery Direct are suppliers of boat, caravan and motorhome equipment to trade and private customers. Our aim is to offer
		our customers the very best equipment available at a competitive price and with all the technical support you require.</p>
                <p>Our strength is in our combination of technical expertise and a comprehensive range of products to suit
		all budgets and technical needs - so whatever it is you want to do,
		and whatever your budget, we have a solution for you.</p>
	    </div>
	    <h2 id="feathr">Featured <em>Chandlery Direct Products</em></h2>
	    <div id="feat-wrap">
		<div id="feat-inner" class="fixclear">
		     <dl>
                        <dt><a href="#"><img src="temp-image.jpg" height="107" width="162" alt="" /></a></dt>
                        <dd><h3><a href="#">Communication Kit for BMV600, BMV602 &amp; BMV602H</a><em>&pound;84.00</em><span class="vatmsg">(Excluding VAT at 20%)</span></h3></dd>
                     </dl>
		     <dl>
                        <dt><a href="#"><img src="temp-image.jpg" height="107" width="162" alt="" /></a></dt>
                        <dd><h3><a href="#">Communication Kit for BMV600, BMV602 &amp; BMV602H</a><em>&pound;84.00</em><span class="vatmsg">(Excluding VAT at 20%)</span></h3></dd>
                     </dl>		     
                      <dl>
                        <dt><a href="#"><img src="temp-image.jpg" height="107" width="162" alt="" /></a></dt>
                        <dd><h3><a href="#">Communication Kit for BMV600, BMV602 &amp; BMV602H</a><em>&pound;84.00</em><span class="vatmsg">(Excluding VAT at 20%)</span></h3></dd>
                     </dl>
		</div>
	    </div>
 
	    <div class="newswrap">
		<p><strong>Latest News</strong>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et <a href="#">Read More</a> 
		</p>		
	    </div>	    
	<!-- content --></div>
 
	<div id="footer-pods" class="fixclear">
	    <div class="promo1">
		<p><strong>Guide to effective power managment</strong>The guide explains in easy terms how to look after your batteries! <a href="#">Click here</a></p>
	    </div>
	    <div class="promo2">
		<p><strong>Download Pricelist</strong>Victron Products Pricelist June 2012<a href="#">Click here</a></p>
	    </div>
	    <div class="promo3">
		<p><strong>Follow us on Twitter</strong><a href="#">Click here</a></p>
	    </div>
 
	</div>
 
    <!-- end of maincontent --></div>
     </div>
</div>
 
<div id="footer">
    <div id="footer-inner" class="fixclear">
	<div>
	<h4>Chandlery Direct</h4>
        <ul>
          <li><a href="#">Terms &amp; Conditions</a></li>
          <li><a href="#">Privacy &amp; Cookies</a></li>
          <li><a href="#">Site Map</a></li>
          <li><a href="#">About Us</a></li>
        </ul>
	</div>
	<div>
	<h4>Chandley Products</h4>
        <ul>
           <li><a href="#">Product Range</a></li>
           <li><a href="#">Clearance &amp; Specials</a></li>
           <li><a href="#">Gallery</a></li>
           <li><a href="#">Offers</a></li>
         </ul>
       </div>
       <div>
	<h4>Useful Info</h4>
        <ul>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Latest News</a></li>
          <li><a href="#">Delivery Info</a></li>
          <li><a href="#">FAQs</a></li>
       </ul>
	</div>
	<address><strong>Find Us</strong>Chandlery Direct<br />Springwood Haven<br />Mancetter Road<br />Nuneaton<br />CV10 0RZ</address>
        <p id="cardlogo"><img src="credit-card-logo.gif" height="74" width="174" alt="" /></p>
	<p id="sitecred">Website &copy; 2012 Chandlery Direct trading name of Springwood Haven | <a href="#">Web Design</a> by <a href="#">Media Beast</a> | <a href="#">Build</a> by <a href="#">Mediamole</a></p>
    </div>    
</div>  
 
 
</body>
</html>

CSS:

html, body {height: 100%;}
 
body {
    font-size:62.5%; /* Sets base font at 10px */
    font-family: Arial, Verdana, sans-serif;
    color:#0B3F6D;
    margin:0; padding:0;
    text-align:center;
    background:#E0E3E5 url("country-image-lowres.jpg") no-repeat center top;
 
}
 
 
a { outline:none; }
a:link { text-decoration:none; color:#5F99D3; }
a:visited { text-decoration:none; color:#5F99D3; }
a:hover { text-decoration:underline; }
a:active {text-decoration:none; }
 
/* form general styles */
 
input, textarea, select { font-family: Arial, Verdana, sans-serif;  }
 
 
/* ACCESS PAGE TOP */
 
.accessaid { position:absolute;
            height:0;
            overflow:hidden;
}
 
 
/* WRAPPER */
 
#wrapper { width:985px; margin:0 auto;
           background:url("chandlery-logo.png") no-repeat top left;
	   padding-left:105px; text-align:left;
	   min-height: 100%;
}
 
#main { width:985px; overflow:auto;
	padding-bottom: 220px;
        }  
 
 
/* BRANDING */
 
#branding { width:985px;
 
}
 
/* logo */
 
#branding h1 { width:330px; margin:0; padding:0;
               text-indent:-9999px;
               height:104px;
               position: relative;
               float:left;
               text-align:left;
               }
 
#branding h1 a {
                display: block;
               text-decoration: none;
               cursor: pointer;
	       text-indent:-9999px;
	       height:104px; width:330px;
               }
 
 
#branding h4 { color:#7D9CC5;
              float:right;
	      text-align:right;
	      font-size:3.2em;
	      padding:34px 0 0 0;
	      width:650px; font-weight:normal;
	      background:url("basket-div-trans-bk.png") no-repeat bottom right;
}
 
#branding p { width:650px;
               float:right;
	       background:url("basket-div-trans-bk.png") no-repeat bottom right;
	       float:right; font-size:1.2em; color:#fff; vertical-align:middle;
	       text-align:right; padding:4px 0; 
}
 
#branding p strong, #branding p a { color:#3BC5EF; }
 
#branding p a { font-weight:bold; }
 
#branding p img { vertical-align:middle; padding-right:8px; }
 
 
/* NAVIGATION AND SEARCH */
 
#nav-wrap { width:980px;
       clear:both;
       height:34px;
       background:url("nav-left-border.png") no-repeat top left;
       padding-left:5px;
}
 
#nav { width:565px;
       float:left; height:34px;
       background:url("nav-right-border.png") no-repeat top right;
       padding-right:5px;
 
}
 
#nav ul { width:560px;
          height:34px;
	   background:url("top-nav-bk.jpg") repeat-x top right;
	   padding-left:5px;
 
}
 
#nav li { float:left; }
 
#nav li a { color:#fff; display:block;
            font-size:1.4em; padding:0 18px;
	    font-weight:bold; line-height:2.0em;
}
 
#nav-wrap form { width:220px; float:right;
                 height:36px;
		 background:url("form-bk.png") no-repeat top left;
		 text-align:right;
		 margin-right:-4px;
}
 
#nav-wrap form p input { vertical-align:middle; outline:none; }
 
 
#stxt { width:145px; margin:0; padding:0;
        /* height:28px; /*
	/* background:url("search-bar-bk.png") repeat-x top left; */
	border:solid #fff 1px;
	font-size:1.2em; color:#072D51; font-weight:bold;
 
}
 
/* ROTATING BANNER */
 
/* Home Page Rotating Banner */
 
#jqb_object { 
	position:relative;
	width:985px; height:380px;
	overflow:hidden;
        z-index:44;
        margin:0 auto;
 
 
}
 
 
#jqb_object .jqb_slide{
	position:absolute;
	width:985px; height:380px;
	text-align:left;
	left:0px; top:0px;
}
 
#jqb_object .jqb_bar{
	position:absolute;
	width:56px; height: 28px;
	top:322px;
	left:38px;	
}
 
#jqb_object .jqb_info{
	position:absolute;
	padding: 0px;
	float: left;
}
 
#jqb_object .jqb_btn{
	width:27px; height:28px;
 
}
 
#jqb_object .jqb_btn_next{
	background-image:url("left-banner-arrow.png");
	float: left;
}
#jqb_object .jqb_btn_prev{
	background-image:url("right-banner-arrow.png");
	float:right;
 
}
 
 
 
/* MAINCONTENT */
 
#maincontent { width:985px;
               padding:0 0 18px 0;
	       background:url("bot-maincontent-border.gif") repeat-x bottom left;
	      border-bottom:solid 21px #E0E3E5; 
 
 
}
 
 
#content { width:686px;
           float:right;
}
 
#supp-nav { width:267px;
            float:left;
}
 
 
/* home page only */
 
#wtxt { width:680px;
        background:url("welcome-txt-bk.png") no-repeat top left;
	height:281px;
}
 
#wtxt h2 { font-size:2.8em;
           color:#0055A5;
	   padding:10px 0 15px 0;
}
 
#wtxt h2 em { color:#5F99D3; font-weight:bold; }
 
#wtxt p { color:#0B3F6D; padding:0 0 18px 0;
          font-size:1.3em; line-height:1.6em;
	  width:420px;
	  }
 
 
/* LEFT NAV */
 
.navbox { width:267px;
          background:url("left-nav-corner-bk.png") no-repeat bottom left;
	  padding:0 0 25px 0;
	  margin-bottom:8px;
 
}
 
#supp-nav h3 { background:url("nav-header-bk.png") no-repeat top left;
               height:35px; width:240px;
	       font-size:1.6em; padding:36px 0 0 27px;
	       text-transform:uppercase; text-transform:uppercase;
	       color:#fff;
}
 
#supp-nav h3 em { font-weight:normal; }
 
#supp-nav ul { background:url("nav-bk.png") repeat-y top left;
               padding:0 0 0 32px;
	       width:235px;
 
}
 
#supp-nav li { color:#0B3F6D;
               font-size:1.4em;
	       background:url("dotted-box.gif") repeat-x bottom left;
	       width:210px; line-height:normal;
	       padding:8px 0;
}
 
#supp-nav li a { color:#0B3F6D; display:block;
                 background:url("nav-down-arrow.gif") no-repeat center right;
		 padding:0 11px 0 0;
}
 
#supp-nav li a:hover { color:#5FC5D4; text-decoration:none; }
 
 
/* FEATURED PRODUCTS */
 
#feathr { background:url("feat-prods-hr-bk.png") no-repeat top left;
          height:37px; width:660px; font-size:1.8em;
	  padding:25px 0 0 26px; color:#fff;
}
 
#feathr em { font-weight:normal; }
 
 
#feat-wrap { width:686px;
             background:url("feat-border-bot-bk.png") no-repeat bottom left;
	     padding-bottom:10px;
	     margin-bottom:6px;
}
 
#feat-inner { width:643px;
              background:url("feat-content-bk.png") repeat-y top left;
	      padding:20px 0 20px 43px;
	      }
 
#feat-inner dl { width:194px;
                 height:216px;
		 float:left;
		 padding-right:5px;
}
 
#feat-inner dt { background:url("promo-top-corner.jpg") no-repeat top left;
                text-align:center; padding-top:13px;
}
 
#feat-inner dt a { display:block;
                   background:url("feat-content-bk.jpg") repeat-y top left;
		   height:119px;
}
 
#feat-inner dd { 
                   background:url("promo-bot-corner.jpg") no-repeat top left;
		   height:66px; padding-top:16px;
 
}
 
#feat-inner dd h3 { background:url("feat-promo-bk.gif") no-repeat top left;
                    height:80px; width:190px; padding:0 2px;
		    color:#3D77B3; text-align:center; font-weight:normal;
}
 
#feat-inner dd h3 a { color:#0B3F6D; font-size:12px; }
 
#feat-inner dd h3 em { color:#3D77B3; font-size:18px; display:block; font-weight:bold; }
 
.vatmsg { color:#0B3F6D; font-size:12px; }
 
/* HOME PAGE ONLY */
 
.newswrap { width:340px;
            height:114px;
	    background:url("news-pod-img-bk.png") no-repeat top right;
	    padding:0 346px 0 0;
}
 
.newswrap p { background:url("news-pod-wrap-bk.png") no-repeat top left;
              height:96px; width:316px;
	      padding:18px 0 0 24px; color:#fff; font-size:12px;
}
 
.newswrap p a { color:#7AD2F3;}
 
.newswrap p strong {font-size:18px; color:#fff; display:block; padding:0 0 14px 0; }
 
/* HOME PAGE FOOTER PODS */
 
#footer-pods { width:985px;
               padding:16px 0 0 0;
	       clear:both;
	       background:url("bot-maincontent-border.gif") repeat-x top left;
}
 
.promo1, .promo2, .promo3 { 
                            height:100px;
			    float:left;
                           }
 
.promo1 { width:209px;
	  padding:0 122px 0 0;
}
 
.promo2 { width:209px;
	  padding:0 121px 0 0;
}
 
.promo3 { width:209px;
	  padding:0 115px 0 0;
}
 
.promo1 p, .promo2 p, .promo3 p { 
            padding:18px 0 0 21px; font-size:10px; color:#fff;
	    width:188px; height:82px;
}
 
#footer-pods p strong { color:#FBFBFB;
                   font-size:18px;
		   display:block;
}
 
 
.promo1 p a, .promo2 p a, .promo3 p a { color:#7AD2F3; display:block; }
 
.promo1 { background:url("pod1-img-bk.png") no-repeat 209px 0px;  }
 
.promo1 p { background:url("pod1-bk.png") no-repeat top left; }
 
.promo2 { background:url("pod2-img-bk.png") no-repeat 209px 0px;  }
 
.promo2 p { background:url("pod2-bk.png") no-repeat top left; }
 
.promo3 { background:url("pod3-img-bk.png") no-repeat 209px 0px;  }
 
.promo3 p { background:url("pod3-bk.png") no-repeat top left; }
 
 
/* FOOTER */
 
#footer { background:#2D5099 url("footer-border-top.gif") repeat-x top left;
	  height:220px;
	  width:100%;
	  margin-top: -220px; /* negative value of footer height */
	  text-align:left;
	  clear:both;
 
}
 
#footer-inner { width:985px;
                margin:0 auto;
		padding:33px 0 0 105px;
 
}
 
#footer-inner div, #footer-inner address { width:190px;
                    padding:0 5px 0 0;
		    float:left;
		    height:150px;
 
}
 
#footer-inner h4, #footer-inner strong { color:#60BEE1; text-transform:uppercase;
                   font-size:14px; padding:0 0 10px 0;
 
}
 
#footer-inner strong {display:block;}
 
#footer-inner ul { width:190px; }
 
#footer-inner li, #footer-inner address { font-size:1.1em;
                   color:#fff;
		   padding:0; line-height:1.6em;
		   width:190px;
		   text-transform:uppercase;
}
 
#footer-inner li a { color:#fff; }
 
#cardlogo { width:174px; float:right;
            padding:27px 0 0 0;
	    text-align:right;
}
 
 
#sitecred { width:985px;
            clear:both;
	    color:#fff;
}
 
#sitecred a { color:#fff; }
 
 
 
 
/* DIV CLEARING STYLES  */
 
.fixclear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
 
* html .fixclear { height:1%;}
.fixclear { display:block; }
 
/* for ie7 clearing */
 
*:first-child+html .fixclear {
    min-height:1px;
} 

Thanks for help.

Garry
http://www.mediamole.net

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 25 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Do you really need the

Do you really need the overflow: auto on #main?

I would remove the width on footer-inner as that along with the larger left padding is going to cause an issue or keep the width lose the padding and margin auto it to stay in line with content body

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mediamole
mediamole's picture
Offline
Regular
UK
Last seen: 10 years 4 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-11
Posts: 41
Points: 19

I think you're right. It's my

I think you're right. It's my margins causing the problem.

According to some sticky footer guidelines on web Margins can cause calculation problems causing the scroll. Most advise to not use Margins and use Padding instead

Thanks for help.

Garry
http://www.mediamole.net

mediamole
mediamole's picture
Offline
Regular
UK
Last seen: 10 years 4 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-11
Posts: 41
Points: 19

I've discovered the issue

I've discovered the issue causing the scroll bar in IE7.

I had a negative margin to align the search bar at the top of the page. That was causing the scroll bar to appear in IE7

margin-right:-4px;

That is the CSS that caused the issue.

Thanks for help.

Garry
http://www.mediamole.net