Posted by Adrienne Boswell on 12/18/06 01:12

Gazing into my crystal ball I observed "Audun Holme"
<au-holme@online.no> writing in news:EPCdnRlQbe1wQxjYRVnzvQ@telenor.com:

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

It would help if you could also post the real url demonstrating the
problem, or at least a short version with only the relevant markup and
CSS.


--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

[Back to original message]