I have a template for a dotnetnuke skin and I am getting extra blank space at the bottom of my page and I cannot seem to get rid of it. When I just run the html and css, it views fine, but when I upload to a skin I get an extra space at the bottom.
If you want to see the problem you can go here
http://temp.sentinelhealthcare.org/...aling.aspx and scroll to the bottom.
I have tried various forms of height and padding tags and can't seem to fix it
Does anyone have any thoughts?
Here is my CSS
body{
text-align: center;
width: 100%;
margin: 0;
padding: 0;
background-image: url(images/background_03.jpg);
background-repeat: repeat-y;
}
#header{
background-image: url(images/background_01.jpg);
height: 238px;
width: 100%;
vertical-align: top;
}
#headerContainer{
text-align: center;
margin-left: auto;
margin-right: auto;
width: 886px;
}
#logo{
background-image: url(images/block_02.png);
width: 201px;
height: 124px;
float: left;
margin-top: 10px;
}
#headerBlock{
background-image: url(images/block_03.png);
width: 495px;
height: 89px;
float: right;
margin-top: 30px;
}
#menu{
background-image: url(images/block_01.png);
width: 886px;
height: 54px;
margin-top: 30px;
float: left;
}
#content{
background-image: url(images/background_02.jpg);
width: 100%;
background-repeat: no-repeat;
text-align: center;
}
#providers{
background-image: url(images/block_04.png);
float: left;
width: 256px;
height: 157px;
margin-bottom: 15px;
}
#events{
background-image: url(images/block_06.png);
float: left;
width: 256px;
height: 157px;
margin-bottom: 15px;
}
#programs{
background-image: url(images/block_08.png);
background-repeat: no-repeat;
float: left;
width: 256px;
height: 425px;
margin-bottom: 15px;
}
#footer{
background-image: url(images/background_04.jpg);
height: 230px;
width: 100%;
text-align: center;
}
#footerContainer{
text-align: left;
padding-left: 20px;
width: 866px;
margin-left: auto;
margin-right: auto;
}
#footerContent{
float: left;
margin-top: 50px;
}
#footerLogo{
float: right;
margin-top: 110px;
padding-right: 20px;
}
.contentText{
padding-left: 20px;
margin-top: 5px;
float: left;
width: 590px;
text-align: left;
padding-right: 20px;
vertical-align: text-top;
}
.contentBubble{
vertical-align: top;
}
.newsText{
text-align: left;
margin-left: 105px;
margin-top: 5px;
}
.textBubble{
margin-top: 45px;
margin-left: 15px;
}
And here is my HTML