CTabView and IE6

hi,

I've noticed that the CTabView widget is not displayed correctly in IE6 (see attached screenshot), when it is all right in FF, Opera (win32) and even Chrome.

Did I forgot to set some parameter ? … JQuery is supposed to run ok on IE6 isn't it ?

Is this page displayed correctly on IE6?

http://www.yiiframew…/juidatepicker/

I should have done the test myself before posting … unfortunatly, the result is also incorrect (see screenshot).

As for the CTreeView, it’s a little bit better but not exactly the same in IE6 than other browser. The ‘plus’ icon (at node level) is not always displayed, and so for links between nodes.

IE6 is a JS nightmare

Thank you! Could you please create a ticket for this bug?

Done ( Issue 43)

Did not test it with the Yii version yet, but I have some specific css for tabs and IE6:



/* Additional IE specific bug fixes... */


* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */


    display: inline-block;


}


*:first-child+html .ui-tabs-nav  { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */


    display: inline-block;


}


.ui-tabs-disabled {


    filter: alpha(opacity=40);


}


Perhaps this works for you. Add the css file with <!–[if IE]> <![endif]–> tags around it.

Thanks for your suggestion … but it doesn’t work. However, I took a look at the CSS and then noticed that child selector used in the jquery.yiitab.css is not supported by IE6.

If you modify the CSS and (for instance) replace :

.yiiTab > ul li

by

.yiiTab  ul li

…and do the same for the complete file (remove the ‘>’ selectors) then the CTabView looks better … but not perfect (far from it. see attached screenshot) : panels borders are not displayed correctly and they disappear when a tab is clicked. This sounds more like JS mess with IE6.

Hope this helps ;)

Thank you all for helping investigate this issue. Because I still don't have access to an IE6 browser, I won't be able to work on this issue. So if you have any new findings, please let me know. Thanks!

Padding 2px seems to fix the borders in IE6/IE7. Sharp corners instead of rounded. 2px isn't optimal in FF3 but still pretty good.



.yiiTab ul a


{


    /* padding: 3px 0.5em; */


    padding: 2px 0.5em;


    margin-left: 3px;


    -moz-border-radius-topleft:5px;


    -moz-border-radius-topright:5px;


    border: 1px solid #4F81BD;


    border-bottom: none;


    background: #d3dfee;


    text-decoration: none;


}


Edit: I'm almost newbie to CSS fiddling, found this out by trial-and-error, so maybe there's a better way to solve this without the small gap beetween content and tabs.

/Tommy

Besides CSS problem, what other problem does it have? Any js problem?

well if the border problem is solved by tri CSS fix (which I didn’t test yet), there was no other issue on this one… but I suspect there’s some work to be done on the Treeview.

(that will be after my holidays ;)

8)

hi,

it seems that the CTabView is not working ok under IE6 (with yii-1.0.1.r473). Borders are not displayed correctly … I tried to check CSS but in vain so maybe that’s related to JS. This example works fine under IE6.

8)

clear cache?

hi Jonah,

are you saying that it CTabview is ok for you under IE6, and suggest I clear cache ? … I cleared cache : same result :(

8)

It might be dependent on Yii main.css. Just a thought.