1

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)

CSS

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;}
JonT
  • 105
  • 1
  • 1
  • 6
  • Welcome to Stack Overflow! Please post the code relevant to the question. Ideally, **in addition** to the code in the question body itself, please add a [jsFiddle](http://jsfiddle.net/api/post/jquery/1.7.1/) example of your problem. It will help us help you. – Madara's Ghost Nov 13 '12 at 11:58
  • By tab do you mean the first menu item in the list? Whichever one I click it only says 404 - Page not found. Cannot reproduce your error. – MrFox Nov 13 '12 at 12:03
  • ah apologies MrFox, not the left nav, the tabbed area at the bottom of the page/content area – JonT Nov 13 '12 at 12:14
  • I could not able to notice any problem in your example URL. – SaidbakR Nov 13 '12 at 12:17
  • The content is aligning to the middle of the parent and forcing the title off the top and the bottom margin off the bottom..probably not explaining myself very well. the more content I put in the tabbed divs the more extreme the issue. – JonT Nov 13 '12 at 12:24
  • i need the parent div ie the page content area to expand with the content that is in the show/hide divs – JonT Nov 13 '12 at 12:28
  • my other alternative is use jquery but this conflicts with the background, but it may be easier to fix this issue http://www.intracrop.co.uk/new-site-2/adjuvants3.html – JonT Nov 13 '12 at 12:54
  • your links are dead. Did you resolve your problem? – leMoisela Nov 16 '12 at 15:19

0 Answers0