[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Extra white space below footer

Posted on 2012-09-15
Medium Priority
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
  • 3
  • 3
LVL 58

Expert Comment

ID: 38402258
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

ID: 38402274
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

ID: 38402280
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.
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

LVL 12

Expert Comment

by:Dean OBrien
ID: 38405008
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

ID: 38405048
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

mediakahuna earned 0 total points
ID: 38458733
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

ID: 38472788
My own solution/work-around.

Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

872 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