Extra white space below footer

Posted on 2012-09-15
Last Modified: 2012-10-08
The Joomla site I am working on has a front page and an inside page layout. The front page is about half the height of the inside page. Everything is displaying as expected except the footer on the front page is not anchored properly when viewed with Chrome and Firefox. There is a "white space" under the footer. The page does anchor correctly with Opera and IE. Is this is an HTML/css issue?.

What can I try to get rid of the white space?

The URL is ...

Cheers, Mediakahuna
Question by:mediakahuna
    LVL 58

    Expert Comment

    Isn't right in IE either (cannot check Opera) with an horizontal scroll and the problem stems from your class

    But I cannot see a simple solution yet, disabling everything but margin-top fixes it in IE but has no effect in FF or Chrome.
    And there is just too much CSS to look thru

    Maybe someone else can see an easy solution.

    In fact looking thru some more css you have negative margins all over the place.

    Author Comment

    Thanks for the reply., GaryC123.

    It does seem to be displaying correctly for me in IE9, for some reason.

    What tells you the issue is with #djk-page-fp?

    LVL 58

    Expert Comment

    IE9 gives the extra space at the right instead, you can scroll right
    IE8 gives the extra space at the bottom same as FF and Chrome.

    I'm not sure it is, I just changed the css to just margin-top and it fixed it in IE.
    But the layout is so much based on negative margins it's hard to know where to begin especially with the 8 stylesheets.
    LVL 12

    Expert Comment

    by:Dean OBrien
    Try removing:
    margin: -840px;

    From <div id="djk-page-fp">

    There is never a need to have a global negative margin, choose one or to directions max.

    LVL 58

    Expert Comment

    I would change the doctype to

    This will result in the page looking the same in all browsers making it easier to debug when things don't look the same. Transitional lets browsers do what they think they should be done...

    Accepted Solution

    In this case, I have created a DIV container of a specified size and hidden the overflow. It doesn't solve the issue with the whitespace on the bottom and side, but it does effectively hide it.

    Author Closing Comment

    My own solution/work-around.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now