[Solved] float element - background image issues

Hi guys,

The problem i am having is with a float element on my page. the float element contains a form containing a html table of content.
I have set a background color on the float so i can see the dimensions of it in the browser, i have put a title and text before the form, which appears fine.
But the float only reaches down to the second row of my table, and so you cant see the rest of my form or table content?? and i have no idea why!!!!

Its quite hard to explain what i mean, if you go to go4home.co.uk/login_form.html you can see the page which i am talking about.

I will also include the html and the css below, so you can see the code, if anyone could help me out with what the problem could be that would be great!! Is it due to tables and floats not functioning with each other??

I have used the table because it seemed teh best way to do it. However i was thinking of using CSS with floats to creat the form, would this be a better practice? I was pondering on using my content-leftcolumn and content-rightcolumn floats to store the content in for the submit form, but the padding etc wont suit this design, should i create new floats for it?

What do you think is the best procedure for this??

Any comments or feedback would be great, thankyou in advance!!

HTML

Go4home.co.uk - Find your dream property, or advertise your house for sale on the property market on go4home.co.uk

login

Not Registered?

Log in here

Not registered? Please register here and start looking for your dream home now!

Otherwise please enter your username and password below to sign in to your profile

* Indicates a required field




Your Username: *






Your Password: *






Remember me?

Forgotten your password?

If you have forgotten your password, then don't worry! just provide us with your registered email address below and we will give you easy instructions on how to reset your password








Email:

CSS

html, body {
background-color:#FFFFFF;
color:#FFFFFF;
font-size: 12px;
font-weight:bold;
font-family: Century Gothic;
text-align:center;
margin: 0;
padding: 0;
height: 100%;
}

body.shadow {
height: 33px;
filter: Shadow(Color=#FFFFFF,
Direction=135,
Strength=2);
}

#mainContainer {
/*margin: 0 0 -25px 25px;*/
width: 760px;
text-align:left;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;

}

#footer {
width: 100%;
background:url(Images/ContentBar2.jpg) no-repeat;
background-position:center;
position: absolute;
bottom: 0 !important;
bottom: -1px;
height:30px;
}

#container-Content {
/*background-position:6px 158px;*/
width: 760px;
height:100%;
position: relative;
padding-bottom: 35px;
}

#content-TopContent {
background-repeat:no-repeat;
padding-bottom:-20px;
height:149px;
width:100%;
}

#content-centrecontent {
background:#3366FF;
float:left;
width:100%;
height:100%
}

#content-leftcolumn {
float:left;
width:50%;
height:100%;
}

#content-rightcolumn {
float:right;
width:50%;
height:100%;
}

.blackText {
color:#000000;
}

a {
font-size: 9px;
font-weight: bold;
}
a:link {
color: #CCCCCC;
text-decoration: none;
}
a:visited {
color: #CCCCCC;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: none;
}

a.blue {
font:"Century Gothic";
font-style:normal;
font-size:10px;
color:#487381;
}
a.blue:hover {
text-decoration: underline;
color:#174554;
}

p {
color:#FFFFFF;
font-size: 12px;
font-family: Century Gothic;
text-align:left;
position:relative;
left:20px;
top:-20px;
}

p.blue {
font-weight:bold;
font-size:10px;
color:#174554;
position:relative;
left:10px;
top:-10px;
z-index:42;
}

hr {
color:#FF0000;
}

h1 {
position:relative;
left:20px;
top:-15px;
color:#4beb55;
font-size:17px;
font-weight:bolder;
z-index:32;
}

h1.selling {
color:#174554;
z-index:33;
}

h1.blueSmall {
color:#174554;
font-size:14px;
position:relative;
top:5px;
left:7px;
}

h1.yellow {
color:#fcf010;
position:relative;
top:5px;
left:27px;
}

h1.white {
color:#FFFFFF;
position:relative;
top:5px;
left:20px;
}

h1.green {
color:#66da6f;
position:relative;
top:5px;
left:50px;

}

h2 {
font-size:22px;
font-weight:bold;
padding-top:5px;
padding-left:35px;
padding-bottom:-20px;
}

