Tabbed layout

I'm very new to this and am trying to create a tabbed layout where the active tab doesnt have a line underneath it. Most of the versions I've been playing with work fine but in my case it doesn't and I'm wondering if it's because my links dont go to new pages, they only toggle a hidden div. Is it possible to tweak my CSS to get this to work properly? This is what I have currently:

ul#tabnav { /* general settings */
text-align: left; /* set to left, right or center */
margin: 0 0 0 0; /* set margins as desired */
border-bottom: 1px solid #000; /* set border COLOR as desired */
list-style-type: none;
padding: 1px 5px 4px 0px; /* THIRD number must change with respect to padding-top (X) below */
}

ul#tabnav li {
display: inline;
}

body#tab1 li.tab1, body#tab2 li.tab2 { 
border-bottom: 1px solid #fff; 
background-color: #fff; 
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a { 
background-color: #fff; 
color: #000; 
position: relative;
top: 1px;
padding-top: 4px; 
}

ul#tabnav li a { /* settings for all tab links */
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #000; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #dbdbdb; /* set unselected tab background color as desired */
color: #000; /* set unselected tab link color as desired */
margin-right: 0;
text-decoration: none;
border-bottom: none;
}

ul#tabnav a:hover { /* settings for hover effect */
background: #fff; /* set desired hover color */
}

Code (markup):

then as my HTML I have:

<ul id="tabnav">
			<li class="tab1"><a href="#page-1" style="border-bottom:0px;"><span>Description</span></a></li>
			<li class="tab2"><a href="#page-2"><span>Designer</span></a></li>
		</ul>
 
		<div class="content" id="page-1">
			<?= $row['description'] ?>
		</div>
 
		<div class="content" id="page-2">
			<?= $row['designer'] ?>
		</div>

Code (markup):

Hope someone can help!

 

try added this bit to your css

ul#tabnav a:active { text-decoration: none!important; border-bottom: 0!important; }

Code (markup):

 

I added it but nothing changed. Any other ideas?

 

View the source on my edits here.....

That CSS is a bit messy, truthfully I would have rewritten the styles on that but time didn't allow for it...

http://clientdemos.info/borderfix/

Hope that helps!

Cheers!~