Minor problem, but im css handicapped

[cbier]

I am currently developing my second website using CSS. It is being displayed the way I want it in FF but in IE the content and sidebar boxes are going over the footer.

http://www.lincolnbuyinggroup.com/new

I have a margin-bottom: -300px; applied to both the content and sidebar to pull the footer closer to them. Now they just want some personal space, like FF is giving. Ya know?

Here is my CSS;



#html,body {
margin-top:0;
padding:0;
margin-bottom:0;
}

a{
color:#96cb45;
}


#allContent {
width: 1000px;
background:#FFFFFF;
font-family:arial;
font-size:12px;
margin-left:auto;
margin-right:auto;
}

h1 {
font-family:arial;
font-size:15px;
font-weight:bold;
color:#033f78;
border-bottom: 1px dotted #033f78;
margin-bottom:0px;

}

h2 {
font-family:arial;
font-size:12px;
font-weight:bold;
color:#033f78;
margin-bottom:-1px;
margin-top:0px;
margin-right:-1px;
margin-left:-1px;
}

#head {
float:center;
width:1000px;
height: 280px;
}

#bodywrapper {
background-image:url(images/lbgbody.jpg);
height:300px;
width:1000px;
float:center;
margin-top:0px;
background-repeat:no-repeat;
}

#sidebar {
background-image:url(images/bgtrans.png);
float:left;
width:265px;
min-height:540px;
position:relative;
border: 0px solid;
z-index:1;
margin-bottom: -300px;
padding-top:5px;
padding-bottom:10px;
padding-left:0px;
}

#sidebartitle {
width:250px;
height:25px;
color:#FFFFFF;
position:relative;
z-index:2;
font-weight:bold;
font-family:arial;
}

#sidebarwrap{
float:left;
margin-left: 10px;
}

#contentwrap {
float:right;
width:698px;
margin-right:10px;


}
#contenttitle {

width:700px;
height:25px;
position:relative;
z-index:2;
color:#FFFFFF;
font-weight:bold;
font-family:arial;
float:right;


}
#contentmain{
background-image:url(images/bgtrans.png);
min-height:600px;
width:680px;
float:right;
z-index:1;
position:relative;
border: 0px solid;
padding-top:5px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
margin-bottom: -300px;

}
#footer{
position:relative;
display: block;
}

#endthepage {

background-image:url(images/lbgfoot.png);
background-position:bottom;
position:relative;
min-height:375px;
padding-bottom:0px;
clear:both;
background-repeat:no-repeat;
}

#subfooter {
height:31px;
padding-top:2px;
background: #104680;
padding-bottom:2px;
}

#linknav {
color:#FFFFFF;
float:left;
border:0px solid;
width:825px;
padding-top:8px;
padding-left:50px;
}
#validation {
float:right;
background:#104680;
width:100px;"
}

#whatwebuywrap{
width: 300px;
min-height:150px;
padding-left:60px;
padding-right:30px;
padding-top:10px;
border:0px solid;
}
#whatwebuy {
border: 0px solid;
float:left;
}
#whatwebuy2 {
border: 0px solid;
float:right;
}
#sidebox1 {
width:240px;
background:#FFFFFF:
float:center;
padding-left:8px;
padding-right:0px;
}


Any help is appreciated. I want the footer to be pushed down as content expands.

[Schmoopy]

Link not working =/

Edit: Fixed - You need to take out the "www" to make it work

[cbier]

It is working fine over here, please try copying and pasting it. Thanks

[Schmoopy]

Quick note, not a solution to your problem, but thought I'd mention it anyway:


float:center

Is not a valid command, you can only float elements left or right.

[cbier]

Thank you for the input, im new to CSS im really trying to gather all the concepts

[bluewalrus]

You can use this to validate your css as well

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.lincolnbuyinggroup.com%2Fnew%2F&profile=css21&usermedium=all&warning=1&lang=en

I don't have ie unfourtnatley so 8/10 css probs i cant even see.

[monicasaha]

my suggestion is to remove the position: relative......becoz i think position sometimes create prob in IE

try..best of luck

[cbier]

I ran the CSS Through the validator, and it made no change.
So i tried removing position attributes, also to no avail. When i removed the position attributes from the content and sidebar it just put them behind the "endthepage" div. Heres the updated css. I think this issue is with margins, not positions. Because it works perfectly fine in FF with a -300px margin.


#html, body {
margin-top : 0;
padding : 0;
margin-bottom : 0;
}

a {
color : #96cb45;
}

#allContent {
width : 1000px;
background : #ffffff;
font-family : arial;
font-size : 12px;
margin-left : auto;
margin-right : auto;
}

h1 {
font-family : arial;
font-size : 15px;
font-weight : bold;
color : #033f78;
border-bottom : 1px dotted #033f78;
margin-bottom : 0;
}

h2 {
font-family : arial;
font-size : 12px;
font-weight : bold;
color : #033f78;
margin-bottom : -1px;
margin-top : 0;
margin-right : -1px;
margin-left : -1px;
}

#head {
width : 1000px;
height : 280px;
}

