When I set position: absolute
in my tabbed menu, I get overflow problems.
here's the link to see the issue (click on tab #one)
I've tried various jQuery and JavaScript tabbed menus but they conflict with the java controlling the background image sizer (I've inherited the site trying to fix someone else's work)
this is the css:
#tabs {margin: 10px auto;min-height: 250px; width: 560px;position: relative}
#tabs li div p {text-align: left}
#tabs a {color: #000;text-decoration: none;outline: none;}
#tabs ul {float: left;margin: 0;padding: 0; position: relative}
#tabs li {float: left;list-style-type: none;}
#tabs li a {
background: -webkit-gradient(linear, left top, left bottom, from(#bdccaa), to(#869968));
background: -moz-linear-gradient(center top , #bdccaa, #869968 18px) repeat scroll 0 0 transparent;
background: -o-linear-gradient(center top , #bdccaa, #869968 18px) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(center top , #bdccaa, #869968 18px) repeat scroll 0 0 transparent;
background: linear-gradient(center top , #bdccaa, #869968 18px) repeat scroll 0 0 transparent;
border: 1px solid #d8e0cf;
border-bottom: 0px;
margin: 0;
padding: 4px 12px;
position: relative;
z-index: 1;
font-size: 90%;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
display: block;
top: 1px;
box-shadow: 0px -1px 5px #aaa
}
#tabs li a:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#e1efcf), to(#9cb178));
background: -moz-linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
background: -o-linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
background: linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
}
#tabs #One:target a,#tabs #Two:target a,#tabs #Three:target a {
color: #000000;
border-bottom: none;
top: 1px;
background: -webkit-gradient(linear, left top, left bottom, from(#e1efcf), to(#9cb178));
background: -moz-linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
background: -o-linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
background: linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
padding-top: 6px;
}
#tabs li div {
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
border: 0px solid #fff;
float: left;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 15px;
position: absolute;
visibility: hidden;
height: auto;
width: 530px;
left: 0;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#FFFFFF));
background: -moz-linear-gradient(center top , #eee, #FFFFFF 85px) repeat scroll 0 0 transparent;
background: -o-linear-gradient(center top , #eee, #FFFFFF 85px) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(center top , #eee, #FFFFFF 85px) repeat scroll 0 0 transparent;
background: linear-gradient(center top , #eee, #FFFFFF 85px) repeat scroll 0 0 transparent;
box-shadow: 0px 0px 5px #888888;
-webkit-border-radius: 0px 10px 10px 10px;
-moz-border-radius: 0px 10px 10px 10px;
border-radius: 0px 10px 10px 10px;
}
#tabs #One:target div,#tabs #Two:target div,#tabs #Three:target div {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100); opacity: 1; visibility: visible;}