Forums
View unanswered posts | View active topics It is currently Wed Jul 30, 2014 7:18 pm



Reply to topic  [ 5 posts ] 
 [SOLVED] Tabs demo bottom border problem 
Author Message

Joined: Sat Aug 21, 2010 11:12 am
Posts: 223
Post [SOLVED] Tabs demo bottom border problem
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:
Image

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>

_________________
PIE needs more community support persons! Time is money, which means you can fund PIE development by answering support questions.


Last edited by Tonttu on Sun Aug 22, 2010 11:34 am, edited 1 time in total.



Sat Aug 21, 2010 11:23 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Tabs demo bottom border problem
Your email did indeed get caught by gmail's spam filter, but I found it now.

I won't post your URLs here as you say you want them kept private for now, but looking at them this looks like an issue with hasLayout as described on the Known Issues page. If you take the version without PIE.htc applied and add zoom:1 to the links to force hasLayout, you see the same IE bug surfaces. So this isn't specifically a PIE problem, but since PIE has to force hasLayout it triggers this bug in the IE engine.

Unfortunately you'll just have to play around with different ways of positioning the tabs. IE makes us jump through hoops...


Sat Aug 21, 2010 9:55 pm
Profile

Joined: Sat Aug 21, 2010 11:12 am
Posts: 223
Post Re: Tabs demo bottom border problem
Ok thanks for the explanation. But what magic makes your tabs live demo work while it fails miserably, if I just copy the code provided?

_________________
PIE needs more community support persons! Time is money, which means you can fund PIE development by answering support questions.


Sun Aug 22, 2010 3:51 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Tabs demo bottom border problem
Looks like a quirks mode thing. If you add <!DOCTYPE html> to the top of your document the space goes away.


Sun Aug 22, 2010 9:56 am
Profile

Joined: Sat Aug 21, 2010 11:12 am
Posts: 223
Post Re: Tabs demo bottom border problem
Thanks again, man :)
Got my own tabs working by examining your style solution.

_________________
PIE needs more community support persons! Time is money, which means you can fund PIE development by answering support questions.


Sun Aug 22, 2010 10:21 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 5 posts ] 

Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.