Hello everyone,
First off I apologize if this has been discussed. I've searched through the forums and have seen some topics close but not exactly what I'm trying to discover. We are in the process of a redesign of our current website. I am still fairly new and web design, at least in the aspect of using div tags. The current new design seems to display well in I.E. 7. but in Firefox 3.0.14 the tags don't quite display how I would like them to.

I've placed the files in a test folder so you all can view them

http://www.grimco.com/test/grimco_index_firefox.html

As you can see if you view it in I.E.7 (not sure on I.E. 8) the div tags all seem to display where they should. The footer stays at the bottom, etc. But when it's viewed in Firefox, Chrome, Safari, Seamonkey etc the footer information doesn't quite stay where it should.

In Firefox 3.0.14 the info for the footer stays in the correct placement but the image for the footer moves up in the page.

Any assistance would be greatly appreciated since I am starting to loose sleep on this one

Thank you
Grayves

Oh, here is the CSS if that is needed;




@charset "UTF-8";

/* Text-Styles */

.style5 {
font-family:Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #ffffff}
.style6 {
font-family:Geneva, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bolder; color: #ffffff; text-align: center;}
.style7 {
font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-weight:400; color: #ffffff; text-align: center;}
.style15 {
font-family:Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 500; color: #d4382e; text-align; left;}
h2 {
margin:0px 0px 10px 0px;
font-size:36px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
line-height:39px;
letter-spacing:-1px;
}
h3 {
margin:10px 0px 5px 0px;
font-size:14px;
line-height:21px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
}
h4 {
color:#007de2;
margin:0px 0px 0px 0px;
}
small {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#d4382e;
text-decoration:none;
}
small a {
color:#007de2;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }

a.button {
background:#32312f url(images/button_bg.jpg) repeat-x;
padding:5px 10px 5px 10px;
color: #ffffff;
text-decoration: none;
border:1px solid #32312f;
text-transform:uppercase;
font-size:9px;
line-height:25px;
}
a.button:hover {
background:#007de2 url(images/button_bg_o.jpg) repeat-x;
border-color:#007de2;
}

/* Background-Styles */

body {
margin:0px; padding:0px;
background-color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
color:#7f7d78;
font-size:13px;
line-height:19px;
}
#main {
padding-bottom:30px;
background-color: #FFFFFF;
background-image: url(images/background_light_slice.jpg);
background-repeat: repeat-x;
}
.container {
width:950px;
margin:0 auto;
position:relative;
}
#main .container {
background-image: url(images/header_background.jpg);
background-repeat: no-repeat;
width: 950px;
}

/* Header-Styles */

#header {
padding-top:20px;
padding-bottom:20px;
}
#main .container #banner {
height: 50px;
width: 950px;
float: left;
margin: 0;
}
#main .container #Div3 {
float: left;
width: 600px;
margin-left: 30px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: auto;
}
#main .container #Div4 {
float: left;
margin-left: 30px;
padding-top: 0px;
height: 235px;
width: 260px;
padding-bottom: 0px;
margin-right: 30px;
overflow: auto;
}
#main .container #Bottom_Divider {
float: left;
margin-right: 0px;
margin-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
#main .container #Div5 {
float: left;
height: 100px;
width: 285px;
margin-left: 30px;
padding-top: 10px;
}
#main .container #Div6 {
float: left;
height: 100px;
width: 285px;
margin-left: 30px;
padding-top: 10px;
}
#main .container #Div7 {
float: left;
height: 100px;
width: 260px;
margin-left: 30px;
padding-top: 10px;
}
#main .container #header #Div1 {
height: 235px;
width: 375px;
margin-left:325px;
margin-top: 45px;
float: left;
}
#main .container #header #Div2 {
height: 235px;
width: 220px;
margin-left:720px;
margin-top: 45px;
}

/* Top Menu Styles */

ul#menu {
margin:0px;
padding:0px;
position:absolute;
right:0px;
}
ul#menu li {
display:inline;
margin-left:12px;
}
ul#menu li a {
text-decoration:none;
color:#716d6a;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
color:#211e1e;
}

/* Footer Table Styles */

.shell{
width:950px;
margin:0 auto;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:9px;
color:#ffffff;
padding-top: 5px;
}
.shell a:link {color:#ffffff}
.shell a:visited {color:#ffffff}
.shell a:hover {text-decoration:underline}
#footer{background:url(images/background_footer.jpg) repeat-x; height:50px; color:#fff; }
#footer p{
width:300px;
font-size: 9px;
line-height:50px;
float: left;
}
#footer ul{
list-style-type: none;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
float: left;
display: inline;
}
#footer li{float:left; display: inline;}
#footer li a{
float:left;
display: inline;
color:#fff;
margin-right:50px;
line-height:12px;
padding-top:0px;
font-weight: 200;
font-size: 0.8em;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
#footer {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

You haven't cleared the floats above #footer. Put a border on #main and you see what's going on. It seems to be enough to add 'clear; both' to the rule for #footer. Don't know if 'both' is needed. I didn't want to read through all CSS, so I played it safe.
http://css-discuss.incutio.com/?page=ClearingSpace

Fix the errors also.
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes

http://jigsaw.w3.org/css-validator/validat...g=1&lang=en

Thank you so much.

I've updated that file. With your help on the 'clear 'both added to the footer, it's much closer to what it should be. I've also taken care of the errors I think (crosses fingers) for validation. Only thing now is, in FF and Chrome etc, the bottom footer is now right on the divs right above it. I've tried to add padding and tried margins to the footer but it moves the text in the footer, not the background image of the footer. If that makes sense.

Once agian thank you.

Any advice on the spacing issue?

Also I had actually just tried the "overflow" option on the main.container and that seemed to help, but didn't seem right. Big thanks on those links, makes much more sense now.

Try a bottom margin on one of the DIVs above instead. A top margin on the footer will just go under the floats above. It's miles to something that margin could "push" against.

Another option would be to place the footer outside #main. You would still need to clear the floats to make #main expand and contain them (see the css-d page for ways to do that).

That margin seems to have worked well. Thank you again.

Where would I see the CSS-D page? I want to make sure I do this the correct way, so if there is something I set up that is working but not really the right way to do it, I want to fix that.



Also as for the #footer being out side the #main, I thought I had that set up that way. When I originally started this, my goal was to keep the #footer outside of the #main so I could keep it "pushed" up against it at the bottom so it would always stay at the bottom of the #main no matter how much content was inside the #main. I think I did something incorrectly when setting that up but can't seem to figure out what it is.


Thank you again

The site I linked to above, http://css-discuss.incutio.com . css-d is a mailing list run by Eric Meyer, "The Father of CSS". The site is for list archiives, Wiki and so on.



Not sure, but I don't think so. I didn't count the DIVs, but when I put a border on #main and a clear on #footer, #footer was inside the #main border.