PDA

View Full Version : [FIXED-952] background:transparent instead of background-color:trans



grzegorz.borkowski
5 Jan 2010, 1:16 PM
Ext 3.0.3 and Ext 3.1, in ext-all.css, line 1398 reads:

background:transparent;It's a bug, this rule should be written:

background-color:transparent;Because of this bug, browser treats all other values (like background-image) as set to default ones. Because of this, whenever you want to set an icon for button, you must add !important to your declaration, to overwrite the default "no icon" setting.
After fixing this bug, there is no default "no icon" setting, and you can declare button styles for button icons without "!important".

Animal
5 Jan 2010, 11:16 PM
Quoting or changing ext-all.* is meaningless.

Do you mean this block at line 6 of structure/button.css?



.x-btn button{
border:0 none;
background:transparent;
padding-left:3px;
padding-right:3px;
cursor:pointer;
margin:0;
overflow:visible;
width:auto;
-moz-outline:0 none;
outline:0 none;
}


Or this block at line 337 in structure/button.css?



/* height adjustment class */
.x-btn-as-arrow .x-btn-mc em {
display:block;
background:transparent;
padding-bottom:14px;
}


Both probably should be changed as you point out.

grzegorz.borkowski
6 Jan 2010, 12:57 AM
I meant the first one (at line 6).
But the second one looks suspicious too - probably the same case; but I don't know where it is used, so I can't say for sure.
On the other hand, according to the CSS reference: http://reference.sitepoint.com/css/background the shortcut notation is valid: you can write "background:transparent" and it means that all other background attributes are meant to be set to default. So in this case, it's hard to say if it was set intentionally to such value, or is it a mistake.
On the other hand, from my point of view, setting styles in CSS to their default values makes sense only if you overwrite some non-standard styles. Here it's rather not a case. Just opposite, in this case it prevents you from overwriting defaults if you don't use !important (and we have dozens of icons declarations, putting !imporant next to each of them doesn't look like good design to me). And you are not able to overwrite it globally, without modifying Ext stylesheet (value 'inherit' is not supported on IE, and I don't see any other solution).
I've modified the first block you mentioned (at line 6) and it works much better in my case, and I haven't spot any problems; that's why I believe it should be fixed. So the second case is probably similar.

grzegorz.borkowski
11 May 2010, 6:13 AM
Any progress on this? I applied the fix locally to Ext CSS file, but since then we went through 2 or 3 Ext updates, after each of this update we got new CSS from Ext and had to fix it again and again. Any chance to have it fixed in Ext sources?

Jamie Avins
11 May 2010, 8:49 AM
Try to follow the bug guidelines. We'll take a look at it.

http://www.extjs.com/forum/showthread.php?71015-Posting-to-the-Bug-Forum

evant
11 May 2010, 6:24 PM
background:transparent occurs a number of times throughout the source, doesn't really seem to cause any problem.

grzegorz.borkowski
12 May 2010, 12:59 AM
Well, the problem is that such declaration really means more than transparent background. Because it's shortcut definition, it also forces browser to use default values for, i.e., background image. So it actually says "background-image: none" too. The problem is that it seems impossible to override this background-image setting without adding "!important" to every declaration. We have dozens of images declared in our application. For every one we have to add this stupid "!important". That's a bit crazy for me, espacially because usage of "!important" is not a typical solution (see i.e. http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=278#7). That's why I believe Ext shouldn't force you to usage such strange solutions for such typical things like declaring icon for button.
In other words, you should be able to define icon for button this way:

.icon-timesheets {
background-image:url(images/time.png);
}not this way:

.icon-timesheets {
background-image:url(images/time.png) !important;
}

evant
1 Jun 2010, 7:46 PM
Fair enough. Changed in SVN.