Databases
StackOverflow2013
Postsdbo
POposition: absolute on Tabbed Menu Causing Overflow Problems
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POposition: absolute on Tabbed Menu Causing Overflow Problems
    primarykey
    data
    text
    <p>When I set <code>position: absolute</code> in my tabbed menu, I get overflow problems.</p> <p><strong><a href="http://www.intracrop.co.uk/new-site-2/adjuvants.html" rel="nofollow">here's the link to see the issue</a></strong> (click on tab #one)</p> <p><strong><a href="http://www.intracrop.co.uk/new-site-2/css/tabs.css" rel="nofollow">CSS</a></strong></p> <p>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)</p> <p>this is the css:</p> <pre><code>#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;} </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJonT
    1. USJonT
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POposition: absolute on Tabbed Menu Causing Overflow Problems
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWelcome 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.
      singulars
      1. POposition: absolute on Tabbed Menu Causing Overflow Problems
      1. USMadara Uchiha
    2. COBy 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.
      singulars
      1. POposition: absolute on Tabbed Menu Causing Overflow Problems
      1. USMrFox
    3. COah apologies MrFox, not the left nav, the tabbed area at the bottom of the page/content area
      singulars
      1. POposition: absolute on Tabbed Menu Causing Overflow Problems
      1. USJonT
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload