0

i have built jQuery drop-down menu which is having problems floating over the UI header. Flash and everything else is fine, menu has no problem floating over anything except UI headers, i have tried messing with z-index in css files but it seems that jQuery script is over writing all of my css. the JS files are minified so i can not edit them. I think a JS solution is necessary but i do not know how to solve this with JS.

URL: http://patel.mine.nu/live%20site/metanoia/

Tumharyyaaden
  • 2,733
  • 3
  • 19
  • 20

2 Answers2

1

You can fix it with z-index, just make sure that you position the elements to which you add a z-index, otherwise it won't work.

Add to your top menu: position:relative; z-index:1;
And to the bar in the middle: position:relative; z-index:0;

If I change this live in Safari's Web Inspector it seems to work.

Alec
  • 9,000
  • 9
  • 39
  • 43
  • thank you! i just needed to place the css index for menu after the css for "UI Tabs". And yes, i already has specified position for both so now it works. – Tumharyyaaden May 20 '10 at 16:12
0

add this css

stndtm{

z-index:10000; }

.ui-tabs .ui-tabs-nav { list-style-image:none; list-style-position:outside; list-style-type:none; padding:0.2em 0.2em 0; position:relative; z-index:500; }

in your main file it should work

sushil bharwani
  • 29,685
  • 30
  • 94
  • 128
  • I didn't need to specify the z-index for ui classes, just needed to add one for div after the UI css was loaded, which fixed the problem, but thank you for your reply. – Tumharyyaaden May 21 '10 at 23:37