[SOLVED] Tabs demo bottom border problem

Tonttu · Sat Aug 21, 2010 9:55 pm

I sent an email to Jason, but maybe he has a spam filter for my host (mail.com).
I have a problem of an extra bottom border appearing, when using PIE with this simple tab setup: http://nontroppo.org/test/tab1.html

And also, if I just copy and paste the code that is offered on the CSS3 Pie Tabs demo page, I get the same border problem:

Any ideas?

Here is the code:

Code:

<html>
<head>
<style type="text/css">
.tabBox .tabs {
    margin: 0;
    padding: 0 10px;
    overflow: hidden;
    margin-bottom: -1px;
    height: 2.25em;
}

.tabBox .tabs li {
    float: left;
    list-style: none;
    margin: 0;
    padding: .25em .25em 0;
    height: 2em;
    overflow: hidden;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid #FFF;
}

.tabBox .tabs li.selected {
    z-index: 3;
}

.tabBox .tabs a {
    float: left;
    height: 2em;
    line-height: 2em;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    background: #EEE;
    border: 1px solid #CCC;
    border-bottom: 0;
    padding: 0 10px;
    color: #000;
    text-decoration: none;
    behavior: url(htc/PIE.htc);
}

.tabBox .tabs .selected a {
    background: #FFF;
    -webkit-box-shadow: #CCC 0 0 .25em;
    -moz-box-shadow: #CCC 0 0 .25em;
    box-shadow: #CCC 0 0 .25em;
}

.tabBox .tabs a:hover {
    background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
    background: -moz-linear-gradient(#EEF, #FFF 70%);
    background: linear-gradient(#EEF, #FFF 70%);
    -pie-background: linear-gradient(#EEF, #FFF 70%);
}

.tabBox .content {
    clear: left;
    position: relative;
    z-index: 2;
    padding: 2em 1em;
    border: 1px solid #CCC;
    background: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: #CCC 0 0 .25em;
    -moz-box-shadow: #CCC 0 0 .25em;
    box-shadow: #CCC 0 0 .25em;
    behavior: url(htc/PIE.htc);
}
</style>
</head>
<body>
<div class="tabBox">
    <ul class="tabs">
        <li class="selected"><a href="#">Tab One</a></li>
        <li><a href="#">Tab Two</a></li>
        <li><a href="#">Tab Three</a></li>
    </ul>
    <div class="content">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>
</body>
</html>

[SOLVED] Tabs demo bottom border problem

Who is online