CODEWITHSUNDEEP
css
AJ Quick
AJ Quick

Reputation: 171

CSS removing border on tabbed navigation menu

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>

Upvotes: 0

Views: 2312

Answers (2)

Elad Shechter
Elad Shechter

Reputation: 4045

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;
}

Upvotes: 3

Chiri Vulpes
Chiri Vulpes

Reputation: 488

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.

Upvotes: 1

Related Questions