Content going under footer in Firefox

Having trouble with footer on Firefox:

FIx urgently required.
Who is Participating?
GoofyDawgConnect With a Mentor Commented:
Looking over your CSS, it looks like it's the result of over-analysis (and I don't mean this unkindly). I've been slowly transitioning my developers to move to compliant layouts, and invariably, they've come up with lots of conflicts in the styles they've produced for their pages. With CSS, it's very easy to get lost in the details, and you end up adding a lot of stuff that you really don't need. COBOLdinosaur pointed out a couple of things above, but let me add to what he was saying. First of all, if you're going to use floats, don't worry about doing any positioning. It's just not needed. Floated containers will automagically "pull" the next container in the document structure along with them, so by default, the "pulled" containers are relatively positioned to the floater. Second of all, keep in mind that simpler is better with respect to CSS-driven layouts. Shortcut where you can, and use the inheritance (cascading) model of CSS to your advantage.

Now, with respect to your box model hacks, I'd like to suggest a workaround that actually works quite well. Instead of going the voice-family route, you might try something like this:

div {
  box-sizing: content-box;
  -moz-box-sizing: content-box;

box-sizing is a CSS3 recommendation that makes borders around boxes obey the traditional box drawing model; that is, when a border is placed around a container, the original specified width is retained. This breaks the CSS2 rule that borders and padding are additive to the overall width of the container, which IMHO is totally counterintuitive. The -moz-box-sizing property is specific to Mozilla. So why am I mentioning this? Simply because it makes all the browsers play well together, even Opera. You see, IE ignores this completely, Opera obeys it, but adheres to the traditional model just like IE, and Mozilla/FF uses the equivalent. So what we're doing here is designating Mozilla to be the odd man out, as opposed IE being the odd man out as usual (and no, I don't favor a particular browser over another). My only concern is to make all the browser play nice.

That said, here's some code that I quickly came up with that you might use as a template to guide you. No overlap occurs, and the HTML is XHTML 1.0 Strict - compliant. Here it is:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
      body { text-align: center; padding: 0px; margin: 0px; background-color: #003366;      font: normal .75em Arial, Helvetica, sans-serif;       }
      #container { width: 600px; margin: 20px auto 0px auto; text-align: left;       }
      #header, #footer { clear: both; color: #FFFFFF; background-color: #999933; padding: 4px; border: 1px solid #CCCCCC; margin-bottom: 20px; font-size: 2em; font-weight: bold; }
      #subContainer { clear: both; background-color: #FFFFDD; border: 1px solid #999999; margin-bottom: 20px; }
      #content { float: left; width: 480px; border-right: 1px dashed #666; padding: 4px; margin-top: 6px; margin-right: 4px; }
      #siderail { margin-top: 6px; padding: 4px 6px; }
<div id="container">
      <div id="header">HEADER</div>
      <div id="subContainer">
            <div id="content">CONTENT<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
            <div id="siderail">RAIL<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
      <div id="footer">FOOTER</div>

You need to start by validating that page at: using the HTML validator.  Once the tagging is correct, that may solve the porblem.  The other thin is you are appling relative positon to eeemnts that are not offset, if they are not offset then remove the positon:relative; they should be the default which is static, ad using relative may ocnfuse the browser.

I should probably explain the code a bit:

#container controls the overall width and centering of the content.

I've combined #header and #footer for simplicity. They'll need to be broken out (though you'll need to make sure that their clear:both; properties are retained in each)

#subContainer just holds the floats and provides a single container from which the footer can clear.

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

COBOLdinosaurConnect With a Mentor Commented:
.someEL {letter-spacing:.6em}
.someEL[id] {letter-spacing:.5em}

Id can be any attribute the element has, but id or name are handy for links I use href.  IE set the first one and pass on the second because he does not understand the standards compliant syntax

Standards compliant browsers see the second one on override the original.

No hack the code is 100% compliant, and it does not take advantage of IE bugs the way some hacks do.  If IE ever becomes compliant and recognizes the second rule, it is safe to assume they will also comply with the sizing rules. So there will be less work to do removing hacks and there will be less time pressure because the bad code will just get ignored.

The important thing is to avoid using hacks that you will have to go back an fix if MS does a service pack that fixes one of the bugs.

COBOL, is this a box-model solution?
What I posted isn't know.  Itis a generall solution to cross browser issues that avoid the hacks.  You can use it to set the dimensions differently.


I recommend against using the XHTML doctype.  The only one recommend is HTML4.01 strict.  I can't see any reason to use a crippled standard that even w3c sees an impossible to implement.  The coding required for copliance ends up moot or being remove with the 2.0 standard, and the whole approach to seperation and structure gets enforced differently.

When you see what is coming it does not make sense to do anything to support an terim standard like XHTML1.  See:

I can't believe all the time I wasted doing <br /> and now there will be no br tag.

Oh well... looks like global search and replace <br /> with <separator />. Why the hell do they want to create more bytes?!!! Just doesn't make any sense. I can't see any difference btw separator and br. As I said... oh well...

You got it wrong seperator replaces hr.

br becomes redundant because of the l tag which is a container for lines
<l>a line of text</l>

Will include a line feed and wil make line numbering and for matting passible through CSS.

Hmm... so much for global search and replace... :)
Split me and GoofyDawg IMHO.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.