ggkolfin Posted September 19, 2014 Share Posted September 19, 2014 (edited) 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 September 19, 2014 by ggkolfin Link to comment Share on other sites More sharing options...
dsonesuk Posted September 19, 2014 Share Posted September 19, 2014 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 More sharing options...
ggkolfin Posted September 19, 2014 Author Share Posted September 19, 2014 (edited) 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 September 19, 2014 by ggkolfin Link to comment Share on other sites More sharing options...
dsonesuk Posted September 19, 2014 Share Posted September 19, 2014 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. Link to comment Share on other sites More sharing options...
ggkolfin Posted September 19, 2014 Author Share Posted September 19, 2014 (edited) 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 September 19, 2014 by ggkolfin Link to comment Share on other sites More sharing options...
dsonesuk Posted September 19, 2014 Share Posted September 19, 2014 Use margin-top: -150px; instead. Link to comment Share on other sites More sharing options...
ggkolfin Posted September 19, 2014 Author Share Posted September 19, 2014 Again, thank you very much! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now