i'm working on my website and I noticed that there's a big white space at the bottom of the webpage. It's not visible in Google Chrome and IE but it is visible in Firefox. How can I remove this?
1 Answer
Just looked at your code and noticed 1 big flaw.
Your current markup is as follows:
<body class="site com_content view-featured no-layout no-task itemid-101">
<div class="body">
<header class="header" role="banner">
<div class="header-inner"></div>
<div id="Logo"></div>
<div id="header"></div>
<div class="row-fluid"></div>
<footer class="footer" role="contentinfo"></footer>
</header>
</div>
</body>
You have wrapped your whole site inside the <header> tag.
The markup should be like this:
<body>
<header>ONLY HEADER STUFF HERE!</header>
<div class="content">MAIN PART OF SITE HERE</div>
<footer>ONLY FOOTER STUFF HERE!</footer>
</body>
Then, within the header tag, there is an element with a moduletable which you have set to 100px in your CSS. The whole website content area had been put inside this.
Please look through your index.php and check for any missing closing tags. If none are found and this has been done on purpose, you will need to re-write your HTML markup
-
well I took a look at the code and just can't find the problem. I guess you are use Chrome console. It says that there's a header closing tag after the footer but there is no header closing tag in my index file after the footer, the header closing tag is placed way before the footer. I guess that there is a problem in the moduletable class. Commented Apr 22, 2015 at 16:31
-
The module table class is fine. The problem being is that your whole website is inside this class so your whole website is basically 100px in height. You need to sort your HTML markup drastically.– LodderCommented Apr 22, 2015 at 16:36