Posted by Audun Holme on 12/18/06 00:21

Hey

I'm trying to create a "tab control" (much like Amazon.co.uk) effect on my
website I'm working on.

I want to have a border around the tabs. Some of this border is set by using
the CSS rule "border:2px solid #f00049;" and for the rounded corner effect I
just use a image. The problem is (as you can see from this link below) that
the border created by CSS don't align with the border created by the images.

http://home.online.no/~au-holme/pub/22301/index.html

Below I've posted my source code

Any suggestions??

Here is my CSS:
ul#nav{
list-style:none;
margin:0;
padding:0;
}

ul#nav li {
float:left;
margin:0;
}

ul#nav a{
background:#f8c16a url(Images/left.jpg) left top no-repeat;
padding-left:10px;
border:2px solid #f00049;
text-decoration:none;
}

ul#nav a span {
background:#f8c16a url(Images/right.jpg) right top no-repeat;
padding-right:10px;
}

here is the html:
<div>
<ul id="nav">
<li><a href="#"><span>tab1</span></a></li>
<li><a href="#"><span>tab2</span></a></li>
<li><a href="#"><span>tab3</span></a></li>
<li><a href="#"><span>tab4</span></a></li>
<ul>
</div>

[Back to original message]