JAnderson
4 Sep 2009, 10:38 AM
I know this has been discussed many different places, but I believe this is a very simple solution that could be utilized by people experiencing issues with Ext's CSS reset affecting older pages that are having ExtJS mixed into them.
In ext-all.css (or a copy, to be included instead when necessary) change this:
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}img,body,html{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}
To this:
.ext-reset html, .ext-reset body, .ext-reset div, .ext-reset dl,
.ext-reset dt, .ext-reset dd, .ext-reset ul, .ext-reset ol,
.ext-reset li, .ext-reset h1, .ext-reset h2, .ext-reset h3,
.ext-reset h4, .ext-reset h5, .ext-reset h6, .ext-reset pre,
.ext-reset form, .ext-reset fieldset, .ext-reset input,
.ext-reset p, .ext-reset blockquote, .ext-reset th, .ext-reset td {
margin:0;
padding:0;
}
.ext-reset img, .ext-reset body, .ext-reset html {border:0;}
.ext-reset address, .ext-reset caption, .ext-reset cite,
.ext-reset code, .ext-reset dfn, .ext-reset em,
.ext-reset strong, .ext-reset th, .ext-reset var {
font-style:normal;
font-weight:normal;
}
.ext-reset ol, .ext-reset ul {list-style:none;}
.ext-reset caption, .ext-reset th {text-align:left;}
.ext-reset h1, .ext-reset h2, .ext-reset h3,
.ext-reset h4, .ext-reset h5, .ext-reset h6 {font-size:100%;}
.ext-reset q:before, .ext-reset q:after {content:'';}
Then simply add:
cls: 'ext-reset'
To the configuration of the parent container for any ExtJS code you are placing on the page which relies on existing CSS to render correctly.
Our site has hundreds of existing pages so posted solutions telling people to leave the reset in place and simply re-style their pages isn't feasible for us. This should allow ExtJS and the existing page to both function normally.
In ext-all.css (or a copy, to be included instead when necessary) change this:
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}img,body,html{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}
To this:
.ext-reset html, .ext-reset body, .ext-reset div, .ext-reset dl,
.ext-reset dt, .ext-reset dd, .ext-reset ul, .ext-reset ol,
.ext-reset li, .ext-reset h1, .ext-reset h2, .ext-reset h3,
.ext-reset h4, .ext-reset h5, .ext-reset h6, .ext-reset pre,
.ext-reset form, .ext-reset fieldset, .ext-reset input,
.ext-reset p, .ext-reset blockquote, .ext-reset th, .ext-reset td {
margin:0;
padding:0;
}
.ext-reset img, .ext-reset body, .ext-reset html {border:0;}
.ext-reset address, .ext-reset caption, .ext-reset cite,
.ext-reset code, .ext-reset dfn, .ext-reset em,
.ext-reset strong, .ext-reset th, .ext-reset var {
font-style:normal;
font-weight:normal;
}
.ext-reset ol, .ext-reset ul {list-style:none;}
.ext-reset caption, .ext-reset th {text-align:left;}
.ext-reset h1, .ext-reset h2, .ext-reset h3,
.ext-reset h4, .ext-reset h5, .ext-reset h6 {font-size:100%;}
.ext-reset q:before, .ext-reset q:after {content:'';}
Then simply add:
cls: 'ext-reset'
To the configuration of the parent container for any ExtJS code you are placing on the page which relies on existing CSS to render correctly.
Our site has hundreds of existing pages so posted solutions telling people to leave the reset in place and simply re-style their pages isn't feasible for us. This should allow ExtJS and the existing page to both function normally.