I've been trying to find a solution to removing the bottom border on the active tab. Is it possible that because it doesn't validate as XHTML Strict that it won't work or is it a problem in the CSS? I've searched through the issue list and found http://drupal.org/node/547586 but it doesn't really answer my question.
site: http://www.library.uni.edu/business-portal
css:
// FROM LIBRARY.CSS (Main Stylesheet) //
/* Quicktabs-5 business portal */
#quicktabs-5
{
width: 95%;
}
#quicktabs_container_5 { height: 100%; }
#quicktabs-5 td,
#quicktabs-5 tr,
#quicktabs-5 table
{ border: 1px solid #000;}
/***********************************************/
//FROM QUICKTABS.CSS//
div.quicktabs_tabpage.nojs-hide {
display: none;
}
ul.quicktabs_tabs {
margin-top: 0;
}
ul.quicktabs_tabs li {
display: inline;
background: none;
list-style-type: none;
padding: 2px;
}
ul.quicktabs_tabs li a:focus {
outline: none;
}
/***********************************************/
//FROM QUICKTABS/BASIC.CSS//
.quicktabs_main.quicktabs-style-basic{
background-color:#fff;
border:1px solid #aaa;
border-top:none;
padding:10px;
clear:both;
}
ul.quicktabs_tabs.quicktabs-style-basic{
border-bottom:1px solid #aaa;
padding:0 5px 0 0;
font:bold 12px/19px Verdana !important;
font-weight:bold;
height:19px;
margin:0;
}
ul.quicktabs_tabs.quicktabs-style-basic a{
font:bold 12px/19px Verdana !important;
text-decoration:none;
color:#aaa;
}
ul.quicktabs_tabs.quicktabs-style-basic a:hover{
color:#555 !important;
}
ul.quicktabs_tabs.quicktabs-style-basic li{
border:1px solid #e5e5e5;
border-bottom:none;
padding:2px 5px;
margin:0 3px 0 0;
position:relative;
}
ul.quicktabs_tabs.quicktabs-style-basic li:hover{
border:1px solid #ccc;
border-bottom:none;
}
ul.quicktabs_tabs.quicktabs-style-basic li.active{
border:1px solid #aaa;
border-bottom:1px solid #fff;
background-color:#fff;
}
ul.quicktabs_tabs.quicktabs-style-basic li.active a{
color:#027AC6;
}Thank you for your time and any comments are welcome!
Comments
Comment #1
Courtney.B commentedI'm sorry -- I forgot to include that it works fine in Internet Explorer. The problem is in Firefox.
Comment #2
pasquallethe basic style does not have the bottom border removed by default.
you may add this code to your theme's css file, to remove the bottom line (in Firefox)
notes:
1. always blame IE. Firefox displays the active tab correctly, IE should also display the bottom border.. the above solution was not tested in IE, and probably shows an additional bottom pixel on active tab, blame IE. You may find cross browser compatible css solution, but I personally refuse spending any time on fixing IE problems.. If you submit a working cross-browser solution, then it will be committed..
2. the site XHTML validation problems are not result of the quicktabs markup. but yes, if you have validation problems that may result in incorrect quicktab functionality..
Comment #3
halloffame commentedI'm having the same problem but not with FF, it's with IE8 (fine with 7 and 6), Chrome and Safari. Adding the bottom padding ought to solve the problem. Thanks.
Comment #4
halloffame commentedThis also happens on top border when block title is removed.
Comment #5
netw3rker commented