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

Hi everyone,

What i am trying to do is add a sticking footer to my page, so no matter how little or how large amount of content there is on my page, the footer for my page will always appear at the bottom of my screen.

I have been using the tutorial footerStick available from solarDreamStudios http://qrayg.com/learn/code/footerstick/where you create a page container, a content container and a footer container which are put in the order described in the tutorial.

I have followed all the steps, but it doesnt work!! i have other div tags within my content container such as tag containing a background image, and a form.

I just cant figure out how to solve the problem, because i have inserted tags which i think might be affecting the containers which allow the footerStick technique work!

I could really do with the help of an expert, so if someone could please look at my attached .txt file containing code, in the file attachments and identify where i am going wrong, that would be great, im really starting to stress over this now!!

Cheers

Craig (barbs75)

AttachmentSize
FooterStickCode.txt15.8 KB
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I don't know that tutorial.

I don't know that tutorial. There is a good explanation in our "How To" section, entitled 100% Height (iirc). "TheManInBlue" also does a good tutorial called "FooterStickAlt". These two recent threads might also help, thread, thread.

Essenstially its really simple.

page container should have min-height:100%. Its parents, normally only HTML and BODY, should have height:100%. None of these three elements should have any vertical margins, padding or border. The footer sits outside the page container, immediately after it in the source. The footer has a negative margin-top equal to the space it requires (its height + any vertical padding and borders).

Inside the page container, put your content. If you have floated columns use a container for them and give that container overflow:hidden.

The last element in the page container should be given padding-bottom equal to the space required for the footer.

This does three things:
- page container fills the screen
- footer pulls itself up into the space at the bottom of page container.
- content container leaves space at the bottom to ensure it can't overlap the footer

Logus
Logus's picture
Offline
Enthusiast
Last seen: 12 years 47 weeks ago
Joined: 2008-01-08
Posts: 53
Points: 0

Check this post

Hello

You can find your solution in this post
http://csscreator.com/node/27658

"Todo habito hace nuestra mano mas habil y nuestro genio mas torpe"
Contact in my blog http://www.miguelmanchego.com

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

TheManInBlue tutorial

Hey Chris, firstly thankyou for your reply. i have had a look at the threads you sent me and also had a read about the height:100% tutorial in the 'how to' section, and it did come in handy.

However with these as aids, i still cant solve my problem, i dont know if you can help me....did you look at my code at all? in the attached file?

Because the problem i am having is that i have a page container, and a content container, and then a footer container, and i understand how the technique works, but why i think mine isnt working is due to the other div tags i have on my page. i Have a tag containing a background shape for my page, and i think this is affecting the way in which the technique works.

I dont suppose you could look at my attached file, it contains my page and CSS pages on it....

The tutorial i showed you, is taken from TheManInBlue, it is the footerStick tutorial which ManInBlue adapted.

If you could please have a look at my code and just suggest where i could be going wrong that would be great, i really cant see where i need to make the changes, and if they are needed etc, spending so much time on this! really want to solve the problem...cheers

Barbs75

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

A link is better. That file

A link is better. That file has php in some places, so its not possible to know what the final HTML will be. A link also allows the page to be investigated in Firefox/Firebug.

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

Code and link to website

Hey Chris,

ok i have inserted the code below, and the link to the website is www.go4home.co.uk, and if you click the login link you will get the page i am trying to fix...i will obviously make the adjustments to all pages when i get this problem fixed....

cheers

HTML/PHP

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

<?php include "TopContent.html"; ?>

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

/* CSS Document */

html {
height: 100%;
margin: 0;
padding: 0;
}

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%;
}

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

#footer {
width: 100%;
position: relative;
bottom: 0 !important;
bottom: -1px;
height: 20px;
}

#container-Content {
padding-bottom: 40px;
}

#StripeBackground {
background-image:url(Images/StripeBackgroundLARGE.jpg);
position:relative;
left:6px;
top:158px;
width:744px;
height: 600px;
z-index:3;
visibility: visible;
}

