Results 1 to 7 of 7

Thread: ext-all.css defines basic html tags such as p, h1, h2, ..,

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    5
    Vote Rating
    0
      0  

    Default ext-all.css defines basic html tags such as p, h1, h2, ..,

    I'm trying to use ext in one of my applications. My application defines the properties for basic html elements such as p, h1, h2, h3, h4, etc.

    But when I include ext-all.css I discovered it also defines properties for these same basic html elements causing just about every page on my application to look wrong. In particular, the following line in ext-all.css is the one:

    Code:
    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:'';}
    Notice it sets the margin and padding to zero for a whole bunch of basic html tags. Then the font size for all headers is set to 100%. And list-style is set to none for ol and ul.

    If I take out h1,h2,...,ol,ul out of these definitions then things in Ext begin to look wrong.

    Will future versions of Ext require basic html tags such as these to have these properties? Or will it use its own classes.

    Is an app supposed to use its own classes instead of defining the look of basic html elements in order to avoid conflicts with Ext?

    Anyways, any help, advice, guidance is greatly welcome and appreciated!

    Thanks in advance

  2. #2
    Sencha User JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
      0  

    Default

    There are tons of differences in just margin and padding alone on numerous elements between the major browsers. That bit of CSS simply equalizes things. If you have custom CSS styling you wish to apply, simply include that CSS after ext-all.css
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    24
    Vote Rating
    0
      0  

    Default

    If somebody is adding Ext to an existing application these CSS rules will likely cause unnecessary frustration. Is there really a need to have them defined in Ext? Ext is a series of widgets - the CSS should be specific to them and not affect the surrounding application. For example why should I have to re-style my ul,li lists? And if I do they will clash with Ext unless I use custom classes. I should not need to do this.

    In my app I have now added ".x-layer" to the CSS definitions ext-all.css. So it now looks like this for example:

    Code:
    html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,... .x-layer { ... }
    This seems to work OK on most widgets for me at the moment - but I have only just started playing with Ext.

    Hope this helps...

    Matthew

  4. #4
    Sencha User JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
      0  

    Default

    Quote Originally Posted by mdelmarter
    If somebody is adding Ext to an existing application these CSS rules will likely cause unnecessary frustration. Is there really a need to have them defined in Ext?
    Yes, there's most definitely a need to have these CSS rules applied. Without them, browser issues will surface with respect to different treatments of margin, padding, etc. on the same element. These CSS rules equalize things as much as possible making the rest of the work of building, styling, and sizing widgets appropriately much easier.

    Quote Originally Posted by mdelmarter
    Ext is a series of widgets - the CSS should be specific to them and not affect the surrounding application.
    True, however it's not as easy as it sounds. For example, Ext can be used to build out something only within a single div of a page or it can be used to build out an entire application within the body. There isn't really a good way of applying these rules (for the reasons I mentioned above) such that they only affect things built with Ext.

    Quote Originally Posted by mdelmarter
    For example why should I have to re-style my ul,li lists?
    Sure, why not? You'll likely have to anyway to get them to look the same cross-browser. More importantly, the style for these lists will almost certainly have different characteristics (no more how slight) from one area they're used to the next.

    Quote Originally Posted by mdelmarter
    And if I do they will clash with Ext unless I use custom classes. I should not need to do this.
    Not true. You don't need to class them to style them without clashing with Ext. Instead, you can just refer to them more specifically in your CSS. The following:

    Code:
    #content li {
      list-style-image: url(/images/li_bg.gif);
      margin-left: 2em; 
    }
    will not cause any of the Ext uses of[*] to gain the styling unless they're rendered within an element with an id of #content.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    24
    Vote Rating
    0
      0  

    Default

    Thanks for the feedback Jeff. I will relook at this issue in my CSS. It is a slightly different approach than I have taken in the past, but the reasoning sounds good to me...

    Matthew

  6. #6
    Ext User
    Join Date
    Sep 2007
    Location
    Rothschild, WI
    Posts
    46
    Vote Rating
    0
      0  

  7. #7
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
      0  

    Default

    I had the same issue. I was kind of bent that Ext messed with the css of common tags as well. You can work around this but it does create more work. I think the idea behind Ext is that it works best when you use it out of the gate when you first build an application. If you mix it in later it can cause these types of issues.

    I was lucky, the only spot I needed to workarond was the content generated by TinyMCE. I put it in an iFRAME and life got better (kludgey workaround but again it worked).

Similar Threads

  1. basic dialog basic question
    By kevinknight in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 13 Mar 2007, 10:58 AM
  2. valid html ?
    By seldon in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 10 Mar 2007, 3:05 AM
  3. EditGrid and HTML buttons
    By RRS in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 13 Feb 2007, 3:36 PM
  4. formUpdate, dialogs and script tags oh my!
    By jamaljohnson in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 3 Jan 2007, 5:25 PM
  5. HTML coding
    By Compugasm in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 7 Nov 2006, 3:50 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •