Tab styles IE6 CSS Issue

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-basic

to

.quicktabs-style-basic ul.quicktabs_tabs

Any volunteers for the patch?

the RTL css file for basic style
http://drupal.org/cvs?commit=186370

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..

reverted the last commits. I am sorry for the mess..
http://drupal.org/cvs?commit=186382

can someone attach screenshots of the styles in IE6..

Hi all,
This helped me fix my quicktabs css in IE6.0. Thanks a lot-Pasqualle,couzinhub
Regards,
Judef

I'm still having issues, even with the latest dev. Is there any fix for this?

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

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.

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..

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

anyone with some possible solutions? pls... :(

@vsotto: I do not understand the screenshot, as it is not clear where are the quicktab parts: .quicktabs_tabs, .quicktabs_main
can yo show the screenshot of the QT style selection page?

the attached screenshot, is where the part of the QT breaks'up in other browser(particularly IE6)... i didn't mind putting the whole thing because i thought it was just a minor bug... but just an hour ago, i was able to discover some(sort) of solution by just clearing some div's to make it work in IE... and sorry(guys)... i think it has to do also with my CSS... my bad...

so i guess i have it working now...

thanks(@Pasqualle),

vsotto

Here is what I am using, not perfect but I'll just have to live with it for now.

/* Quick Tabs */
#sidebar-first{overflow:hidden;} /**Prevent quicktabs from droping the sidebar below the main content because of overflow issues**/
.block-quicktabs{padding:0; margin:0; border:none;background:transparent;}
ul.quicktabs_tabs li {background-color:#ffffff;}
.block-quicktabs-tabpage{border-width: 0px; padding: 0px; width: 256px; margin-bottom: 0px;}
.quicktabs_tabpage{padding-left:5x;}
.block-quicktabs-tabpage .block-inner {padding-bottom: 0px;}

.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;
}