- This topic is empty.
-
AuthorPosts
-
June 11, 2010 at 10:56 am #29328
HeatherFeimster
MemberHere’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:
The Plaid Zebra 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*/
}June 11, 2010 at 11:57 am #77655aspiringWebbie
ParticipantTry 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
June 11, 2010 at 12:03 pm #77656aspiringWebbie
ParticipantAlso – 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.
June 11, 2010 at 1:37 pm #77662aspiringWebbie
ParticipantThanks for the Sticky footer info – I have not read up on it. Glad your issue is fixed
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.