Today, I spent almost one afternoon solving Div horizontal center and making the page adaptive browser width. IE browser is really dead. FF/Google browsers are very good at debugging, So Ie is very hard to achieve the effect. Haha! This image is useful at last.
The following is the horizontal center style in IE and only applies to IE. other browsers do not respond.
<Style type = "text/CSS">
. Divboxcenter {text-align: center; display: Table-cell; Border: 0px solid red}
</Style>
Page code:
<Body> <br/> <center> <! -- FF or other browsers are centered here --> <br/> <Div class = "divboxcenter"> <! -- Solve the IE center problem --> <br/> <Table width = "95%" border = "0" bordercolor = "# cfddf0" cellpadding = "0" cellspacing = "0 "> <br/> <tr> <br/> <TD colspan =" 2 "> <Div id =" tpanel "> </TD> <br/> </tr> <br/> <tr> <br/> <TD colspan = "2"> <Div id = "mymenu"> </div> </TD> <br/> </tr> <br/> <TD> <Div id = "leftpanel"/> </TD> <br/> <TD> <Div id = "rightpanel"/> </TD> <br/> </tr> <br/> <TD colspan = "2"> <Div id = 'btbar '> </TD> <br/> </tr> <br/> </table> <br/> </div> <br/> </ center> <br/> </body> <br/>
1. Set the initial size at the beginning. After the render of the grid, Set grid. setwidth ();
VaR dataIn ={}; <br/> var tempwidth = document. body. clientWidth-50; // leave 2 sides blank <br/> If (952> tempwidth) {// 952 is the minimum page width set, that is: 1024x768 <br/> dataIn. width = 952; // The minimum browser value is 952. If the value is smaller than this value, a horizontal scroll bar is displayed. <br/> tempwidth = 952; <br/>} else {<br/> dataIn. width = tempwidth; <br/>}< br/> rtobjglobal. initgridwidth = tempwidth-200; // 200 indicates the width of the panel on the left of the page. The initial width of the grid is obtained. <br/>
2. Page adaptation:
Ext. eventmanager. onwindowresize (<br/> function (W, h) {<br/> var gridwidthvalue = 0; <br/> var tempwidth = W-50; <br/> If (tempwidth <952) {<br/> tempwidth = 952; <br/>}< br/> gridwidthvalue = tempwidth-200; <br/> var mymenu_id = ext. getcmp ("mymenu_id") <br/> var btoolbar = ext. getcmp ("btoolbar") </P> <p> If (rtobjglobal. rtobj_panelright) {<br/> rtobjglobal. rtobj_panelright.prop.grid.setwidth (gridwidthvalue); <br/>}</P> <p> mymenu_id.setwidth (tempwidth); <br/> btoolbar. setwidth (tempwidth); <br/> toppanel. setwidth (tempwidth); </P> <p >}< br/> );
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
