CSS problem, creating a "tab control" layout

[Audun Holme]

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>

 

[Adrienne Boswell]

Gazing into my crystal ball I observed "Audun Holme"

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.

 

[Audun Holme]

But I've already posted the relevant CSS and HTML markup

 

[Leonard Blaisdell]

But I've already posted the relevant CSS and HTML markup

It's much easier for people in the group to see the URL that the problem
is occurring in than for individuals to copy and paste your source into
their own system in a proper HTML document to analyze it and take the
time to find and download any images associated with it. It really is.

leo

 

[Bergamot]

But I've already posted the relevant CSS and HTML markup

If you want assistance, a good first step is to conform to this group's
accepted conventions.

Post a URL demonstrating the problem, not just code or pictures of your
results.

And don't top post.

BTW, I bet if you did a little searching through the google archives for
info about rounded corners, you'd come up with some good samples. You
might even solve the problem yourself.

 

[Andy Dingley]

But I've already posted the relevant CSS and HTML markup

If you expect me to set up an example on my own server frst, just so
that I can see the problem, then I'll send you my consultancy ratecard.

Make it easy for people to help you, otherwise you'll find yourself not
getting helped. It's that simple.

(Best CSS tab control examples around can be found by searching for
"sliding windows" )

 

[Ben C]

But I've already posted the relevant CSS and HTML markup

Are you sure? The image you posted a link to has "tab1", "tab2", etc.,
but this markup refers to Images/left.jpg and Images/right.jpg.

I tried your posted source code, and I can't see a problem there, but I
don't have your images either. It could just be that you have space at
the top of the images.

As others have said, post a url to a simple page that reproduces the
problem.