#StripeBackground2 {
background-image:url(Images/StripeBackgroundLARGE.jpg);
position:relative;
left:6px;
top:158px;
width:744px;
height:400px;
z-index:3;
visibility: visible;
overflow:hidden;
}

.blackText {
color:#000000;
}
p {
color:#FFFFFF;
font-size: 12px;
font-family: Century Gothic;
text-align:left;
}

hr {
color:#FF0000;
}

h2 {
font-size:22px;
font-weight:bold;
}

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

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

h4 {
font-size:14px;
}

.textSmall {
font-size:10px;
}

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

#AboutUsText {
position:absolute;
left:499px;
top:516px;
width:51px;
height:16px;
z-index:18;
visibility: visible;
}

#TopBar {
position:absolute;
left:0px;
top:-5px;
width:754px;
height:93px;
z-index:5;
visibility: visible;
}

#myProfile {
position:absolute;
left:655px;
top:8px;
width:63px;
height:59px;
z-index:8;
visibility: visible;
}

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

#Login {
position:absolute;
width:29px;
height:15px;
z-index:9;
left: 672px;
top: 45px;
visibility: visible;
}

#HomeButton {
/*background-image:url(Images/leftMenuBackground.jpg);*/
color:#CCCCCC;
position:absolute;
text-align:center;
width:105px;
height:49px;
z-index:10;
left: 4px;
top: 99px;
visibility: visible;
}

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

#MoneyMarketButtton {
/*background-image:url(Images/centralMenuBackgroundLARGE.jpg);*/
position:absolute;
width:200px;
height:49px;
z-index:12;
left: 221px;
top: 99px;
visibility: visible;
}

#GoBuyButton {
/*background-image:url(Images/centralMenuBackgroundSMALL.jpg);*/
position:absolute;
width:110px;
height:51px;
z-index:13;
left: 420px;
top: 99px;
visibility: visible;
}

#GoSellButton {
/*background-image:url(Images/centralMenuBackgroundSMALL.jpg);*/
position:absolute;
width:110px;
height:51px;
z-index:14;
left: 533px;
top: 99px;
visibility: visible;
}

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

#BuyingWindow {
position:absolute;
background-image:url(Images/BuyingWindow.jpg);
width:374px;
height:204px;
z-index:16;
left:6px;
top:155px;
visibility:visible;
}

#SellingWindow {
position:absolute;
background-image:url(Images/SellingWindow.jpg);
width:372px;
height:204px;
z-index:17;
left:388px;
top:155px;
visibility:visible;
}

#ContentWindow {
position:absolute;
background-image:url(Images/MovingHouseWindow.jpg);
left:6px;
top:362px;
width:183px;
height:147px;
z-index:18;
visibility: visible;
}

#ContentWindow.pink {
background-image:url(Images/PinkWindow.jpg);
left:197px;
z-index:19;
}

#ContentWindow.orange {
background-image:url(Images/OrangeWindow.jpg);
left:388px;
width:183px;
z-index:20;
}

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

#ContentBottomBar {
background-image:url(Images/ContentBar.jpg);
position:absolute;
top:519px;
left:9px;
width:752px;
height:30px;
z-index:23;
visibility: visible;
}

#ContentBottomBar2 {
background-image:url(Images/ContentBar.jpg);
position:absolute;
top:1034px;
left:2px;
width:752px;
height:30px;
z-index:23;
visibility: visible;
}

#CopyrightText {
background-image:url(Images/CopyrightText.jpg);
position:absolute;
top:552px;
left:314px;
width:134px;
height:13px;
z-index:29;
visibility:visible;
}

#CopyrightText2 {
background-image:url(Images/CopyrightText.jpg);
position:absolute;
top:1066px;
left:311px;
width:134px;
height:13px;
z-index:29;
visibility:visible;
}

#BuyingText {
position:absolute;
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;
}

