CSS - Space Under Footer In Ie
Hey guys!
My website looks quite good, except for the footer when viewed on IE 6, 7, and 8. The problem is that the footer doesn't go all the way down to the bottom of page, rather leaving a space of about 5 pixels vertically so it doesn't look good. How do I get the footer to go and stay all the way down the page in IE? The footer is only within the <body> div, which has the property: margin: 0. The footer div has the following properties set: .footer { background:#6CBDF0; clear: both; height:45px; padding-top:5px; } So is there any way I could make changes to these elements so that the footer wouldn't leave that annoying white space below it? Thank you very much! PS. I've tried solving this for well over an hour now... Similar TutorialsSo i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/ Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start. So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this: Code: <div id="footer"> <span id="left-bg"></span> <span id="right-bg"></span> </div> and the styling for these is something like (I can post the actual/more if need be) Code: div#footer { position: relative; height: 25px; width: 100%; } span#left-bg { position: absolute; left: 0; bottom: 0; width: 400px; height: 600px; background: transparent url(some-url.png) no-repeat 0 0; z-index: -1; } span#left-bg { position: absolute; right: 0; bottom: 0; width: 400px; height: 600px; background: transparent url(some-url.png) no-repeat -400px 0; z-index: -1; } in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page. in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions: a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top) b) using the W3-dev opera tools, if I disable both spans c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first). i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed. I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan Here is my page: http://dev.donmyersministries.com/ The CSS in on the page itself still. My problem: I want my footer to go at the bottom after the two columns, but I just can't figure it out. I have read several tutorials on keeping the footer at the bottom, but nothing has worked for me. This is my first (good) CSS only layout. Help! Thank you all. later I've read through a few CSS documents and I can't find any references to this, so excuse me if I've missed something (which I hope I have!). I want to be able to place a footer on my pages and always have it stuck to the bottom of the browser window, regardless of the amount of content in the page. So even if the page were nothing but the header and footer, the footer would be right at the bottom of the page. Can I do this in CSS? Code: http://xbox-free.co.uk/ Can anyone advise as to why my footer is overlapping/floating to the right? Cheers, Neil Hello. Maybe this would be a better post on CSS. Here is my code. Right now I'm trying to add a set of links at the bottom of the web page. Any thoughts? This has been driving me nuts! Thanks again everyone HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)"> <html> <head> <title> Attorneys at Law, New York Lawyer</title> <meta name="" content=""> <META NAME="Generator" CONTENT="Microsoft FrontPage 5.0"> <meta name="KeyWords" content="HTML"> <link rel="stylesheet" type="text/css" href="index.css" /> <script src="index.js"> </script> </head> <body> <div id="mainContainer"> <div id="topBar"><img src="webbanner.jpg" width="760" height="100"> <!--#include file="left_bar.shtml" --> <!-- Main Content--> <div id="mainContent"> <!-- Google Search--> <form action="" id="cse-search-box"> <div align="right"> <input type="hidden" name="cx" value="013298611985327428493:xedrvpp2ns4" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </div> </form> <script type="text/javascript" src="(URL address blocked: See forum rules)=cse-search-box&lang=en"></script> <!-- BreadCrumb Nav--> <div id="navBreadCrumb"> <a href="(URL address blocked: See forum rules)">Home</a> <img src="breadcrumb_arrow.png" width="8" height="5" /> <a href="">Areas of Practice</a> <img src="breadcrumb_arrow.png" width="8" height="5" /> <a href=""> Real Estate</a> <img src="breadcrumb_arrow.png" width="8" height="5" /> <strong>Foreclosure</strong> </div> <h1><font face="times new roman, times, serif" size="5">About Our Firm</font> <hr size="2" width="100%" /> <!-- end content --></h1> <p align="justify"><strong>Lawyer</strong> is a full-service law firm with conveniently located offices in ... and ... Counties. As the largest suburban general practice in ..., we have a skilled team of 31 attorneys, including a physician-attorney, as well as two on-staff Registered Nurses and an extensive support staff to serve our clients.</p> <p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p> <h5>Why should you choose .... at your New York Attorney?</h5> <p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv </p> <p align="justify">individual circumstances.</p> <p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p> <p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p> <p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p> <h5>Affiliations</h5> <p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p> <p align="justify">Please visit our <a class="con" href="practice_areas.php"> areas of practice</a> for further information on our legal services or <a class="con" href="email.php"> contact us </a>directly for an initial consultation.</p> </div> </div> </div> </body> </html> CSS Code: html{ height:100%; } body{ font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; font-size:0.8em; margin:0px; padding:0px; background-color:#001b4f; text-align:center; } .clear{ clear:both; } #mainContent{ padding-right:10px; padding-left:210px; padding-bottom:10px; background-color:#fff; } #mainContainer{ width:760px; text-align:left; margin:0 auto; background-color: #fff; border-left:1px solid #272727; border-right:1px solid #272727; padding-bottom:10px; } #topBar{ width:760px; height:100px; padding-bottom:0px; padding-top:0px; border-bottom:2px solid #272727 } #searchbox{ position:absolute:0,0; } #leftMenu{ width:200px; padding-left:10px; padding-right:1px; float:left; background-color: #fff; padd padding-top:25px; } #botTable{ display: table-footer-group; float: top; bottom: 100% So I have this site and I'm not great with css, but this one has to be done all in css I think. And I've got everything working except for the footer. The footer needs to display below the background image which is aligned center top. So if there is plenty of text, the footer should display below all of the text, and if there isn't much text then it should display under the background image. This is how its currently set up: container div header div wrapper div wrapper div left div middle div right div footer div wrapper div the footer has position: absolute; bottom: 0; the container with position: relative puts the footer up the top over the top of the header. With position: absolute it does something else weird, and with neither it puts the footer at the bottom of the screen over the top of the content. the wrapper has relative position, which seems to be why the left, middle and right divs are positioning correctly with their positions as absolute. I think the header just positions correctly since its up top. So it would seem I'd need the footer to be inside another div that is position relatively. I just tried that, but it also positions the footer at the bottom of the screen with more content under it.. I guess what I want really is to have the site split into three horizontal divs, header, main and footer. Then within each of those to center all of the content to only 975px wide. And really its only the main div that needs the background image at all. Can anyone help? I want my footer to have no whitespace under it (like 1px ). I have it set like this: #footer { border-top:1px solid; text-align:right; margin:0px; font-size:smaller; padding-bottom:0px; } and it doesn't work so I'm guessing it is somewhere else in the file but I've tried messing around with most (all?) of the padding / margins and it still doesn't work. How could I do this? What I want is like the footer at http://www.oswd.org . Hi all, I'm having troubles with my footer and I hope someone will be able to help: test.katiefleming .ca (remove space) User: wendy Pass: letmein The footer is supposed to span across the bottom forever should the user increase the browser window (this works). However, my text moves as the window is expanded/contracted. I want it to be fixed. No idea how to do this. Any help would be great! Hello All, My question regards footers using CSS. How would you have a footer like they do on Linkworth(dot)com so that it fluctuates depending on how long the page is? So if you have a really long scrolling page, the footer is at the bottom and likewise if the page is really short, the footer is also at the bottom, but so there is never any white space below it. I have a similar design I am working on, but when there is too much type, it runs behind the footer image and the footer never moves down accordingly. Thank you for your help - appreciated. Hey All, I'm stumped on a problem I'm having with css. Here's the website I'm working on: johnraymondonline.com/mjbfoundation/ It's wordpress and I was working to modify a template. The problem I'm having is with the div for the footer. I've made the width 100% and it's not expanding the full width of the page. I've checked to see if it was encased in a div and it appears as if it isn't. I'm not sure what to do at this point...use absolute positioning? Any help would be appreciated. Thanks in advance!!! Hi, Im trying to make my footer on my page be a certain height of around 150px. BUT I want it to fill to the bottom of the page even when there is less content or the window is made larger or smaller. So basically a sticky footer which fills to the bottom of the page. An example would be the footer he yoast.com My current CSS is he #fwrap { background-color:#BAAE9F; border-top: 1px solid white; border-top-width: 1px; border-top-style: solid; border-top-color: white; width:100%; height:100%; height:145px; } Any help would be appreciated! Thanks I'm currently using .php to include a common header and footer. Is there a way to use CSS to include a common footer. Not the style, but the text themselves. Hello all, I had a question about the CSS file I was using for my site. I have a multi-column setup, with header, nav, content, right column, and footer as the columns. Now everything except the footer are together. The footer is spaced from the rest of the page, and I'd like it to connect to the bottom of the page. My CSS: * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #000; background-color: #3b5999; } h1 { font-family: "Trebuchet MS"; font-size: 20px; color: #000; } h3 { font-family: "Trebuchet MS"; color: #000; font-size: 12px; } A:link { font-family: Verdana; font-size: 12px; color: #000; text-decoration: none; border: 0; } A:visited { color: #000; text-decoration: none; border: none; } A:active { color: #000; text-decoration: none; border: none; } A:hover { color: #8CC1DF; text-decoration: none; } #wrapper { margin: 0 auto; width: 922px; } #header { width: 900px; padding: 10px; height: 100px; background-image: url(background.png); background-repeat: no-repeat; } #navigation { float: left; width: 900px; height: 42px; margin: 0px 5px 0px 0px; text-align: center; font-family: Arial; } #content { float: left; background-color: #fff; font-family: "Trebuchet MS"; font-size: 12px; color: #000; padding: 10px; height: 350px; width: 683px; margin-left: auto; margin-right: auto; overflow: auto; } #rightcolumn { background: #fff; padding: 10px; margin: 0px 0px 5px 0px; height: 350px; width: 195px; float: left; } #footer { width: 920px; height: 40px; padding: 10px; clear: both; margin: 0px 0px 10px 0px; background-image: url(footer.gif); background-repeat: no-repeat; font-family: Arial; color: #000; } Thanks in advance! Does such a thing exist? I have seen various examples and tried more than one, and every time I either end up with a right margin when the page is not long enough to scroll, or I end up with a horizontal scroll bar when the page is scrolling. All I want is a fixed position footer (at the bottom of the viewport permanently) where the page content scrolls vertically behind it without any gaps Does anyone know why on this page the footer suddenly appears at the bottom and not attached to the centre area?: I am having problems with the footer of our site on the homepage at http://www.themax.co/ . This problem is ONLY occurring in the AOL browser (yes, it's annoying). See the attached image... In the AOL browser, the footer links (HOME, ABOUT, etc.) are sitting ontop of the READ MORE buttons (in the 3 bottom boxed). I tried adding a <div style="clear:both"></div> between the footer and the boxes, but that didn't work. Then I tried a min-height hack - I added the <div class="prop"></div> and <div class="clear"></div> tags to each of the boxes. But that didn't work (the prop and clear class are defined in my stylesheet) ... but that didn't work either. Ug. Running out of ideas. Please help. http://www.robertet.com/uk/contacts...ion/contact.php I am trying to emulate the footer that is in the page above. The footer works like this in three ways: 1 - It is always at the bottom regardless of the content 2 - If the page goes very long the footer will always stay a certain distance away from the body content 3 - If the content is short the footer will stay at the bottom of the screen I've spent a few days trying to break it down, but I still can't figure out what is making this work its magic. Resize your browser a bit and you'll see what I mean. You'll know what I am talking about if you are using a higher resolution. This fix must be cross browser compliant including ie6. HI there I am wondering if anyone can help with a css issue I am strugging to resolve. The url is simplyroomsandsuites co uk (forward slash) blog You can see where the footer image is floating left.. I have tried to float it centrally but it disappears. Thanks for any help. .footerArea {float: left; display: inline; width: 950px; background: url(/images/main_area_bottom_curve.png) top left no-repeat; padding: 30px 0 20px 0;} |