h2.shadow {
height: 33px;
filter: Shadow(Color=#080808,
Direction=135,
Strength=5);
}

h3 {
font-size:19px;
font-weight:bold;
}

.textSmall {
font-size:10px;
}

.textSmallGreen {
font-size:10px;
color:#00FF00;
}

#TopBar {
background-image:url(Images/topBar.jpg);
position:relative;
left:0px;
top:-4px;/*-260*/
width:754px;
height:93px;
padding:0;
z-index:5;
visibility: visible;
}

#myProfile {
background-image:url(Images/myProfile.png);
position:relative;
left:655px;
top:-27px;
width:72px;
height:65px;
z-index:8;
visibility: visible;
}

#Logo {
position:relative;
left:29px;
top:30px;
width:207px;
height:40px;
z-index:7;
visibility: visible;
}

#Login {
position:relative;
width:29px;
height:15px;
z-index:9;
left: 674px;
top:-54px;
visibility: visible;
}

#NotRegisteredText {
position:relative;
left:651px;
top:-48px;
width:77px;
height:11px;
z-index:6;
visibility: visible;
}

#NotRegisteredText:link {
font:"Century Gothic";
font-style:normal;
font-size:10px;
color:#174554;
}

#NotRegisteredText:a:hover {
text-decoration:underline;
}

#menuHoverStates {
background-image:url(Images/MenuHoverStates.jpg);
position:relative;
height:156px;
width:760px;
left: 2px;
}

#navigationMenu {
background:url(Images/MenuHoverStates.jpg);
position:relative;
top:-15px;
width:740px;
height:40px;
margin: 1em 0;
padding:7px 0 10px 20px;
font: bold 14px/1 sans-serif;
color:#fff;
text-decoration: none;
}

#navigationMenu li {
display: inline;
list-style: none;
padding: 0 0 50px 0;
margin: 0;
}

.HomeButton a {
background-image:url(Images/leftMenuBackground.jpg);
text-align:center;
width:105px;
height:49px;
z-index:40;
visibility: visible;
}

.HomeButton a:hover {
background-image:none;
background-color:transparent;
}

.SearchButton a {
background-image:url(Images/centralMenuBackground.jpg);
position:relative;
width:113px;
height:49px;
z-index:11;
left: 108px;
top: 99px;
visibility: visible;
}

.SearchButton a:hover {
background-image:none;
background-color:transparent;
}

.MoneyMarketButton a {
background-image:url(Images/centralMenuBackgroundLARGE.jpg);
position:relative;
width:200px;
height:49px;
z-index:12;
left: 221px;
top: 0px;
visibility: visible;
}

.MoneyMarketButton a:hover {
background-image:none;
background-color:transparent;
}

.GoBuyButton a{
background-image:url(Images/MenuGoBuy.jpg);
position:relative;
width:110px;
height:51px;
z-index:13;
left: 419px;
top: 99px;
visibility: visible;
}

.GoBuyButton a:hover {
background-image:none;
background-color:transparent;
}

.GoSellButton a{
background-image:url(Images/MenuGoSell.jpg);
position:relative;
width:110px;
height:51px;
z-index:14;
left: 531px;
top: 99px;
visibility: visible;
}

.GoSellButton a:hover {
background-image:none;
background-color:transparent;
}

.HelpButton a {
background-image:url(Images/rightMenuBackground.jpg);
position:relative;
width:116px;
height:49px;
z-index:15;
left: 641px;
top: 99px;
visibility: visible;
}

.HelpButton a:hover {
background-image:none;
background-color:transparent;
}

#BuyingWindow {
float:left;
background-image:url(Images/BuyingWindow.jpg);
background-repeat:no-repeat;
margin-left:5px;
width:374px;
height:204px;
z-index:16;
visibility:visible;
}

#SellingWindow {
/*position:relative;
left:0px;
top:0px;*/
float:left;
background-image:url(Images/SellingWindow.jpg);
margin-left:5px;
width:372px;
height:204px;
z-index:17;
visibility: visible;
}

