[Solved] How can I make my footer links clickable?

[HeatherFeimster]

Here’s a little problem. I’ve implemented a "sticky footer" but now the #main padding is covering up my footer so that the links cannot be clicked.

Is this a z-index issue? How can I get them to be clickable? (you’ll see that the "Account" link is outside of the padding, and thus clickable and the hover effect shows.)

Thanks for any input!

Link:
http://themolehillproject.com/plaidzebra/

Here is the code in case you don’t want to go to the dev page:

HTML:

Code:

 

Home  ~  Shop  ~  About  ~  Contact  ~  Policies  ~  Shipping  ~  Returns
Colors&Specs  ~  Manufacturers  ~  WeSupport  ~  Terms&Conditions
Account  ~  Basket  ~  Login  ~  Checkout

© 2010 The
Plaid Zebra, LLC  ~  Friendswood, Texas
Designed by H. Feimster  ~  Powered by OpenCart

CSS:

Code:

@charset “UTF-8″;
/* CSS Document */

* { margin:0; padding:0;}

html, body {height: 100%;}

#wrapper {min-height: 100%;}

body {
background-image: url(‘images/PZ_template8_03.jpg’);
color: #111111;
}

body img {
border: 0;
text-decoration: 0;
}

#ribbon {
width: 100%;
background-image: url(images/bkgd_zebra_big.jpg);
height: 244px;
border-top: #111111 solid 10px;
border-bottom: #111111 solid 10px;
position: absolute;
top: 196px;
left: 0;
z-index: -2;
}

#wrapper {
width: 1024px;
margin: 0 auto;
padding: 0;
}

#main {
overflow: auto;
padding-bottom: 45px;
}

#header {
width: 100%;
margin: 0 auto;
height: 200px;
position: static;
z-index: 1;
}

#navigation {
margin: 5px auto;
width: 100%;
z-index: 1;
text-align: center;
}

#navigation img {
margin: 0 auto;
}

#sidescroll img {
margin: 0 auto;
position: absolute;
top: 260px;
z-index: -1;
}

#maincontent {
width: 834px;
margin: 0 auto;
background-color: #f9f2e7;
border: #111111 solid 5px;
z-index: 2;
height: 680px;
}

#footer {
width: 100%;
background-image: url(images/bkgd_zebra_small.jpg);
height: 62px;
border-top: #111111 solid 10px;
border-bottom: #111111 solid 10px;
position: relative;
margin-top: -62px; /* negative value of footer height */
height: 62px;
clear: both;
z-index: -1;
}

#footer a:link {
color: #111111;
text-decoration: underline;
}

#footer a:hover {
color: #f9f2e7;
text-decoration: none;
}

#footer a:visited {
color: #e1edaf;
text-decoration: underline;
}

#footer a img {
border: 0;
text-decoration: none;
}

#footwrap {
width: 840px;
margin: 0 auto;
padding: 12px 0 5px 0;
position: relative;
top: 0;
left: 0;
z-index: 3;
}

#footlinks h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.5em;
font-weight: normal;
margin: 0;
padding: 0;
float: left;
width: 320px;
}

#socialmedia {
float: right;
width: 100px;
text-align: right;
margin-top: 15px;
}

#socialmedia img {
padding: 0 2px;
}

#copyright h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.5em;
font-weight: normal;
margin: 0;
padding: 0;
text-align: center;
}

/*Opera Fix*/
body:before {
content:””;
height:100%;
float:left;
width:0;
margin-top:-32767px;/* negate effect of float*/
}

[aspiringWebbie]

Try these couple of things:

Remove the 1st #wrapper from your Styles (You have it twice – remove the style that has min-height: 100%. Not only do you have #wrapper twice – but min-height is not necessary and is not compatible in some browsers).

Remove the Top & Left coordinates on #FooterWrap – just leave margin: 0 auto

Your links have a h6 heading – do not think this is necessary (I may be wrong). Also in your CSS – you have the links as: Link – Hover – Active. Remember the Love Hate rule – LVHA. Links must be placed in proper order to work properly. a:link – a:visited – a:hover – a:active. You currently have them as a:link – a:hover a:visited.

Hope this puts you in the right direction

[aspiringWebbie]

Also – your Z-index – you only use z-index when you want to place an image on top of another image ( It seems your adding a z-index to a non image element). This also only works when you use relative / absolute positioning.

[aspiringWebbie]

Thanks for the Sticky footer info – I have not read up on it. Glad your issue is fixed

[Author]

Posts