Removing a Bottom Border on a TAB system

HTML & CSS
1

]I have a basic tab system in place using divs. Each tab has a box (border) and my client wants the bottom border to disappear during a hover. To complicate matters, the full width of the page (not just the tabs) needs a bottom border at the same level the tabs would normally have them.

I have attached two images. “Normal” shows the standard view. “Hover” shows how they want the tab to look - in this case, when the 2nd tab is hovered over.

As you can see by the code below - to get the full width bottom border I apply it to the “box” style. The tabs do not have a bottom border applied. What I need, is for the bottom border to disappear when I hover over the tab. I thought I would be smart and apply a White Bottom Border to the tab on hover, but that just pushes the original bottom border down - it still appears.

Here is a sample of the CSS


<style type="text/css">
.box {
	overflow: hidden;
	border-bottom: 1px solid #A7A7A7;
}
.tab a {
	display:block;
	width: 100px;
	text-decoration:none;
	padding: 4px 10px;
	line-height: 1.5em;
	float: left;
	border-top: 1px solid #A7A7A7;
	border-right: 1px solid #A7A7A7;
	border-left: 1px solid #A7A7A7;
}
.tab a:hover {
	font-weight:bold;
	text-decoration:underline;
}
</style>

Here is a sample of the HTML


<div class="box">
<div class="tab"><a href="#">Tab 1</a></div>
<div class="tab"><a href="#">Tab 2</a></div>
<div class="tab"><a href="#">Tab 3</a></div>
</div>
2

Based on the code in your example, something like this seems to work.


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1206076-Removing-a-Bottom-Border-on-a-TAB-system
2014.04.22 17:52 #1
codamedia
-->
    <style type="text/css">
[color=blue].cf:before,
.cf:after {
    content:"";
    display:table;
    line-height:0;
}
.cf:after {
    clear:both;
}[/color]
.box {
    border-bottom: 1px solid #A7A7A7;
}
.tab a {
/*	[color=red][s]display:block;[/s][/color]    /* unnecessary */
    width: 100px;
    float: left;
    line-height: 1.5em;
    text-decoration:none;
    [color=blue]border: 1px solid #A7A7A7;[/color]
    padding: 4px 10px;
    [color=blue]margin-bottom:-1px;[/color]
}
.tab a:hover {
    font-weight:bold;
    text-decoration:underline;
    [color=blue]border-bottom: 1px solid #fff;[/color]   /* set to color of page or tab */
}

    </style>
</head>
<body>

<div class="box cf">
    <div class="tab"><a href="#">Tab 1</a></div>
    <div class="tab"><a href="#">Tab 2</a></div>
    <div class="tab"><a href="#">Tab 3</a></div>
</div>

</body>
</html>
3

Thanks for the help on this. Yes - it certainly works.

I see you used what I thought would work (adding a white border-bottom to the hover) but fixed the problems I was having with the “cf” selectors.
Any reason why there are two “cf:after” selectors? Could the clear:both not go in the same selector as the other declarations?

Just curious?

4

{clear:both} is applied after floats. It serves no purpose before them.

There are several “clearfix” solutions that work where {overflow:hidden} is impractical. The one that I used here works for me in all situations. Some newer methods are shorter and only use 1 generated element, but do not work in all situations. I’m lazy and stick to the most reliable. Pick your favorite. :slight_smile:

Cheers

5

Thanks again for the taking the time to help out… I appreciate it.