0

I'm trying to create a simple tabbed navigation menu in CSS. I am having a hard time getting the bottom border to go away on the active tab. Normally this would not be hard to do, but I also want a line height set.. so I'm using inline-block with various IE and FF fixes. This makes it display the way I want, with the exception of the bottom border.

I have tried numerous methods for getting this to work, including setting up some operators.. but I don't know enough about CSS to determine if I was using them correctly.

Here is my jsfiddle.

(Obviously my CSS skills need work and I could probably simplify the code greatly as well.)

Code:

#tab_menu { width: 100%; overflow: hidden; color: #000000; border-bottom: #dddddd solid 1px; } #tab_menu ul { padding: 0px; margin: 0px; } #tab_menu li { list-style: none; line-height: 42px; padding-left: 15px; padding-right: 15px; font-size: 14px; font-family: Arial, Helvetica, sans-serif; display: -moz-inline-stack; /* Firefox Fix */ display: inline-block; /* Normal Function */ zoom: 1; /* IE Fix */ *display: inline; /* IE Fix */ } .tab_menu_active { color: #000000; border-bottom: none; border-left: #dddddd solid 1px; border-right: #dddddd solid 1px; border-top: #dddddd solid 1px; } .tab_menu_active a { color: #000000; text-decoration: none; } .tab_menu_not_active { } .tab_menu_not_active a { color:#52a4d4; text-decoration: none; } .tab_menu_not_active:hover { background: #eeeeee; }

HTML:

<div id="tab_menu"> <ul> <li class="tab_menu_not_active"> <a href="">Link 1</a> </li> <li class="tab_menu_active"> <a href="">Link 2</a> </li> <li class="tab_menu_not_active"> <a href="">Link 3</a> </li> <li class="tab_menu_not_active"> <a href="">Link 4</a> </li> <li class="tab_menu_not_active"> <a href="">Link 5</a> </li> </ul> </div>
Improve this question

2 Answers 2

Reset to default
3

DEMO

for the #tab_menu I removed the overflow:hidden;

#tab_menu { /*overflow: hidden;*/ }

to the .tab_menu_active I have added this styles, that will add border bottom white and with position manipulation will overidre the gray border color.

.tab_menu_active { border-bottom:solid 1px #fff; position:relative; top:1px; } .tab_menu_active a { position:relative; top:-1px; }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Well. That'll do it! I was trying to get a similar result with negative margins. Didn't think about setting something like that relative. (The overflow hidden was part of a different thing I was trying that didn't work out, so thanks for removing that as well). Thanks so much!
You can just add the position relative + the minus margin jsfiddle.net/kqu45/4
1

The problem you have is your entire #tab_menu has a bottom border. There are a couple ways you could solve this, but first I'll give you some details about how to simplify your css.

Give the li's the class tab, that means that every tab you have will all get the same css. On the active one, give it a second class, active. In your css definitions, define that all tab's should have the same css (instead of having duplicate css in tab_menu_active and tab_menu_not_active).

I would recommend giving them all a border on the bottom, and then removing that border in the active one.

Here's a forked jsfiddle.

Improve this answer

2 Comments

Thanks. I will at least make those changes to reduce duplicate code. The rest of your example doesn't work exactly like I need it to. There are a few bits of code that aren't supported by older browsers, and the bottom edge no longer extends the width of the screen.
Ahkay, fair enough. Didn't realise you needed the entire bottom border. And just didn't bother having any old-browser support. You do have a working answer tho, so I won't bother updating my answer. Would have done the same thing as that one next. =)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.