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,498
    Vote Rating
    46
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."