[SOLVED] CSS Woes!

[godster]

Hi guys.

 

Having some really trouble with my CSS for a site I'm working on and cannot for the life of me fathom things out. I made a recent post assuming this had something to do with a spry drop down menu I was using, but having completely removed that I'm still experiencing the same issues, which leads me to believe its my own CSS that is causing the problems.

 

Now, as you will see from the attached image my homepage template is not behaving and presenting the following issues:

 

Wrapper should contain a grey background, which is visible behind the left and right column elements. The only way I can get this to show is to float: none the footer, but then the text in the footer shift up and under my right column.

 

The headers in the boxes (.boxheader and .boxheaderlarge) seem to have an invisible top margin which I can only correct through a negative margin-top with strange results.

 

The two boxes in the right column should be separate, exposing the grey of the wrapper.

 

There is also a top and bottom image associated with the .box and .boxheader elements and likewise for .boxlarge and .boxheaderlarge to create rounded edges, yet neither set of images is appearing, presumably to do with the strange margins?

 

My code is as follows....please, please help...I'm loosing hair rapidly.

 

#leftColumn {
width: 600px;
background-color: #F1FEF2;
float: left;
height: auto;
margin-left: 20px;
margin-top: 10px;
}
#rightColumn {
float: left;
width: 250px;
margin-left: 15px;
background-color: #606463;
height: auto;
margin-right: 10px;
margin-top: 10px;
}
#header {
height: 150px;
width: 900px;
}
#navbar {
height: 50px;
width: 900px;
}

