Jump to content

Footer DIV is not displayed on Firefox and IE


ggkolfin

Recommended Posts

Hello everyone,

I have been developing a site for fun lately (using Wampserver v. 2.5 on windows 8), and yesterday I was happy to realize that I have finished it! For the next logical step, I decided to check the site on other browsers (I was working with Chrome all the time), i.e. on Firefox and IE for the start. Everything works great except that my bottom div is not appearing at all at the two browsers. Even worse, on firefox only, the div does appear on a single page (contact.php) but it does not appear at any other of the almost 40 pages. I did check for differences between this certain page and any other and as far as I can see there is none! Also, on IE the footer is absent even in contact.php. I searched online and found that adblock plugin maybe causing the block, depending on the div's name, but my div is called "footer"! The stylesheet is common for every page, thus I do not believe it is a CSS related problem, but I do not know for sure.

I would love some help and it would be very much appreciated.
Thank you all,
Georgia

 

PS: Here is the basic html page and the related CSS (of course there is more CSS (for the other divs) but I think it is not relevant. I can post it if you like but not all pages have the same divs, so there is some styling for each page. The code I post is a basis that exists in all pages):

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="style.css"><title>Something</title></head> <body> <div id="holderDiv" style="min-width: 1200px; margin: 0 auto;">         <div id="headerDiv">                <!--some things and more divs here-->        </div> <!--end of headerDiv -->         <div id="navigationDiv">                <!--a navigation menu here-->        </div> <!--end of navigationDiv-->         <div id="contentDiv" align="center">                <!--some content and more divs here-->        </div><!--end of contentDiv-->         <div id="footerDiv">                <p class="footerLinks">                <a href="terms.php">Terms of use</a>  <a href="help.php">Help</a>                  <a href="contact.php">Contact</a></p>                <p style="font-size:12px; color: #000000"><br /><br />Copyright 2014 Something</p>        </div> <!--end of footerDiv-->         </div> <!--end of holderDiv--> </body></html> //CSS: body {         background-image: url("back.png");         background-repeat: repeat;         background-position: left top;         height: 100%;         margin: 0;         padding: 0;         font-family:"Courier New", Courier, monospace; } #holderDiv {         min-height: 100%;         width: 100%;         position: relative; } #footerDiv {         clear: both;        position: absolute;        bottom: 0;        width: 80%;         height: 100px;         margin-left: 10%;         margin-right: 10%;         margin-bottom: 5%;        margin-top: 0%;        padding-bottom: 3%;        background-color: #99cccc;         display: inline-block;         overflow: hidden;         text-align: center;} .footerLinks>a {         color: #000000;         font-size: 14px; } .footerLinks>a:hover {         color: #000000;          font-size: 14px; } .footerLinks>a:visited {         color: #000000;          font-size: 14px; }
Edited by ggkolfin
Link to comment
Share on other sites

Using position:absolute; continues to be a beginners biggest mistake, it occupies no space you have to define height and width, other elements do not adjust to its content, so have manually adjust these elements positions when content changes, which means using position: absolute; causes more problems than using what you should be using I.E margins, padding and float.

Link to comment
Share on other sites

Thank you dsonesuk, this does solve it. The problem is that if I change that, a gap appears between contentDiv and footerDiv. But I will look into this. Thank you very much!

Edited by ggkolfin
Link to comment
Share on other sites

Even if I remove all whitespace and line breaks between the elements the gap remains. I ended up using "position: absolute;" as a last resort to address this gap problem, but you are right this is the reason for this topic's original problem. After removing absolute positioning, the only way I can get rid of the gap is by seting relative position to the footer div and also a negative top, eg

position: relative;

top: -150px;

but I've read that this is a bad practice.

Edited by ggkolfin
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...