I made a tabbed box using css, html, and jQuery. I would like to be able display the selected tab slightly larger or taller than the other tabs. When I increase the height and set a negative margin to the parent ul on the selected tab, the top of the border completely disappears. Here is the tabbed box I’m working on. I’ve been sitting here almost all day with the chrome element inspecter trying every variation I can think to make the selected tab slightly taller and cannot seem to make it work. I’ve come pretty close messing with the heights, margins etc..but the border on the parent div extends all the way up to the top on the right side:
This is the look I’m going for though; the video library (selected) tab is a little taller than the others. If, in addition to the link, you whould like me to post the code, let me know. I’ll be happy to do so.
I’ve just a quicker tinker on chrome and this seems to do the trick.
If you apply the following to the active tab:
margin-top: 0px !important;
Then set margin-top: 5px; to all li elements.