#Content1 {
position:absolute;
left:15px;
top:236px;
width:239px;
height:51px;
z-index:34;
visibility: visible;
}
#Content2 {
position:absolute;
left:403px;
top:234px;
width:230px;
height:67px;
z-index:35;
visibility: visible;
}

#SearchBar {
position:absolute;
background-image:url(Images/SearchBar.jpg);
border:solid;
border-width:thin;
border:#333333;
left:21px;
top:296px;
width:177px;
height:19px;
z-index:37;
visibility: visible;
}

h1 {
position:absolute;
color:#4beb55;
font-size:17px;
font-weight:bolder;
z-index:32;
visibility:visible;
left: 15px;
top: 204px;
height: 15px;
width: 274px
}

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

#HowMuchHeading {
position:absolute;
color:#174554;
font-size:14px;
font-weight:bolder;
z-index:39;
visibility:visible;
left: 118px;
top: 360px;
height: 15px;
width: 168px;
}

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

#MovingHouseHeading {
position:absolute;
color:#fcf010;
font-size:16px;
font-weight:bolder;
z-index:39;
visibility:visible;
left: 227px;
top: 367px;
height: 15px;
width: 116px;
}

#MovingHouseHeading.shadow {
height: 24px;
filter: Shadow(Color=#080808,
Direction=135,
Strength=4);
}

#FinancePolicyHeading {
position:absolute;
color:#FFFFFF;
font-size:16px;
font-weight:bolder;
z-index:39;
left: 411px;
top: 367px;
height: 15px;
width: 136px;
visibility: visible;
}

#FinancePolicyHeading.shadow {
height: 24px;
filter: Shadow(Color=#080808,
Direction=135,
Strength=4);
}

#AboutUsHeading {
position:absolute;
color:#66da6f;
font-size:16px;
font-weight:bolder;
z-index:40;
left: 626px;
top: 367px;
height: 15px;
width: 74px;
visibility: visible;
}

#AboutUsHeading.shadow {
height: 24px;
filter: Shadow(Color=#080808,
Direction=135,
Strength=4);
}

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:#22586a;
}
a.blue:hover {
text-decoration: underline;
color:#174554;
}

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

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

#AcessibilityText {
position:absolute;
width:58px;
height:16px;
z-index:26;
left: 331px;
top: 524px;
visibility: visible;
}
#AboutUsText {
position:absolute;
left:396px;
top:524px;
width:48px;
height:16px;
z-index:25;
visibility: visible;
}
#PrivacyPolicyText {
position:absolute;
left:450px;
top:524px;
width:72px;
height:16px;
z-index:27;
visibility: visible;
}
#ContactUsText {
position:absolute;
left:530px;
top:524px;
width:56px;
height:16px;
z-index:28;
visibility: visible;
}

#TermsConditionsText2 {
position:absolute;
left:181px;
top:1039px;
width:133px;
height:16px;
z-index:24;
visibility: visible;
}

#AcessibilityText2 {
position:absolute;
width:58px;
height:16px;
z-index:26;
left: 324px;
top: 1039px;
visibility: visible;
}
#AboutUsText2 {
position:absolute;
left:389px;
top:1039px;
width:48px;
height:16px;
z-index:25;
visibility: visible;
}
#PrivacyPolicyText2 {
position:absolute;
left:443px;
top:1039px;
width:72px;
height:16px;
z-index:27;
visibility: visible;
}
#ContactUsText2 {
position:absolute;
left:523px;
top:1039px;
width:56px;
height:16px;
z-index:28;
visibility: visible;
}

#Background {
background-color:#FFFFFF;
position:absolute;
left:9.5%;
top:0%;
width:80%;
height:100%;
z-index:1;
visibility: visible;
}
#TopBar {
background-image:url(Images/topBar.jpg);
}
#myProfile {
background-image:url(Images/myProfile.jpg);
}
#NotRegisteredText {
position:absolute;
left:649px;
top:67px;
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;
}

