Hey Everybody-

Some of you who have read a few of my other posts probably know that I am trying to learn how to make layouts with div's and learn lots of CSS. I'm working on another layout ( www.anwipr.com/drama ) and am having a few problems.

Problems:

1) The navigation "tabs" on the top have a margin in FF that I want to get rid of, even though I specified a margin of 0px...

2) All of my lists (ul) have large left-margins in FF which I also want to get rid of. I also specified lists to have a margin-left of 0px.

3) The footer. I have one footer div, and inside that, two more. One aligned/float to the left and one to the right. In FF, the largest div extends off of the page and the other two divs inside it extend to the bottom of the page.

4) I know this is a little nit-picky, but in IE, the header (background color) doesn't extend all the way to the right to it's border...

Thanks in advance- you all are always so helpful. (General suggestions are also welcome, I'd love to learn from any constructive criticism.)

oops, forgot my CSS code. I guess you can always just view the source, but here it is anyways.

/****** BODY and TAG STYLES ******/
body {
 font-size: 90%;
 font-family: Verdana, Tahoma, Arial, sans-serif;
 color: #000000;
 text-align: center;
 background-color: #CCCCCC;
 background-image: url('img/background.gif');
 background-repeat: no-repeat;
 background-attachment: fixed;
 }
a {
 color: #000066;
 font-weight: bold;
 text-decoration: none;
 background-color: inherit;
 }
a:hover {
 color: #000000;
 font-weight: bold;
 text-decoration: underline;
 background-color: inherit;
 }
img.left, img.center, img.right {
 padding: 5px;
 border-style: solid;
 border-width: 1px;
 border-color: #CCCCCC;
 }
img.left {
 float: left;
 margin: 0px 12px 5px 0px;
 }
img.center {
 display: block;
 margin: 0px auto 5px auto;
 }
img.right {
 float: right;
 margin: 0px 0px 5px 12px;
 }
/****** LAYOUT ******/
#container {
 width: 760px;
 margin: 20px auto;
 padding: 1px 0px;
 text-align: left;
 background-color: #FFFFFF;
 color: #000000;
 border-width: 2px;
 border-style: solid;
 border-color: #999999;
 }
#header { 
 height: 110px;
 width: 758px;
 background-color: #000066;
 color: #FFFFFF;
 margin: 0px 0px 0px 1px;
 background-image: url('logo.gif');
 background-repeat: no-repeat;
 }
#nav {
 height: 1.3em;
 line-height: 1.3em;
 width: 758px;
 margin: 0 1px;
 background-color: #000066;
 color: #FFFFFF;
 }
 
#nav li {
 float: left;
 list-style-type: none;
 border-right: 1px solid #FFFFFF;
 white-space: nowrap;
 }
#nav li a{
 display: block;
 padding: 0px 10px;
 font-size: 0.75em;
 font-weight: normal;
 text-transform: uppercase;
 text-decoration: none;
 background-color: inherit;
 color: #FFFFFF;
 }
#nav a:hover, #nav li .selected {
 background-color: #FFFFFF;
 color: #000066;
 text-decoration: none;
 }
 
/****** CONTENT ******/
 
#content {
 float: left;
 width: 530px;
 font-size: 0.9em;
 padding: 20px 0px 0px 20px;
 line-height: 1.2em;
 }
#content h1,h2,h3,h4,h5,h6,h7 {
 display: block;
 margin: 10px 0px;
 color: #000066;
 background-color: inherit;
 letter-spacing: -1px;
 }
 
/****** BOXES AND SIDE BOXES ******/
 
.contentLeft {
 float: left;
 width: 48%;
 }
.contentRight {
 float: right;
 width: 48%;
 }
.contentFull {
 clear: both;
 }
.small {
 font-size: 0.8em;
 line-height: 1em;
 }
.textCenter {
 text-align: center;
 }
.textRight {
 text-align: right;
 }
.box {
 margin: 10px 0px;
 padding: 10px;
 border-style: solid;
 border-color: #999999;
 border-width: 1px;
 line-height: 1.5em;
 background-color: #E4E4E4;
 }
.ad, .adleft, .adright {
 cursor: pointer;
 }
.ad {
 margin: 10px 10px;
 padding: 10px;
 border-style: solid;
 border-color: #999999;
 border-width: 1px;
 line-height: 1.5em;
 background-color: #E4E4E4;
 width: 150px;
 font-size: 75%;
 }
.adleft {
 margin: 10px 10px;
 padding: 10px;
 border-style: solid;
 border-color: #999999;
 border-width: 1px;
 line-height: 1.5em;
 background-color: #E4E4E4;
 width: 150px;
 float: left;
 font-size: 75%;
 }
.adright {
 margin: 10px 10px;
 padding: 10px;
 border-style: solid;
 border-color: #999999;
 border-width: 1px;
 line-height: 1.5em;
 background-color: #E4E4E4;
 width: 150px;
 float: right;
 font-size: 75%;
 }
 
 
/****** SIDEBAR ******/
 
 
#sidecontent {
 float: right;
 width: 170px;
 padding: 20px 20px 10px 0px;
 line-height: 1.4em;
 font-size: 0.9em;
 }
#sidecontent .box {
 font-size: 0.8em;
 }
 
/****** SIDE MENU BLOCKS ******/
 
.sidemenu {
 margin: 0px 0px 20px 8px;
 font-size: 0.9em;
 }
.sidemenu li {
 list-style-type: none;
 display: block;
 padding: 2px;
 margin-bottom: 2px;
 }
.sidemenu li a {
 font-weight: bold;
 text-decoration: none;
 }
.sidemenu li a:hover {
 font-weight: bold;
 text-decoration: underline
 }
.sidemenu li ul {
 margin: 3px 0px 3px 15px;
 font-size: 1em;
 font-weight: normal;
 }
 
/****** FOOOTER ******/
#footer {
 clear: both;
 width: 758px;
 padding: 5px;
 margin: 30px 1px 0px 1px;
 font-size: 0.9em;
 color: #FFFFFF;
 background-color: #000066;
 font-size: 75%;
 text-align: center;
 }
#footer a {
 color: #FFFFFF;
 text-decoration: none;
 font-weight: bold;
 }
#footer a:hover {
 color: #999999;
 text-decoration: underline;
 font-weight: bold;
 }
#footer #footerleft {
 float: left;
 text-align: left;
 }
#footer #footerright{
 float: right;
 text-align: right;
 }

Yes, it is a little bit messy and some elements are unused, but I plan on cleaning up once I finish the project.

1) - You're getting margin-collapse, which is NOT a bug by the way. Add padding-top: 1px; and the #nav will move up where you want it. However, you will also have to change the height on #nav to at least 2.5em.

2) Get in the habit of zeroing out margins AND padding on your lists when you zero out the <body>. Add padding: 0 to .sidemenu and the lists will move over.

3)The overflow of the large <div> isn't your only problem in FF. In FF, the blue footer isn't high enough to "contain" the contents. Give the footer a defined height.

For the other problem:
1 - if you're going to apply rules to multiple elements, then they must be separated by commas, you have #footer #footerleft - no commas;
#footer, #footerleft {
float: left;
text-align: left;
}

#footer, #footerright{
float: right;
text-align: right;
}
2 - If you are going to float an element you MUST give it a defined width. Specify widths for #footerright and #footerleft and you'll get better results. To stop the 'overflow', take the width off of #footer since it will be no wider than the container that it sites in. That should also eliminate problem #4 as the footer is holding the container open wider than the 758px you specified.

You are dealing with IE's busted box model and it's other various vagaries. Read through the Explorer Exposed ! section at www. positioniseverything.net