css - Fixed position won't do in different browser, how to make a table with columns in Ext.Panel? -

css - Fixed position won't do in different browser, how to make a table with columns in Ext.Panel? -

i'm trying figure how show menu on 2 different browser. right now, it's perfect using fixed position on chrome (fixed little ext panel, not page don't worry).

the problem won't show correctly in firefox (the sliders bug in firefox). tried create them float:right, it's not working @ all. 1st 1 perfect, , other ones not making sense @ all.

i tried using table can't seem understand technique. i've made 2 colomns table , it's not @ have.

this image of panel on linux (left) , chrome (right). panel 1 sliders in it. can see on firefox, sliders long i'm using fixed positionning right now.

would have thought me? table layout idea? should lower width of sliders little create them fit both? there way?

or mayve improve ask: there way inquire big left panel (all left stuff) create sure fits in there? because if open page total screen, left panel right size , there no problems @ after resize smaller...

thanks lot guys.

ps: code (all of it) of panel (it's indented lot, see @ right side):

new ext.panel({ title: '<center>' + extjs_gui_products_tab + '</center>', id: 'products_tab', xtype: 'checkboxgroup', padding: 3, cls: 'productlabel', items: [ //tofinish new ext.slider({ width: 125, value: 73, listeners: { change: function(analysesslider, val) { map.getlayersbyname(openlayers_wms_layer_analyses)[0].setopacity(val/100); }}, style: 'position:absolute; left:135px;' }), new ext.form.checkbox({ title: extjs_gui_products_analyses_checkbox_title, id: 'analyses_checkbox_extjs', boxlabel: extjs_gui_products_analyses_checkbox_label, inputvalue: extjs_gui_products_analyses_checkbox_label, listeners: { check: addanalyselayer } }), new geoext.layeropacityslider({ width: 125, value: 73, layer: map.getlayersbyname(openlayers_vector_layer_observations)[0], aggressive: true, style: 'position:absolute; left:135px;' }), new ext.form.checkbox({ title: extjs_gui_products_observations_checkbox_title, id: 'observations_checkbox_extjs', boxlabel: extjs_gui_products_observations_checkbox_label, inputvalue: extjs_gui_products_observations_checkbox_label, listeners: { check: loadgeojson } }),"; //this status controls whether or not radar button included in javascript of gui if($radarbutton==="true"){ echo " //tofinish new ext.slider({ width: 125, value: 73, listeners: { change: function(radarslider, val) { map.getlayersbyname(openlayers_wms_layer_radar)[0].setopacity(val/100); }}, style: 'position:absolute; left:135px;' }), new ext.form.checkbox({ title: extjs_gui_products_radar_checkbox_title, id: 'radar_composite_checkbox_extjs', boxlabel: extjs_gui_products_radar_checkbox_label, inputvalue: extjs_gui_products_radar_checkbox_label, listeners: { check: addradarlayer } }),"; } //this status controls whether or not radar button included in javascript of gui if($forecastbutton==="true"){ echo " //tofinish new ext.slider({ width: 125, value: 73, listeners: { change: function(forecastslider, val) { map.getlayersbyname(openlayers_wms_layer_forecast)[0].setopacity(val/100); }}, style: 'position:absolute; left:135px;' }), new ext.form.checkbox({ title: extjs_gui_products_forecast_checkbox_title, id: 'forecast_checkbox_extjs', boxlabel: extjs_gui_products_forecast_checkbox_label, inputvalue: extjs_gui_products_forecast_checkbox_label, listeners: { check: addforecastlayer } }),"; } //this status controls whether or not addition button included in javascript of gui if($sumbutton==="true"){ echo " //tofinish new ext.slider({ width: 125, value: 73, listeners: { change: function(summationslider, val) { map.getlayersbyname(openlayers_wms_layer_summation)[0].setopacity(val/100); }}, style: 'position:absolute; left:135px;' }), new ext.form.checkbox({ title: extjs_gui_products_sum_checkbox_title, id: 'sum_checkbox_extjs', boxlabel: extjs_gui_products_sum_checkbox_label, inputvalue: extjs_gui_products_sum_checkbox_label, listeners: { check: addsummationlayer } })"; } echo " ] }),

it looks it's less slider width, , more parent panel.

your code doesn't have you're setting width parent panel.

try that, , see happens.

(try clean code little - it's hard see what's going on, since it's indented far right).

css extjs layout cross-browser slider