#SearchBarButton {
background-Image:url(Images/SearchBarButton.jpg);
position:absolute;
left:201px;
top:296px;
width:50px;
height:24px;
z-index:36;
visibility: visible;
}

#SearchBarButton:hover {
background-image:url(Images/SearchBarButtonHover.jpg);
}

#HowMuchHeading {
position:absolute;
left:10px;
top:366px;
width:168px;
height:27px;
z-index:39;
}
#AboutUsLogo {
background-Image:url(Images/Go4Home-logoAboutUs.jpg);
position:absolute;
left:582px;
top:403px;
width:166px;
height:46px;
z-index:41;
visibility: visible;
}
#AboutUsContent {
font-weight:bold;
font-size:10px;
padding:2px;
color:#174554;
position:absolute;
left:579px;
top:453px;
width:168px;
height:37px;
z-index:42;
visibility: visible;
}
#FindOutMoreButton {
background-image:url(Images/FindOutMoreButton.jpg);
position:absolute;
left:403px;
top:312px;
width:114px;
height:33px;
z-index:38;
visibility: visible;
}

#FindOutMoreButton:hover {
background-Image:url(Images/FindOutMoreButtonHover.jpg);
}

#submitCustomerForm {
position:absolute;
left:99px;
top:280px;
width:583px;
height:50px;
z-index:48;
visibility: visible;
}

#Title {
position:absolute;
left:100px;
top:170px;
width:200px;
height:35px;
z-index:49;
font-size:24px;
font-weight:bold;
visibility: visible;
}

#loginText {
position:absolute;
left:100px;
top:218px;
height:38px;
width:580px;
visibility: visible;
z-index:49;
}

#RegisterText {
position:absolute;
left:100px;
top:218px;
height:38px;
width:580px;
visibility: visible;
z-index:49;
}

#RegisterText2 {
position:absolute;
left:100px;
top:261px;
height:27px;
width:580px;
visibility: visible;
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";
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Yes. Its being messed up by

Yes. Its being messed up by your background. Plus you don't have any negative margin-top on the footer.

Why don't you use background-position to set it where you want on the main-container. Also you can get rid of all that preload images junk. If there are issues with images there are other techniques you can use that don't require javascript.

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

oh....still not working, background doing crazy things....

Hey Chris,

Cheers for your help, so i took your advice and added my background image as a background image to the mainContainer and tried to set up the positioning of the image using background-position.

I deleted the stripebackground element from my CSS and have added a negative top-margin value to my footer in the CSS as well, the first few entries that are involved in this in my CSS file is shown below with the changes made:

Style1.CSS

html {
height: 100%;
margin: 0;
padding: 0;
}

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%;
}

#mainContainer {
background-image:url(Images/StripeBackgroundLARGE.jpg);
background-position: 6px 158px;
text-align:left;
margin: 0;
width: 760px;
position: relative;
min-height: 100%;
height: auto !important;
padding: 0px;
}

#footer {
width: 100%;
position: relative;
bottom: 0 !important;
bottom: -1px;
margin-top: -7.5em;
height: 20px;
}

#container-Content {
padding-bottom: 35px;
}

The problem i am having is that the background is doing crazy things!!! it starts from the top, even though i have requested that it starts at 158px from the top, and seems have 3 versions of the image layered over each other, plus all the content in my content-Container is pushed right down to the bottom of the page!! have a look at the URL, the page is loaded up with the changes! it still doesnt work!! can you help me? do you know how i can solve this?

cheers

Craig

barbs75

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Fix up your page, the HTML

Fix up your page, the HTML is a mess. There are two doctypes, html, head and body elements. There are also two mainContainers.

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

messy html

Hey,

I have duplicate html body tags etc because i have used php includes on the page for my topContent and bottomContent.

TopContent.html holds my top logo and menu while my bottomContent.html holds my footer!

i have got rid of the extra mainContainer from topContent include, so now there is only one

cheers

Craig

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

other hover button techniques....

Also,

