PDA

View Full Version : [SOLVED]CSS Confusion



guir
20 Jul 2009, 11:25 PM
Hi,

I was working with an ExtJS-PHP-MySql application it worked/appeared properly when I visited last time.

But today when I checked before a modification noticed all CSS of ExtJS has gone out of order. Before and after any compnonent (button, toolbar button, grid cell, etc) black vertical lines are appearing with all the browsers. It seems to be a CSS issue and when I checked /resources/css/ext-all.css was there.

Then I checked with Firefox error console and confirmed CSS is returning errors, there is a list of many similar errors/warnings, I have extracted some and attached herewith.

The above was based on ExtJS earlier version, after removing old file,I checked with installign ExtJS3, that too gave similar issue (black lines, but appearance slightly differs)

I have attached the screenshot too, could someone please guide me to fix this, this is actually an urgent need, so your help greatly helps me.

Thanks and Best Regards

Indunil
(:|

Condor
21 Jul 2009, 12:09 AM
It almost looks like you are using the Ext 3 .js with Ext 2 .css and images.

guir
21 Jul 2009, 12:32 AM
Hi,

Even with the ExtJS 2.x , the issue was there.

Assuming, as a fix, then I tried with complete installation of ExtJS 3.*

But the same issue remains, except that with ExtJS black lines are well aligned than with ExtJS 2

What else can cause this??

Condor
21 Jul 2009, 12:39 AM
How did you publish the .css and image files? The .css file contains links to the images, so it is best to publish the entire 'resources' directory.

Also, did you set Ext.BLANK_IMAGE_URL to point to s.gif on your own server?

guir
21 Jul 2009, 12:49 AM
Hi,

Today after seeing the issue, I downloaded latest ExtJS , and uploaded entire resources directory at one.

You can see folders here.

http://www.bizydesigns.com/indunil/vt/resources/

As I said earlier, it was working properly with even with ExtJS 2.*, but not get fixed even after fresh installation of ExtJS 3.* . All folders and files or previous installation removed before new installation.

Thanks and Best Regards

Indunil

guir
21 Jul 2009, 12:50 AM
+ this is common with IE, FF & Chrome

guir
21 Jul 2009, 12:52 AM
Sorry, could you please clarify this further?

Thanks

Indunil

Condor
21 Jul 2009, 12:58 AM
For Ext.BLANK_IMAGE_URL read the first item in the FAQ (http://extjs.com/learn/Ext_FAQ).

Did you also clear the cache of the browser before testing?

guir
21 Jul 2009, 1:25 AM
Hi,

I tested with setting the Ext.BLANK_IMAGE_URL , that too doesn't work.

Also I tested after clearing caches.

Thanks and Best Regards

Indunil

guir
21 Jul 2009, 1:29 AM
Please see the CSS errors dumped by Firefox error console, attached in txt format

Thanks and Best Regards

Indunil

Condor
21 Jul 2009, 1:31 AM
Looking at your screenshot more closely, I think this is caused by your own css.

Does your own css contain rules for TABLE or TD? Those rules are far to general, you'll need to make them more specific, so they aren't applied to Ext buttons.

ps. CSS errors are common. The css rules that you mention are meant for different browsers, so it's even intended that they aren't processed by this browser.

guir
21 Jul 2009, 2:46 AM
Hi,

It is the issue, I have used following CSS in the same stylesheet for non-extjs content.


thead th,
tfoot th {
padding: 0.5em;
text-align: left;
border: 1px solid black;
background-color: #AAF;
}

tfoot td {
border-top: 1px solid black;
}

tbody td {
padding: 0.5em;
border-left: 1px solid black;
border-right: 1px solid black;
}

tbody tr.odd {
background-color: #DDF;
}

td.numeric,
th.numeric {
text-align: right;
}

Thank you very much for pointing out it.

Also, think it is better to mention in documentations if not included. :)

Best Regards

Indunil

steffenk
21 Jul 2009, 3:04 AM
You are responsible for custom CSS, no need to mention that in docs.

Be aware of such general formating, you know that ExtJS is using tables ;)

Condor
21 Jul 2009, 3:07 AM
I would prefix those rules with a specific class, e.g.


.content tbody td {
padding: 0.5em;
border-left: 1px solid black;
border-right: 1px solid black;
}

and put the table you actually want to display using these css rules inside a div with class="content".

guir
21 Jul 2009, 3:22 AM
Be aware of such general formating, you know that ExtJS is using tables ;)

Sorry, I was not aware of that ;) .

I am a very beginner to ExtJS, didn't noticed elsewhere that ExtJS is table based.

tryanDLS
21 Jul 2009, 6:23 AM
Please give your post a real title - your problem is no more urgent than anyone else here.

guir
21 Jul 2009, 6:36 PM
Thanks for the advice .

guir
21 Jul 2009, 6:41 PM
Tried to mark thread as solved, or change the title, but was not possible.