CODEWITHSUNDEEP
htmlcssrounded-corners
atb
atb

Reputation: 963

CSS: Cell border isn't rounded for some reason

I want to make a nice navigation bar, but for some reason, I can't get the borders of the cells on the ends of the bar to be rounded. If you look closely at the corners, you should be able to see a bit of rounding happening to the background, but not to the border for some reason.

You can see what I mean here: http://jsfiddle.net/7veZQ/299/

Here is my code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
    border-collapse: collapse;
    border: none;
    box-shadow: 0px 5px 10px #BBB;
}
.nav tr td {
    width: 160px;
    height: 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    color: #666;
    border: 1px solid #999;
    vertical-align: middle;
    text-align: center;
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
    text-shadow: 1px 1px 0px #FFFFFF;
    letter-spacing: 3px;
}
.nav tr td:hover {
    background: #F4F4F4; /* Old browsers */
    background: -moz-linear-gradient(top, #F4F4F4 0%, #E0E0E0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F4F4), color-stop(100%,#E0E0E0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* IE10+ */
    background: linear-gradient(to bottom, #F4F4F4 0%,#E0E0E0 100%); /* W3C */
}
.nav tr td#first {
    border-radius: 5px 0px 0px 5px; 
    -moz-border-radius: 5px 0px 0px 5px; 
    -webkit-border-radius: 5px 0px 0px 5px;
}

.nav tr td#last {
    color: #09C;
    border-radius: 0px 5px 5px 0px; 
    -moz-border-radius: 0px 5px 5px 0px; 
    -webkit-border-radius: 0px 5px 5px 0px;
}
</style>
</head>
<body>
<table class="nav" width="960" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="first">Home</td>
    <td>Options</td>
    <td>Prices</td>
    <td>Showcase</td>
    <td>Help</td>
    <td id="last">Order Now!</td>
  </tr>
</table>

</body>
</html>

So what am I doing wrong?

Upvotes: 0

Views: 416

Answers (4)

Pedro Estrada
Pedro Estrada

Reputation: 2404

change your table css to

border-collapse: separate;

Upvotes: 1

Pedro L.
Pedro L.

Reputation: 7546

Look at this:

http://jsfiddle.net/7veZQ/313/

The table is converted into div + ul.

Look at line-height (used here to center the text vertically).

Also, I changed first and last to be classes (instead of id's) as they are very common names and id's should be unique in document.

At last, look at the borders. We don't have border-collapse in lists so the last item is a little different than the others.

Upvotes: 0

CrazyVipa
CrazyVipa

Reputation: 927

Unfortunately, this is not cross browser CSS. CSS3 is not found in all browsers. That being said, there are a few changes I'd suggest. First, you shouldn't really use exact heights & widths for anything.

Second, you should be using DIVs. Decent forum post as to why...

In any case, here is the "fix" (I'm personally against floating anything, but oh well. It is what happens sometimes:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.nav {
    float:left;
    width:960px;
    height:40px;
    border: 1px solid #999;
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    box-shadow: 0px 5px 10px #BBB;
}
.nav a {
    float:left;
    display:inline-block;
    margin:0;
    padding:0;
    line-height:40px;
    text-decoration:none;
    width: 160px;
    height: 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    color: #666;
    text-align: center;
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
    text-shadow: 1px 1px 0px #FFFFFF;
    letter-spacing: 3px;
}
.nav a:hover {
    background: #F4F4F4; /* Old browsers */
    background: -moz-linear-gradient(top, #F4F4F4 0%, #E0E0E0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F4F4), color-stop(100%,#E0E0E0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* IE10+ */
    background: linear-gradient(to bottom, #F4F4F4 0%,#E0E0E0 100%); /* W3C */
}
.nav a#first {
    border-radius: 5px 0px 0px 5px; 
    -moz-border-radius: 5px 0px 0px 5px; 
    -webkit-border-radius: 5px 0px 0px 5px;
}

.nav a#last {
    color: #09C;
    border-radius: 0px 5px 5px 0px; 
    -moz-border-radius: 0px 5px 5px 0px; 
    -webkit-border-radius: 0px 5px 5px 0px;
}
</style>
</head>
<body>

<div id="main-menu" class="nav">
    <a href="#" id="first">Home</a>
    <a href="#">Options</a>
    <a href="#">Prices</a>
    <a href="#">Showcase</a>
    <a href="#">Help</a>
    <a href="#" id="last">Order Now!</a>
</div>

</body>
</html>

This should be all you need for it to work... If you are having trouble with CSS Layouts, check out YUI3 Grids. I'm a fan of YUI 3, so yes, this is a shameful plug.

YUI Library

Upvotes: 0

Quentin
Quentin

Reputation: 943996

So what am I doing wrong?

Using a table for layout.

Tables are not layout tools. Some browsers won't round corners on table cells. You have a list of data, use list markup.

Upvotes: 4

Related Questions