asked on

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

SSupreme

Please provide a link so we can help you out.

ee-itpro

ASKER

Developing on local system.. so no link at the moment... I did attach css code file and a footer image

ASKER CERTIFIED SOLUTION

nap0leon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ee-itpro

ASKER

Here's a link.. http://tinyurl.com/eehelp

ee-itpro

ASKER

Just uploaded .. pls ignore the main directory listing unless you have some nice suggestoion for that .. i was just experimenting a bit...

nap0leon

Adding "display:inline" as suggested above fixes the footer links.

nap0leon

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.

SOLUTION

SSupreme

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ee-itpro

ASKER

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 ?

nap0leon

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

ee-itpro

ASKER

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 https://www.experts-exchange.com/questions/27527289/Sticky-footer-help.html