Css - Help with footer

Please see attached footer image.   I made some changes to the style sheet and the footer has ended up being incomplete - rest of footer links like Terms, Contact us etc. have vanished.  Attaching complete css code for the style sheet... the  #footer css is near the  bottom.  

I want two footer bars... one that has footer links in the centre...another bar below the first one that has copyright notice.. Both should have minumum height.. just  enough to enclose the text they display.... And the footer should always stick to the bottom no matter how much less/short the content is on the page

Not a css expert, so please help me out.
 
footer.png
style2.css
ee-itproAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SSupremeCommented:
Please provide a link so we can help you out.
0
ee-itproAuthor Commented:
Developing on local system.. so no link at the moment... I did attach css code file and a footer image
0
nap0leonCommented:
A quick look at the css shows that the footer is only 40pixels tall, and since the only item to appear in that footer has a bullet next to it, you probably are using a horizontal unordered list for your footer...  to get LI items to be horizontal instead of vertical, try adding "display:inline" to this:

.footer_menu li {
    color: white;
    padding-right: 1%;
    display: inline;
}

Open in new window


We definitely need the HTML or the live site with the error to offer suggestions on how to make these footer bars always appear at the bottom of the web browser.

On that topic... if the page only contains 1" of content, you want them at the bottom of the user's browser.  What about a page that has 2 feet worth of content where the user has to scroll vertically?  Do you still want the footer locked to the bottom of the browser window?  or does it only apply in cases where page content is shorter than the browser's height?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

ee-itproAuthor Commented:
Here's a link..  http://tinyurl.com/eehelp    
0
ee-itproAuthor Commented:
Just uploaded .. pls ignore the main directory listing unless you have some nice suggestoion for that .. i was just experimenting a bit...
0
nap0leonCommented:
Adding "display:inline" as suggested above fixes the footer links.
0
nap0leonCommented:
You also have some unnecessary attributes in your footers that make the alignment off.  Try it with just these:
.footer_menu {
    color: white;
    height: 1.2em;
}
.footer_menu2 {
    background: url("images/footer_bg2.png") repeat-x scroll 0 0 transparent;
    color: grey;
    font-size: 13px;
    margin-top: 21px;
    width: 100%;
}

Open in new window


For your middle section, your tables are wider (140poxels) than the containers (21.5% = 104 pixels on my machine) )they are in which is making stuff appear outside your border.  In my experience, never mix percentages and pixels... figure out which one you want to use (almost always pixels unless you have a really really good reason for percentages) and use it ALL the time.
0
SSupremeCommented:
This should be you semantic HTML:
<div class="footer_menu">
    <ul style="display: block; padding: 0pt; margin: 0pt;"><li><a href="about.php">About us</a></li> <li>|</li>
	<li><a href="terms.php">Terms of Use</a></li><li>|</li> 
	<li><a href="privacy.php">Privacy Policy</a></li><li>|</li> 
	<li><a href="contact.php">Contact us</a></li> <li>|</li>
	</ul></div>

Open in new window

and CSS:
.footer_menu li {
    color: white;
    float: left;
    list-style: none outside none;
    padding-right: 1%;
}

Open in new window

0
ee-itproAuthor Commented:
Thanks now they do appear....   And about this...

  " On that topic... if the page only contains 1" of content, you want them at the bottom of the user's browser.  What about a page that has 2 feet worth of content where the user has to scroll vertically?  Do you still want the footer locked to the bottom of the browser window?  or does it only apply in cases where page content is shorter than the browser's height?"



Currently what happens is the footer remains at the bottom if i need to use a vertical scroll bar but in cases when the page content is lesser(say about 60% of normal  page height)  then the footer covers the rest 40% of the page which makes it look ugly.  I need the footer to keep sticking to the bottom in such cases as well .  How do we accomplish this ?
0
nap0leonCommented:
If you want it to stick to the bottom of the browser window, this may work: I've had some success with it, but it's not perfect.  It uses fixed positioning to place it 0px from the bottom and a z-index of 300 to make it appear above the rest of the page's contents.

Try wrapping this around your footer and see what happens.
.dock_bottom {
    bottom: 0;
    height: 25px;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 300;
}

Open in new window

0
ee-itproAuthor Commented:
Hi, Thanks for the help... i found a solution for stick footer here... it says it works ion all cases/browsers... however i'm having some trouble implementing it correctly... please see if you could possibly help...  i opened a new question for this     http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27527289.html
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.