I'm checking in Firefox 3.6
Why 2nd level links are not clickable in this tab menu.
live example here : http://jsbin.com/upeka4/5
these are clickable if disable the css
You mention wanting the 'overlap' effect. I recommend reworking your styling on the `a` tag (border, margin, padding) to make it 'fill' the `li` and match it to what you have on the `li` (lose the `li` styling), and then set it's bottom border color to match the background color and then 'lift' it with a `z-index: 1` to have it cover the top border of your secondary `ul`. I don't have time right now to rework the code for you.
Scott
2010-07-13 19:35:37
@Scott - Pekka made but not working well in IE http://jsbin.com/upeka4/7
metal-gear-solid
2010-07-13 19:53:28
+1 for your efforts
metal-gear-solid
2010-07-13 20:05:38
+5
A:
Probably because the z-index definition here:
ul.level2 {
background:none repeat scroll 0 0 #F3F8C6;
border:1px solid #EABF4A;
left:0;
padding:6px;
position:absolute;
top:30px;
width:463px;
z-index:-1; <------------------------ there
}
Pekka
2010-07-13 19:21:37
but without it i can't make overlap effect without using images.
metal-gear-solid
2010-07-13 19:23:40
if i remove z-index or set to 1 then Active tab will look like this http://shup.com/Shup/383241/1106141035-My-Desktop.png. which i don't want
metal-gear-solid
2010-07-13 19:31:49
@metal Give the level2 a `z-index` of `0` and the element above it `1`. I think the problem here is the negative z-index.
Pekka
2010-07-13 19:32:11
@Pekka i want to make tab like this http://stashbox.org/952395/11061405615-My-Desktop.png with cross browser compatibility
metal-gear-solid
2010-07-13 19:32:59
See my comment in my answer as it should guide you to a non-image solution to your problem.
Scott
2010-07-13 19:36:38
@Pekka - give answer of this question http://stackoverflow.com/questions/3154949/how-to-make-overlap-tab-effect-without-using-image
metal-gear-solid
2010-07-13 19:36:47
@Pekka - no not working it's giving this output http://shup.com/Shup/383241/1106141035-My-Desktop.png
metal-gear-solid
2010-07-13 19:39:59
@metal try this. http://jsbin.com/upeka4/8 tested only in Firefox but seems to work there at any rate. Need to get back to work, but maybe it helps.
Pekka
2010-07-13 19:46:26
Not too difficult, the styling for the tab needs to move to the `a` tag so that the `z-index` can be used to overlap the `ul`. Again, see my comment under my answer for a few more details. The point is, to get the `z-index` to work, you have to be working with the two items that are under the first level `li`, which is the `a` and the `ul` tags. The `a` is the only option for using as overlap to the border of the second level `ul`.
Scott
2010-07-13 19:49:30
@Scott I think that's pretty much what I did in the jsbin example. Same idea at the same time. :)
Pekka
2010-07-13 19:50:38
@Pekka - Thanks for effort it's working well in Firefox but in IE 7 , this is the result http://shup.com/Shup/383253/11061412012-My-Desktop.png
metal-gear-solid
2010-07-13 19:50:49
@metal seems to be the white spaces between the `<li>`s. This seems to work except for a double border: http://jsbin.com/upeka4/9/# that is probably easy to fix.
Pekka
2010-07-13 19:54:52
@Pekka - thanks working now. yes IE showing double line and it can be solved to give `top:27px` in conditional css.
metal-gear-solid
2010-07-13 20:00:20
@Pekka - one more thing i will use this method to make tab's corner round http://stackoverflow.com/questions/3170402/which-javascript-solutionnot-htc-can-really-make-antialiased-round-corner-in-i/3173643#3173643. will it work ? because to use this i will have to use `position:relative` on tab's 1st level `li`
metal-gear-solid
2010-07-13 20:05:01
@metal I can't say really. It *should* work as far as I can see but no guarantees.
Pekka
2010-07-13 20:07:08
@Pekka - "@metal seems to be the white spaces between the `<li>`s. This seems to work except for a double border: jsbin.com/upeka4/9/# that is probably easy to fix." but i noticed now links not working again jsbin.com/upeka4/9/#
metal-gear-solid
2010-07-14 08:01:20
@metal strange, all the work seems to have been reset on jsbin! Revision 9 is gone, it contained comments from me. Sorry, I can't re-fix that right now. Did it work yesterday?
Pekka
2010-07-14 08:07:21
@Pekka - you can fix this http://jsbin.com/upeka4/8 ur old link
metal-gear-solid
2010-07-14 15:21:25
@pekka - "@metal seems to be the white spaces between the `<li>`s" what you were saying in this?
metal-gear-solid
2010-07-14 19:58:56
@metal strange, this isn't working any more - it did yesterday :) I'm stumped what the problem is!
Pekka
2010-07-14 20:08:16
@pekka - http://jsbin.com/upeka4/8 it was working in FF but in IE http://shup.com/Shup/383253/11061412012-My-Desktop.png. i need tab like added in my question 2nd level links should be clickable in FF.
metal-gear-solid
2010-07-14 20:14:54
+2
A:
change the z-index for the ul.level2 from -1 and you should be good to go. IE will still allow them to be clicked but firefox doesn't usually allow it if there's an element on top of them.
BuildStarted
2010-07-13 19:21:40
but i want to make overlap tab effect , and without z-index it's not possible with pure css
metal-gear-solid
2010-07-13 19:26:05
A:
Others above have explained the problem. For a solution, just do:
#tabcontainer
{
height:32px;
position:absolute;
margin: 2em;
font-size: 12px;
}
Reducing the height to 32px causes the secondary links list to "overflow" out of the tabcontainer and therefore is not covered by it (though it's still displayed "below" it according to the z-index). position:absolute; causes the secondary links to only be positioned below the tabcontainer, not below any parent elements (like html, body).
lucideer
2010-07-15 15:17:09