#bodywrapper {
background-image : url(images/lbgbody.jpg);
height : 300px;
width : 1000px;
margin-top : 0;
background-repeat : no-repeat;
}

#sidebar {
background-image : url(images/bgtrans.png);
float : left;
width : 265px;
min-height : 540px;
position : relative;
border : 0 solid;
z-index : 1;
margin-bottom : -300px;
padding-top : 5px;
padding-bottom : 10px;
padding-left : 0;
}

#sidebartitle {
width : 250px;
height : 25px;
color : #ffffff;
position : relative;
z-index : 2;
font-weight : bold;
font-family : arial;
}

#sidebarwrap {
float : left;
margin-left : 10px;
}

#contentwrap {
float : right;
width : 698px;
margin-right : 10px;
}

#contenttitle {
width : 700px;
height : 25px;
position : relative;
z-index : 2;
color : #ffffff;
font-weight : bold;
font-family : arial;
float : right;
}

#contentmain {
background-image : url(images/bgtrans.png);
min-height : 600px;
width : 680px;
float : right;
z-index : 1;
position: relative;
border : 0 solid;
padding-top : 5px;
padding-left : 10px;
padding-right : 10px;
padding-bottom : 10px;
margin-bottom : -300px;
}

#footer {
position : relative;
display : block;
}

#endthepage {
background-image : url(images/lbgfoot.png);
background-position : bottom;
min-height : 375px;
padding-bottom : 0px;
clear : both;
background-repeat : no-repeat;
}

#subfooter {
height : 31px;
padding-top : 2px;
background : #104680;
padding-bottom : 2px;
}

#linknav {
color : #ffffff;
float : left;
border : 0 solid;
width : 825px;
padding-top : 8px;
padding-left : 50px;
}

#whatwebuywrap {
width : 300px;
min-height : 150px;
padding-left : 60px;
padding-right : 30px;
padding-top : 10px;
border : 0 solid;
}

#whatwebuy {
border : 0 solid;
float : left;
}

#whatwebuy2 {
border : 0 solid;
float : right;
}


Thanks for your help guys. Any help is appreciated.

[cbier]

ITS A MIRACLE! HAHA!

I made #bodywrapper a min height so it expanded with the nested #contentmain and #sidebar divs. I also added 200px to the #bodywrapper min-height to make the negitive margin at the bottom of the page behave. I think this is kind of ghetto-rigged. But it works. Code is as follows..


#html, body {
margin-top : 0;
padding : 0;
margin-bottom : 0;
}

a {
color : #96cb45;
}

#allContent {
width : 1000px;
background : #ffffff;
font-family : arial;
font-size : 12px;
margin-left : auto;
margin-right : auto;
}

h1 {
font-family : arial;
font-size : 15px;
font-weight : bold;
color : #033f78;
border-bottom : 1px dotted #033f78;
margin-bottom : 0;
}

h2 {
font-family : arial;
font-size : 12px;
font-weight : bold;
color : #033f78;
margin-bottom : -1px;
margin-top : 0;
margin-right : -1px;
margin-left : -1px;
}

#head {
width : 1000px;
height : 280px;
}

#bodywrapper {
background-image : url(images/lbgbody.jpg);
min-height : 500px;
width : 1000px;
margin-top : 0;
background-repeat : no-repeat;
}

#sidebar {
background-image : url(images/bgtrans.png);
float : left;
width : 265px;
min-height : 540px;
position : relative;
border : 0 solid;
z-index : 1;
margin-bottom : -300px;
padding-top : 5px;
padding-bottom : 10px;
padding-left : 0;
}

#sidebartitle {
width : 250px;
height : 25px;
color : #ffffff;
position : relative;
z-index : 2;
font-weight : bold;
font-family : arial;
}

#sidebarwrap {
float : left;
margin-left : 10px;
}

#contentwrap {
float : right;
width : 698px;
margin-right : 10px;
}

#contenttitle {
width : 700px;
height : 25px;
position : relative;
z-index : 2;
color : #ffffff;
font-weight : bold;
font-family : arial;
float : right;
}

#contentmain {
background-image : url(images/bgtrans.png);
min-height : 600px;
width : 680px;
float : right;
z-index : 1;
position: relative;
border : 0 solid;
padding-top : 5px;
padding-left : 10px;
padding-right : 10px;
padding-bottom : 10px;
margin-bottom : -300px;


}

#footer {
display: inline;
}

#endthepage {
background-image : url(images/lbgfoot.png);
background-position : bottom;
min-height: 375px;
padding-bottom : 0px;

clear : both;
background-repeat : no-repeat;
}

#subfooter {
height : 31px;
padding-top : 2px;
background : #104680;
padding-bottom : 2px;
}

#linknav {
color : #ffffff;
float : left;
border : 0 solid;
width : 825px;
padding-top : 8px;
padding-left : 50px;
}

#whatwebuywrap {
width : 300px;
min-height : 150px;
padding-left : 60px;
padding-right : 30px;
padding-top : 10px;
border : 0 solid;
}

#whatwebuy {
border : 0 solid;
float : left;
}

#whatwebuy2 {
border : 0 solid;
float : right;
}