#content {
width: 900px;
height: auto;
}
#footer {
width: 900px;
text-align: center;
float: left;
background-color: #606463;
padding-top: 5px;
margin: 0 auto;
}
#footer p {
font-size: 11px;
color: #FFFFFF;
font-family: 'Calibri', Arial;
margin-top: 10px;
}
#singleColumn {
float: left;
width: 750px;
background-color: #F1FEF2;
margin-left: 75px;
padding-left: 5px;
padding-top: 5px;
}
#wideColumn {
float: none;
width: 825px;
background-color: #F1FEF2;
margin-left: 35px;
padding-left: 5px;
padding-top: 20px;
}
#wideColumn p {
text-align:left;
margin-left: 40px;
font-family: 'Calibri', Arial;
padding-right: 50px;
}
#wideColumn h1 {
text-align:left;
margin-left: 40px;
font-family: 'Calibri', Arial;
}
p {
font-family: 'Calibri', Arial;
font-size: 14px;
}
a.list:link {
text-decoration:none;
font-family: 'Calibri', Arial;
font-size: 16px;
}
a.list:hover {
color:#000099;
text-decoration:none;
}
a.list:visited {
text-decoration:none;
font-family: 'Calibri', Arial;
font-size: 16px;
}
h1 {
font-family: 'Calibri', Arial;
font-weight:bold;
font-size: 20px;
color: #606463;
border-bottom: 1px solid #606463;
margin-right: 40px;
}
h2 {
font-family: 'Calibri', Arial;
font-weight:bold;
font-size: 20px;
color: #606463;
}
li {
font-family: 'Calibri', Arial;
font-size: 14px;
}
img {
border:none;
padding: 0;
margin: 0;
}
table.clear {
border-style: none;
}
tr {
border-style: none;
border-width: 1px;
border-color: #225236;
}
.alternative {
border-style: solid;
border-width: 1px;
border-color: #F1FEF2;
border-bottom:none;
background-color: #606463;
color: #FFF;
text-align:left;
}
.odd {
background-color:#E9E9E9;
font-family: 'Calibri', Arial;
border: 1px solid;
border-color: #F1FEF2;
}
.even {
background-color: #696;
color: #FFF;
font-family: 'Calibri', Arial;
border: 1px solid;
border-color: #F1FEF2;
}
.blank {
background-color: #F1FEF2;
color: #FFF;
font-family: 'Calibri', Arial;
border: 1px solid;
border-color: #F1FEF2;
}
th {
font-family: 'Calibri', Arial;
font-size: 14px;
border-style: solid;
border-width: 1px;
border-color: #225236;
}
th.solid {
background-color: #606463;
font-family: 'Calibri', Arial;
font-size: 14px;
font-weight:700;
text-align:center;
color: #FFFFFF;
border-color: #F1FEF2;
}
th.solidright {
background-color: #225236;
font-family: 'Calibri', Arial;
font-size: 14px;
font-weight:700;
text-align:center;
color: #FFFFFF;
text-align:center;
border-right-color: #225236;
}
td.formatted {
font-family: 'Calibri', Arial;
font-size: 14px;
width:auto;
border-style: solid;
border-width: 1px;
border-color: #225236;
text-align:left;
}
td.formattedCenter {
font-family: 'Calibri', Arial;
font-size: 14px;
width:auto;
border-style: solid;
border-width: 1px;
border-color: #F1FEF2;
text-align:center;
padding: 0;
}
td.left {
color: #000;
font-family: 'Calibri', Arial;
font-size: 14px;
width:auto;
border-style: solid;
border-width: 1px;
border-color: #F1FEF2;
text-align:left;
background-color: #E9E9E9;
}
td.clear {
font-family: 'Calibri', Arial;
font-size: 14px;
width:auto;
border-style: none;
background-color:#E9E9E9;
text-align:left;
}
td {
font-family: 'Calibri', Arial;
font-size: 14px;
width:auto;
border-style: none;
border-width: 1px;
text-align: left;
}
td.datasheetHeading {
background-color: #696;
font-family: 'Calibri', Arial;
font-size: 18px;
font-weight:700;
text-align:center;
color: #FFFFFF;
}	
#wrapper {
height: auto;
width: 900px;
margin-left: 175px;
background-image: url(/images/pixel2.jpg);
background-repeat: repeat;
margin: 0 auto;
}
#wrapper2 {
height: auto;
width: 900px;
background-image: url(/images/pixel_long.jpg);
background-repeat: repeat-x;
margin: 0 auto;
background-position: left top;
}
#wrapper3 {
width: 900px;
margin: 0 auto;
background-color: #606463;
}
#wrapper4 {
height: auto;
width: 900px;
margin-left: 175px;
background-image: url(/images/pixel_vlong.jpg);
background-repeat: repeat;
margin: 0 auto;
}
#wrapper5 {
height: auto;
width: 900px;
margin-left: 175px;
background-image: url(/images/pixel5.jpg);
background-repeat: repeat;
margin: 0 auto;
}
#wrapper6 {
height: auto;
width: 900px;
margin-left: 175px;
background-image: url(/images/pixel6.jpg);
background-repeat: repeat;
margin: 0 auto;
}
form {
margin-left: 40px;
margin-right: 40px;
margin-bottom: 10px;
background-color: #E9E9E9;	
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
font-family: 'Calibri', Arial;
font-size: 18px;
}
.mandatory {
color: #F00;
}
table {
margin-bottom: 5px;
}
.sheetimage {
border: 5px solid #FFF;
}
.boxheaderlarge {
margin: 0;
;
background-color: #696;
text-align: left;
font-size: 18px;
font-family: 'Calibri', Arial;
margin-top: 0px;
background-image: url(../images/top_container.gif) no-repeat top left;
}
.boxheaderlarge h2 {
color: #FFF;
padding-left: 5px;
}
.boxlarge {
background: #F1FEF2;
background-image:url(../images/bottom_container.gif) no-repeat bottom left;
width: 600px;
color: #000;
}
.boxlarge p {
padding-left: 5px;
padding-right: 5px;
}
.boxheader {
margin: 0;
background-color: #696;
text-align: left;
font-size: 18px;
font-family: 'Calibri', Arial;
colour: #FFF;
background-image:url(../images/box_top_small.gif) no-repeat top left;
}
.boxheader h2 {
color: #FFF;
padding-left: 5px;
}
.box {
background: #F1FEF2 url(..images/box_bottom_small.gif) no-repeat bottom left;
width: 250px;
margin: 0;
color: #000;
text-align: left;
float: right;
}
.box p {
padding-left: 30px;
padding-right: 5px;
}

 

Let me know if you need to see the HTML also guys.

 

[attachment deleted by admin]

[godster]

After much deliberation I've managed to resolve two of the issue, namely:

 

The additional margin in the headings. I found this to be the default margin for the heading tags residing in these divs. Was set to 16px above and below and I removed using margin: 0;

 

Have created a 10px margin between right column boxes by creating a separate class .box2 and adding a top margin to that.

 

Issues remaining which I cannot figure is the problems with the wrapper and footer and loosing the background dark grey that should be filling between the elements and why I seem unable to add background images to my divs, for a rounded corner effect.

[godster]

Another one down....

 

Wrapper was getting hung up on one of the containers, although still not sure why it would do this so perhaps someone could explain.

 

I did find a fix however, by placing the line <br style="clear: both;"> just before the closing </div> of my wrapper.

 

Did the job!

 

Just the images issue now.....

 

[godster]

Finally managed to resolve this by prefixing the image URL with .../ as I was previewing offline.

 

Been a tricky one but a good learning curve at the same time.