CJuiTabs Widget messes up CSS of Content within Tabs

Hey guys,

use the "zii.widgets.jui.CJuiTabs" Widget.

Everything works fine, except the following:

For <h1>-Tags I defined certain styles in my main.css.

i.e. color, size and a few other things…

However when using the <h1>-Tag within a Tab the style defined in main.css is not applied anymore…

<h1>-Tag is displayed in its default style!

Why is that?!




$this->widget('zii.widgets.jui.CJuiTabs', array(


        'Static tab1'=>'<h1>bla </h1>Static content',

        'Static tab2'=>'Static content',







// <h1> within Tab is displayed in default style.. not as defined in my main.css





CJuiTabs probably defines its own set of styles for anything within the widget. Because their definition is more specific than yours, it takes priority. You can make yours more specific by using classes, or ids. I suggest you call your css rule ‘.headerClass’ (or whatever you want) rather than ‘h1’, and then put ‘class=“headerClass”’ in your h1 tag.

It’s all about CSS specificity, which is described very well here: coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ (no links so you’ll have to copy and paste that url).