wanted to ask you....you said that there are other techniques that you can use to create hover buttons, like the ones i have used on my website so far...what techniques would they be? is that using CSS? as you are right, the image upload technique is rather annoying and creates some really ugly code, and makes it harder to control my code using includes and stuff regarding body and html tags, as the include uses "body onload"

cheers for your help!!

Craig

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Next step is to remove all

Next step is to remove all your position:absolutes. Absolutely positioned elements are out of flow, that means inflow elements don't know where they and so ignore them when they locate themselves.

Some other techniques for changing images on hover are:

- create a large image with all the hover states for a particular menu and place that background on the underlying element. Put the normal state as a background on the menu item itself. On hover change the background on the menu item to transparent (and set background-image to none) so the hover state can show through.

- put normal and hover state in one image. Change background-position on hover. Useable when the element has a fixed dimension and it won't repeat on that axis.

- put hover state as a background image, put normal state as foreground image. On hover give the foreground image a visibility of hidden.

In all these cases, the browser needs to load all the images to construct the page. When the mouse over happens the image is already there.

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

Changed button Rollovers and containers

Hi Chris,

Thanks for your last reply, i have now changed my page to having rollover buttons without preload scripts, just using a background image, and then setting the button background image to transparent and background-none. Works nicely, and has got rid of all the javascript, so thankyou!!

With my code now tidied, i want to sort out teh footerSticking process.
You said to get rid of all my absolute positioning, what do i replace it with if i want my objects positioned in a particular place?? i was thinking that, i can position things absolutely within a container right? so if i had a content Container for the login part of my page, with everything positioned absolutely in that conatiner, and then had the container without absolute positioning, will it then work?

I'm sorry to keep bothering you about this, i am desperate to make this work, once i have cracked it, i can then crack on with my othr pages!! really want to be able to move on from this!!

I will attach my html/php and CSS code below, cheers

barbs75

login_form.php

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



<?php include "TopContent.html"; ?>


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 (Style1.css)

/* CSS Document */

html {
height: 100%;
margin: 0;
padding: 0;
}

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%;
}

#mainContainer {
/*background-image:url(Images/StripeBackgroundLARGE.jpg);*/
/*background-position: 6px 158px;*/
text-align:left;
margin: 0;
width: 760px;
position: relative;
min-height: 100%;
height: auto !important;
padding: 0px;
}

#footer {
width: 100%;
position: relative;
bottom: 0 !important;
bottom: -1px;
margin-top: -7.5em;
height: 20px;
}

#container-Content {
padding-bottom: 35px;
}

#content-centrecontent {
width:100%;
}
#content-leftcolumn {
float:left;
width:50%;
text-align:left;
}

#content-rightcolumn {
float:left;
width:50%;
text-align:left;
}

.blackText {
color:#000000;
}

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

hr {
color:#FF0000;
}

h2 {
font-size:22px;
font-weight:bold;
}

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

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

h4 {
font-size:14px;
}

.textSmall {
font-size:10px;
}

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

#AboutUsText {
position:absolute;
left:499px;
top:516px;
width:51px;
height:16px;
z-index:18;
visibility: visible;
}

#TopBar {
position:absolute;
left:0px;
top:-5px;
width:754px;
height:93px;
z-index:5;
visibility: visible;
}

#myProfile {
position:absolute;
left:655px;
top:8px;
width:63px;
height:59px;
z-index:8;
visibility: visible;
}

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

#Login {
position:absolute;
width:29px;
height:15px;
z-index:9;
left: 672px;
top: 45px;
visibility: visible;
}

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

#navigationMenu {
width:120px;
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);
color:#CCCCCC;
position:absolute;
text-align:center;
width:105px;
height:49px;
z-index:10;
left: 5px;
top: 99px;
visibility: visible;
}

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

.SearchButton a {
background-image:url(Images/centralMenuBackground.jpg);
position:absolute;
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:absolute;
width:200px;
height:49px;
z-index:12;
left: 221px;
top: 99px;
visibility: visible;
}

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

