4 replies [Last post]
barbs75
barbs75's picture
Offline
Regular
Swindon, UK
Last seen: 11 years 4 weeks ago
Swindon, UK
Joined: 2007-09-12
Posts: 45
Points: 2

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 20 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You need to validate your

You need to validate your code particularly because you're missing:

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

barbs75
barbs75's picture
Offline
Regular
Swindon, UK
Last seen: 11 years 4 weeks ago
Swindon, UK
Joined: 2007-09-12
Posts: 45
Points: 2

Hey thanks for your reply, i

Hey thanks for your reply, i have added the head and body tags, still no fix!

Do you have any other suggestions of how i can fix this problem?

cheers

Craig

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 12 years 5 hours ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

Do you expect browsers to

Do you expect browsers to respect the height:50px; in #submitCustomerForm? If so, what should happen if the forms inside, including the table, are taller than 50px? Firefox renders this page according to the specs, #submitCustomerForm is overflown by its content. Didn't check it in IE6 or IE7, but I guess IE6 expands the container and IE7 clips the content, that would be false either way.

barbs75
barbs75's picture
Offline
Regular
Swindon, UK
Last seen: 11 years 4 weeks ago
Swindon, UK
Joined: 2007-09-12
Posts: 45
Points: 2

Hey, cheers for the reply I

Hey, cheers for the reply

I know, i have already sorted out the problem, so its all fixed up now!

cheers

Craig