Thu, 2012-05-31 18:11
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 & 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 & Quattros</a></li> <li><a href="#">Installation Parts & 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 & BMV602H</a><em>£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 & BMV602H</a><em>£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 & BMV602H</a><em>£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 & Conditions</a></li> <li><a href="#">Privacy & 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 & 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 © 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; }
Sat, 2012-06-02 11:14
#1
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
Tue, 2012-06-05 22:45
#2
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
Wed, 2012-06-06 20:33
#3
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.