.GoBuyButton a{
background-image:url(Images/MenuGoBuy.jpg);
position:absolute;
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:absolute;
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:absolute;
width:116px;
height:49px;
z-index:15;
left: 641px;
top: 99px;
visibility: visible;
}

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

#BuyingWindow {
position:absolute;
background-image:url(Images/BuyingWindow.jpg);
width:374px;
height:204px;
z-index:16;
left:6px;
top:155px;
visibility:visible;
}

#SellingWindow {
position:absolute;
background-image:url(Images/SellingWindow.jpg);
width:372px;
height:204px;
z-index:17;
left:388px;
top:155px;
visibility: visible;
}

#ContentWindow {
position:absolute;
background-image:url(Images/MovingHouseWindow.jpg);
left:6px;
top:362px;
width:183px;
height:147px;
z-index:18;
visibility: visible;
}

#ContentWindow.pink {
background-image:url(Images/PinkWindow.jpg);
left:197px;
z-index:19;
}

#ContentWindow.orange {
background-image:url(Images/OrangeWindow.jpg);
left:388px;
width:183px;
z-index:20;
}

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

#ContentBottomBar {
background-image:url(Images/ContentBar.jpg);
position:absolute;
top:519px;
left:9px;
width:752px;
height:30px;
z-index:23;
visibility: visible;
}

#ContentBottomBar2 {
background-image:url(Images/ContentBar.jpg);
position:absolute;
top:1034px;
left:2px;
width:752px;
height:30px;
z-index:23;
visibility: visible;
}

#CopyrightText {
background-image:url(Images/CopyrightText.jpg);
position:absolute;
top:552px;
left:314px;
width:134px;
height:13px;
z-index:29;
visibility:visible;
}

#CopyrightText2 {
background-image:url(Images/CopyrightText.jpg);
position:absolute;
top:1066px;
left:311px;
width:134px;
height:13px;
z-index:29;
visibility:visible;
}

#BuyingText {
position:absolute;
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;
}

#Content1 {
position:absolute;
left:15px;
top:236px;
width:239px;
height:51px;
z-index:34;
visibility: visible;
}
#Content2 {
position:absolute;
left:403px;
top:234px;
width:230px;
height:67px;
z-index:35;
visibility: visible;
}

#SearchBar {
position:absolute;
background-image:url(Images/SearchBar.jpg);
border:solid;
border-width:thin;
border:#333333;
left:21px;
top:296px;
width:177px;
height:19px;
z-index:37;
visibility: visible;
}

h1 {
position:absolute;
color:#4beb55;
font-size:17px;
font-weight:bolder;
z-index:32;
visibility:visible;
left: 15px;
top: 204px;
height: 15px;
width: 274px
}

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

#HowMuchHeading {
position:absolute;
color:#174554;
font-size:14px;
font-weight:bolder;
z-index:39;
visibility:visible;
left: 118px;
top: 360px;
height: 15px;
width: 168px;
}

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

#MovingHouseHeading {
position:absolute;
color:#fcf010;
font-size:16px;
font-weight:bolder;
z-index:39;
visibility:visible;
left: 227px;
top: 367px;
height: 15px;
width: 116px;
}

#MovingHouseHeading.shadow {
height: 24px;
filter: Shadow(Color=#080808,
Direction=135,
Strength=4);
}

#FinancePolicyHeading {
position:absolute;
color:#FFFFFF;
font-size:16px;
font-weight:bolder;
z-index:39;
left: 411px;
top: 367px;
height: 15px;
width: 136px;
visibility: visible;
}

#FinancePolicyHeading.shadow {
height: 24px;
filter: Shadow(Color=#080808,
Direction=135,
Strength=4);
}

#AboutUsHeading {
position:absolute;
color:#66da6f;
font-size:16px;
font-weight:bolder;
z-index:40;
left: 626px;
top: 367px;
height: 15px;
width: 74px;
visibility: visible;
}

