Getting Rid of Active Tab's Bottom Border?
cybl00 - September 4, 2009 - 20:30
| Project: | Quick Tabs |
| Version: | 6.x-2.0-rc3 |
| Component: | Tab styles |
| Category: | support request |
| Priority: | minor |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
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!
#1
I'm sorry -- I forgot to include that it works fine in Internet Explorer. The problem is in Firefox.
#2
the 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)
ul.quicktabs_tabs.quicktabs-style-basic li.active {padding-bottom:3px;
}
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..
#3
I'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.
#4
This also happens on top border when block title is removed.