Tab styles IE6 CSS Issue
hankpalan.com - February 20, 2009 - 23:17
| Project: | Quick Tabs |
| Version: | 6.x-2.0-rc3 |
| Component: | Tab styles |
| Category: | bug report |
| Priority: | critical |
| Assigned: | couzinhub |
| Status: | needs work |
Description
I've run into an issue with the Basic Tabs in IE6.
The .quicktabs_main.quicktabs-style-basic css is creating a double border with a 10px padding between the container and the extra border. This only happens in IE6.
Additionally if I add #quicktabs_container_(# of containter).quicktabs_main.quicktabs-style-basic this clears up the issue all together. But I don't want to have to go in and create a new css override everytime a make a new quickblock.
Is anybody else seeing this or is it something that is with my install.
| Attachment | Size |
|---|---|
| basic_qtabs.png | 3.94 KB |
#1
#2
That was a bug of ie6 that doesn't understand double class selectors, like
.class.class1.It's fixed and should be in the next release.
here is the new css for the basic styles:
/* $Id: basic.css,v 1.2.4.1 2008/12/07 18:09:24 pasqualle Exp $ */
.quicktabs-style-basic .quicktabs_main{
background-color:#fff;
border:1px solid #aaa;
border-top:none;
padding:10px;
clear:both;
}
.quicktabs-style-basic ul.quicktabs_tabs{
border-bottom:1px solid #aaa;
padding:0 5px 0 0;
font:bold 11px/19px Verdana !important;
font-weight:bold;
height:19px;
margin:0;
}
.quicktabs-style-basic ul.quicktabs_tabs a{
font:bold 11px/19px Verdana !important;
text-decoration:none;
color:#aaa;
}
.quicktabs-style-basic ul.quicktabs_tabs a:hover{
color:#555 !important;
}
.quicktabs-style-basic ul.quicktabs_tabs li{
border:1px solid #e5e5e5;
border-bottom:none;
padding:2px 5px;
margin:0 3px 0 0;
position:relative;
}
.quicktabs-style-basic ul.quicktabs_tabs li:hover{
border:1px solid #ccc;
border-bottom:none;
}
.quicktabs-style-basic ul.quicktabs_tabs li.active{
border:1px solid #aaa;
border-bottom:1px solid #fff;
background-color:#fff;
}
.quicktabs-style-basic ul.quicktabs_tabs li.active a{
color:#027AC6;
}
* html .quicktabs-style-basic ul.quicktabs_tabs li{
top:1px;
}
*+html .quicktabs-style-basic ul.quicktabs_tabs li{
top:1px;
}
#3
Thanks couzinhub,
I was racking my brain over this one. Its always something simple in the end too.
#4
Thanks couzinhub, comitted
http://drupal.org/cvs?commit=186364
Then I guess we have to rewrite all styles to this format.
ul.quicktabs_tabs.quicktabs-style-basicto
.quicktabs-style-basic ul.quicktabs_tabsAny volunteers for the patch?
#5
the RTL css file for basic style
http://drupal.org/cvs?commit=186370
#6
Ok, this change is not good enough as it is not possible to style quicktab inside quicktab
example: (putting facebook style quicktab into basic style quicktab)
.quicktabs-style-basic .quicktabs_main{background-color:#fff;
border:1px solid #aaa;
border-top:none;
padding:10px;
clear:both;
}
.quicktabs-style-facebook .quicktabs_main{clear:both;
}
the inner quicktab will pull the css setting of the outer quicktab, so the style will be mixed up. It do not happen when using the double selectors..
#7
reverted the last commits. I am sorry for the mess..
http://drupal.org/cvs?commit=186382
#8
can someone attach screenshots of the styles in IE6..
#9
Hi all,
This helped me fix my quicktabs css in IE6.0. Thanks a lot-Pasqualle,couzinhub
Regards,
Judef
#10
I'm still having issues, even with the latest dev. Is there any fix for this?
#11
I'm also having a double layered tab on ie6. i make use the sky style of the quicktabs module.
Please checkout the screenshot. I urgently need some css help on this. Thanks
#12
The best I've managed with ie6 is
/* In IE 6 the Quicktabs are broken. */
.quicktabs_main.quicktabs-style-basic {
_padding:0;
_margin:0;
_border-width: 1px;
}
/* switch off the inner wrapper. Leave the top line for the base tabs.*/
.quicktabs_wrapper .quicktabs_main.quicktabs-style-basic {
_border-width: 0 0 1px 0;
_padding:0;
_margin:0;
}
It's not perfect, but it's better.
Problems: no margins inside the quicktab, some faint double lines still showing, and a line upwards on the right hand side. On the other hand, it's much better than the default. This is with 6.x-2.0-rc3. Code goes in ie.css.
#13
I am learning new things about IE6 what I did not really wanted to know..
If you are not using different QT styles on the same page, then you should probably create a new style without double class selectors (just remove the quicktabs-style-x class). But from code in #12 it seems like the double class works in IE6, so I really do not have any idea..
#14
hello,
has anyone manage to resolved this issue?... checking quicktab in other browsers, looks fine. but with IE(6), it breaks'up.
i've tried following couzinhub method but still doesn't work... :(
i used garland theme to create my own tab theme. code bellow.
.quicktabs_wrapper {
border: 1px solid #ccc;
}
.quicktabs_main {
padding: 0 10px 10px;
}
.quicktabs-style-sunstar_tabs .quicktabs_main{
clear:both;
}
.quicktabs-style-sunstar_tabs ul.quicktabs_tabs{
background: #036 url('images/bg.gif') repeat-x bottom;
font:bold 12px/20px Verdana;
padding: 0 0 3px;
height: 20px;
margin:0 0 10px;
}
.quicktabs-style-sunstar_tabs ul.quicktabs_tabs li{
margin:0;
padding:0;
display: block;
float: left;
padding: 2px 0 1px !important;
list-style-type: none;
background: none;
text-transform: capitalize;
font: 12px Tahoma, Geneva, sans-serif;
}
.quicktabs-style-sunstar_tabs ul.quicktabs_tabs li a:link,
.quicktabs-style-sunstar_tabs ul.quicktabs_tabs li a:visited {
color: #f3f3f3;
padding: 8px 12px 4px 11px;
margin:0;
font:bold 12px/20px Verdana;
}
.quicktabs-style-sunstar_tabs ul.quicktabs_tabs li.active a {
color: #036 !important;
background: url('images/tab-right.gif') no-repeat right bottom;
}
.quicktabs-style-sunstar_tabs ul.quicktabs_tabs li.active {
background: url('images/tab-left.gif') no-repeat left bottom;
}
/* IE 6 Debug */
* html .quicktabs-style-sunstar_tabs ul.quicktabs_tabs {
padding-bottom: 0px;
}
vsotto