?
Solved

Content going under footer in Firefox

Posted on 2005-04-09
11
Medium Priority
?
456 Views
Last Modified: 2008-03-17
Having trouble with footer on Firefox:

http://www.indigotshirts.com/gapingvoid/

FIx urgently required.
0
Comment
Question by:alexwalker
  • 5
  • 5
10 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13745207
You need to start by validating that page at: www.w3c.org 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.

Cd&
0
 
LVL 12

Accepted Solution

by:
GoofyDawg earned 500 total points
ID: 13839448
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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; }
</style>
</head>
<body>
<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>
      <div id="footer">FOOTER</div>
</div>
</body>
</html>

GoofyDawg
0
 
LVL 12

Expert Comment

by:GoofyDawg
ID: 13839460
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.

GoofyDawg
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 500 total points
ID: 13839601
.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.

Cd&
0
 
LVL 12

Expert Comment

by:GoofyDawg
ID: 13839697
COBOL, is this a box-model solution?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13839860
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.

BTW,

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: http://www.w3.org/TR/2004/WD-xhtml2-20040722/

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

Cd&
0
 
LVL 12

Expert Comment

by:GoofyDawg
ID: 13844649
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...

GoofyDawg
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13855752
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.

Cd&
0
 
LVL 12

Expert Comment

by:GoofyDawg
ID: 13856147
Hmm... so much for global search and replace... :)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 14289012
Split me and GoofyDawg IMHO.

Cd&
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month13 days, 9 hours left to enroll

750 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