1. #1
    Sencha User
    Join Date
    Feb 2008
    Posts
    31
    Vote Rating
    0
    salvo is on a distinguished road

      0  

    Default Problem changing accordion tabs height w/o a doctype

    Problem changing accordion tabs height w/o a doctype


    Hi,

    I'm trying to change the height of all tabs in an accordion panel with a custom CSS to mimic Outlook menu:
    Code:
    .accordion-menu .x-accordion-hd {
    	color:#15428B;
    	font-weight:bold;
    	height: 23px;
    	padding: 8px 0px 0px 10px;
    }
    ExtJS code:
    Code:
    var menuPanel = {
    	xtype		: 'panel',
    	id		: 'menu',
    	layout		: 'accordion',
    	defaults	: {xtype: 'panel', cls:'accordion-menu'},
    	items		: [{
    				title	: 'News',
    				cls:'accordion-menu'
    			},{
    				title	: 'Innovations'
    			},{
    				...
    			}]
    };
    This works with all browsers including IE6 but only if you set a Doctype! which is not a good practice in ExtJS application development because of IE6 rendering bugs (lot of threads on it).


    The issues I have found not using a doctype:
    • "height: 28px;" renders a standard accordion tab height in IE6 of about 16px, 28px in FF.
    • "height: 28pt;" changes the height to 28px in IE6 but Firefox generates huge ugly tabs


    My question: is there a cross-browser way to set the accordion tabs (headers) height not using a doctype ? Has someone found a workaround?

    Thanks a lot!

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Use classes based on the browser? Ext adds browser-specific class names to the <body> tag.

  3. #3
    Sencha User
    Join Date
    Feb 2008
    Posts
    31
    Vote Rating
    0
    salvo is on a distinguished road

      0  

    Thumbs up


    Hi Animal,
    Quote Originally Posted by Animal View Post
    Ext adds browser-specific class names to the <body> tag.
    Wow I wasn't aware of this. Here is my workaround accordingly:
    Code:
    .ext-ie6 .accordion-menu .x-accordion-hd {
    	height: 23pt;
    }
    
    .accordion-menu .x-accordion-hd {
    	color:#15428B;
    	font-weight:bold;
    	height: 23px;
    	padding: 8px 0px 0px 10px;
    }
    Still don't know why 'px' height is not handle by IE6 w/o a doctype though.

    Thank you for pointing me in that direction I learn from you every day!

Thread Participants: 1