Need some CSS help with two small issues

**deronsizemore** · 11-10-2006, 04:49 PM

Here is the design thus far:

1. FIXED

2. FIXED

**AmbulanceBlues** · 11-10-2006, 09:06 PM

There is an unnamed div encompassing all of the content in your footer div, which seems to be redundant. Your CSS Says this:

Code:

#footer {
width: 840px;
text-align: left;
margin: auto auto;
clear: both;
border-top: 1px dotted #999;
}
#footer div {
padding: 10px 5px 0 0;
}

The top border is applied to the footer div itself, not the second internal one. So, maybe whatever changes you are trying to make are being applied to the internal unnamed div rather than the actual one. That's what the CSS above would lead me to believe. I don't know if you are hand-coding or using a WYSIWYG editor. I'm no expert - I really just research things like this for my own edification - but itseems that might be where your problem starts.

Also, I have IE 7 and I think maybe your script was sending me CSS that it shouldn't have, because there were some comments to the effect that this or that was only for IE5, or 6, or 7. Is my browser supposed to interpret that, or is it a server side thing?

**deronsizemore** · 11-10-2006, 09:38 PM

Originally Posted by AmbulanceBlues

There is an unnamed div encompassing all of the content in your footer div, which seems to be redundant. Your CSS Says this:

Code:

#footer {
width: 840px;
text-align: left;
margin: auto auto;
clear: both;
border-top: 1px dotted #999;
}
#footer div {
padding: 10px 5px 0 0;
}

The top border is applied to the footer div itself, not the second internal one. So, maybe whatever changes you are trying to make are being applied to the internal unnamed div rather than the actual one. That's what the CSS above would lead me to believe. I don't know if you are hand-coding or using a WYSIWYG editor. I'm no expert - I really just research things like this for my own edification - but itseems that might be where your problem starts.

Also, I have IE 7 and I think maybe your script was sending me CSS that it shouldn't have, because there were some comments to the effect that this or that was only for IE5, or 6, or 7. Is my browser supposed to interpret that, or is it a server side thing?

I'm hand coding using edit+.

The extra div is intentional. From everything I've read, this is suppose to be the easiest way to get around the broken box model of IE. Because anytime you are specifying a width explicitly and you also specify padding/margins on the right or left you can run into some problem with browsers interpreting it wrong, so you can create an extra child div to apply padding too, so it stays separate from the attribute with the width applied.

As far as the extra comments, they are suppose to be there also. They are just small conditional statements that send specific rules to IE browsers only to get by IE's little quirks. I'm not an expert myself and don't know all the little hacks and work arounds for IE, so conditionals I think are the easiest way. From everything I've read they are gaining in popularity. The site works fine in IE 6 and 7 without the extra conditional statements, but IE adds some extra padding/magins in a few places and I just threw in the conditionals so that the site looks exactly the same in Firefox and IE.