#AboutUsHeading.shadow {
height: 24px;
filter: Shadow(Color=#080808,
Direction=135,
Strength=4);
}

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:#22586a;
}
a.blue:hover {
text-decoration: underline;
color:#174554;
}

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

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

#AcessibilityText {
position:absolute;
width:58px;
height:16px;
z-index:26;
left: 331px;
top: 524px;
visibility: visible;
}
#AboutUsText {
position:absolute;
left:396px;
top:524px;
width:48px;
height:16px;
z-index:25;
visibility: visible;
}
#PrivacyPolicyText {
position:absolute;
left:450px;
top:524px;
width:72px;
height:16px;
z-index:27;
visibility: visible;
}
#ContactUsText {
position:absolute;
left:530px;
top:524px;
width:56px;
height:16px;
z-index:28;
visibility: visible;
}

#TermsConditionsText2 {
position:absolute;
left:181px;
top:1039px;
width:133px;
height:16px;
z-index:24;
visibility: visible;
}

#AcessibilityText2 {
position:absolute;
width:58px;
height:16px;
z-index:26;
left: 324px;
top: 1039px;
visibility: visible;
}
#AboutUsText2 {
position:absolute;
left:389px;
top:1039px;
width:48px;
height:16px;
z-index:25;
visibility: visible;
}
#PrivacyPolicyText2 {
position:absolute;
left:443px;
top:1039px;
width:72px;
height:16px;
z-index:27;
visibility: visible;
}
#ContactUsText2 {
position:absolute;
left:523px;
top:1039px;
width:56px;
height:16px;
z-index:28;
visibility: visible;
}

#Background {
background-color:#FFFFFF;
position:absolute;
left:9.5%;
top:0%;
width:80%;
height:100%;
z-index:1;
visibility: visible;
}
#TopBar {
background-image:url(Images/topBar.jpg);
}
#myProfile {
background-image:url(Images/myProfile.jpg);
}
#NotRegisteredText {
position:absolute;
left:649px;
top:67px;
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;
}

#SearchBarButton {
background-Image:url(Images/SearchBarButton.jpg);
position:absolute;
left:201px;
top:296px;
width:50px;
height:24px;
z-index:36;
visibility: visible;
}

#SearchBarButton:hover {
background-image:url(Images/SearchBarButtonHover.jpg);
}

#HowMuchHeading {
position:absolute;
left:10px;
top:366px;
width:168px;
height:27px;
z-index:39;
}
#AboutUsLogo {
background-Image:url(Images/Go4Home-logoAboutUs.jpg);
position:absolute;
left:582px;
top:403px;
width:166px;
height:46px;
z-index:41;
visibility: visible;
}
#AboutUsContent {
font-weight:bold;
font-size:10px;
padding:2px;
color:#174554;
position:absolute;
left:579px;
top:453px;
width:168px;
height:37px;
z-index:42;
visibility: visible;
}
#FindOutMoreButton {
background-image:url(Images/FindOutMoreButton.jpg);
position:absolute;
left:403px;
top:312px;
width:114px;
height:33px;
z-index:38;
visibility: visible;
}

#FindOutMoreButton:hover {
background-Image:url(Images/FindOutMoreButtonHover.jpg);
}

#submitCustomerForm {
position:absolute;
left:99px;
top:280px;
width:583px;
height:50px;
z-index:48;
visibility: visible;
}

#Title {
position:absolute;
left:100px;
top:170px;
width:200px;
height:35px;
z-index:49;
font-size:24px;
font-weight:bold;
visibility: visible;
}

#loginText {
position:absolute;
left:100px;
top:218px;
height:38px;
width:580px;
visibility: visible;
z-index:49;
}

#RegisterText {
position:absolute;
left:100px;
top:218px;
height:38px;
width:580px;
visibility: visible;
z-index:49;
}

#RegisterText2 {
position:absolute;
left:100px;
top:261px;
height:27px;
width:580px;
visibility: visible;
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";
}