Jump to content
ggkolfin

Footer DIV is not displayed on Firefox and IE

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

The space might be caused by display: inline-block; as it acts as inline element any whitespace or line break between elements which is treated as space also causes a gap the height of current font used.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...