#ContentWindow {
float:left;
background-image:url(Images/MovingHouseWindow.jpg);
background-repeat:no-repeat;
padding-right:0px;
margin-top:5px;
margin-left:5px;
width:183px;
height:147px;
z-index:18;
visibility: visible;
}

#ContentWindow.pink {
float:left;
background-image:url(Images/PinkWindow.jpg);
background-repeat:no-repeat;
margin-left:5px;
z-index:19;
}

#ContentWindow.orange {
float:left;
background-image:url(Images/OrangeWindow.jpg);
background-repeat:no-repeat;
z-index:20;
}

#ContentWindow.aboutUs {
float:left;
background-image:url(Images/AboutUsWindow.jpg);
background-repeat:no-repeat;
z-index:22;
}

#CopyrightText {
background-image:url(Images/CopyrightText.jpg);
position:relative;
top:100px;
left:100px;
width:134px;
height:13px;
z-index:29;
}

#BuyingText {
position:relative;
z-index:30;
width: 89px;
left: 40px;
top: 162px;
visibility: visible;
}

#SellingText {
position:absolute;
z-index:31;
width: 89px;
left: 431px;
top: 162px;
visibility: visible;
}

#SearchBar {
background-image:url(Images/SearchBar.jpg);
border:solid;
border-width:thin;
border:#333333;
width:220px;
height:21px;
margin-left:20px;
margin-top:-20px;
z-index:37;
visibility: visible;
}

#SearchBarButton {
background-Image:url(Images/SearchBarButtons.png);
position:relative;
left:245px;
top:-27px;
width:63px;
height:30px;
z-index:36;
visibility: visible;
}

#SearchBarButton:hover {
background-position:0 -35px;
}

#TermsConditionsText {
position:absolute;
left:188px;
top:524px;
width:133px;
height:16px;
z-index:24;
visibility: visible;
}

#Background {
background-color:#FFFFFF;
position:absolute;
left:9.5%;
top:0%;
width:80%;
height:100%;
z-index:1;
visibility: visible;
}

#AboutUsLogo {
background-Image:url(Images/Go4Home-logoAboutUs.jpg);
position:relative;
left:5px;
width:166px;
height:47px;
z-index:41;
visibility: visible;
}

#FindOutMoreButton {
background-image:url(Images/FindOutMoreButton.png);
position:relative;
left:20px;
top:-22px;
width:114px;
height:33px;
z-index:38;
visibility: visible;
}

#FindOutMoreButton:hover {
background-position: 0 -34px;
}

#submitCustomerForm {
/*position:relative;
left:99px;
top:280px;*/
width:583px;
height:50px;
z-index:48;
}

#loginText {
/*position:relative;
left:100px;
top:218px;*/
height:38px;
width:580px;
z-index:49;
}

#RegisterText {
/*position:relative;
left:100px;
top:218px;*/
height:38px;
width:580px;
z-index:49;
}

#RegisterText2 {
position:absolute;
left:100px;
top:261px;
height:27px;
width:580px;
z-index:49;
}

.asterix {
color: #00FF00;
font-size:17px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.divider {
color:#FF0000;
}

input.fade {
background-image:url(Images/SearchBar.jpg);
border-color:#CCCCCC;
color:#174554;
font:"Century Gothic";
}

input.submit {
background-image:url(Images/submitButton.jpg);
color:33ac45;
width:80px;
height:31px;
}

select.fade{
background-image:url(Images/SearchBar.jpg);
border-color:#CCCCCC;
color:#174554;
font:"Century Gothic";
}

option.fade {
background-image:url(Images/SearchBar.jpg);
border-color:#CCCCCC;
color:#174554;
font:"Century Gothic";
}

/*Footer CSS for index page */

#footerMenu {
height: 25px;
padding-left:145px;
padding-top:1px;
width:760px;
}

#footerMenu li {
display: inline;
list-style: none;
padding: 0px 12px 0px 0px;
margin: 0;
}

#CopyrightText {
background-image:url(Images/CopyrightText.jpg);
position:relative;
left:300px;
top:-10px;
width:134px;
height:13px;
display:block;
}

Cheers

Craig