[Solved] css and tree? reset.css reset-min.css

[cluettr]

I've run into an issue with reset-min.css messing with my own layout so I excluded it.

I've now run into an issue with the tree not rendering as it should. Images are there but with borders, and the font is not accurate. I used firebug to try and track it down but I can't see where the inheritance is taking place. Is there a way to force/overide the css by assigning a class to the div which holds the tree? If so what class should be assigned?

[manugoel2003]

I don't think excluding reset-min.css could possibly do what u r saying.... ummm, if u could include a snapshot of the problem, it would be easier

[cluettr]

Thank you for the response. Snapshot attached:

[manugoel2003]

First off.... plz set this line just after including the ext-all.js.... the ideal place would be in the begining of your Ext.onReady handler

Ext.BLANK_IMAGE_URL = "<path to resources folder>/images/default/s.gif";

Secondly, are you including multiple CSS files instead of including the ext-all.CSS?? coz, if thats so, then you probably have missed to include some CSS file.

[tryanDLS]

Is BLANK_IMAGE_URL pointing to the right location?

[cluettr]

manugoel2003,

I had the BLANK_IMAGE_URL pointing to something other than the s.gif file. I had read on another post that all you needed to do was point this to some file on your server to avoid the security warning message. However, I corrected it to the specified path and tested it but still get the same results. I do have multiple .css files but one of the files kills my application alltogether which is the reset-min.css file. So as a workaround I specified each css file independently without including reset-min.css.

TryanDSL,

The BLANK_IMAGE_URL is as follows and points to the correction location:


Ext.BLANK_IMAGE_URL = "https://enss.verizon.com/_javascript/ext-1.1-beta2/resources/images/default/s.gif";

Also... I get the same issue when I right click column headings in the grid. The context menu that pops up has the same odd css styling (or lack of styling). It seems to be specific to lists <UL>'s.

[tryanDLS]

There are several threads discussing the reset css file and why it's done that way. Removing all the base settings established by the reset.css file is going to cause potential issues thru-out Ext, as the widget all rely on knowning the base they're working from. For OLs and ULs Ext sets the list style to none because those elements are used in numerous places to build structures - you may need to modify you existing code's css to use more specific entries if they need to vary from the base settings.

[cluettr]

Please tell me you are kidding?

For me to go back and change everything that the reset.css file breaks is going to be a nightmare. Out of curiosity what is in reset.css that modifies so much of my existing css?

[tryanDLS]

Well if it breaks a lot of your stuff, it's a symptom of questionable css use in your existing code. I suggest you take a look at that file and understand what it does and how it relates to your existing css implementation. The fact that your existing stuff breaks says you are probably are coding css entries at too generic a level. For example putting text-align:center on the body or generic div elements. I suggest you start with thread (http://extjs.com/forum/showthread.php?t=5927) and then search the forums for some others for background regarding this.

[cluettr]

Yes, I do agree... I'm a css newbie... Tomorrow I'll be spending my morning cleaning up my css. Thanks for the input and response... went into panic mode briefly :-|

[cluettr]

So just to be clear... Firefox is stating that it is going to force nearly every element in my layout to 0 margin and 0 padding, no?


html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
margin:0pt;
padding:0pt;
}

[cluettr]

Although I am sure it is not suggested one could tweak the reset.css file such that specific elements are not forced to a 0 margin or 0 padding. I am changing my layout to div based rather than table based for two reasons... 1) Because that is what Ext.js expects and 2) Because it's the right way to do it... I was thinking about doing this prior to getting started with my project but put it off... once you are deep into it it because tough to convince yourself to go back.

Remember what is stated above... reset.css is used to help make Ext.js compatible with the other browsers so if you plan on having an app that is cross browser then you should include this file and not modify it.

[cluettr]

Because this it is an enterprise app I am developing I thought it was best to conform to the css requirements of extjs. I redesigned my layout using <div>'s and <span>'s rather than <table>'s. When I removed the last table and added in the reset-css file all things cleared up. Additionally it resolved another issue I was having with the grid and column headings.

If you plan on using this within another layout it is best to ensure that that layout is void of any tables.

[brian.moeskau]

You can use tables, you just need to reapply whatever table styles you need explicitly in your application CSS. But for layout, yes, you should use divs. Glad to see that you got your layout revised and working.

[cluettr]

Yes, thank you for correcting me Brian. I didn't mean to infer you cannot use tables.