PDA

View Full Version : [FIXED-483][r5938 and older] Buttons width is different on firefox/webkit/ie



marcing
26 Jan 2010, 2:46 AM
I've noticed that all buttons are longer on IE/Chrome/Safari than on firefox.
It makes problems when I need to specify window size that would fit all toolbar buttons. When it fits Firefox it doesn't fit on Chrome/Safari.

I believe 1px difference is tolerable but current difference between firefox and webkit is not.

To illustrate on ext example:
examples/desktop/desktop.html "Grid Window"

Please let me know what can you do about it.

Thanks,
Marcin

Condor
26 Jan 2010, 2:56 AM
Try if the .css from my feature request (http://www.extjs.com/forum/showthread.php?t=77024) works better:

.x-btn button, .x-btn input, .x-btn a {
border:0 none;
background:transparent;
padding:0 3px;
cursor:pointer;
margin:0;
overflow:visible;
width:auto;
-moz-outline:0 none;
outline:0 none;
display:block;
}
.ext-ie .x-btn button, .ext-ie .x-btn input {
padding:0;
margin:0 3px;
width:1px;
}
.ext-strict .ext-ie7 .x-btn button, .ext-strict .ext-ie7 .x-btn input {
width:0;
float:left;
}
.ext-strict .ext-ie8 .x-btn button, .ext-strict .ext-ie8 .x-btn input {
width:auto;
}
.ext-gecko .x-btn button, .ext-gecko .x-btn input {
padding:0 2px 2px;
}
.ext-gecko .x-btn button::-moz-focus-inner, .ext-gecko .x-btn input::-moz-focus-inner {
padding:0;
}
.ext-webkit .x-btn button, .ext-webkit .x-btn input {
padding:0;
}
.x-btn button, .x-btn input, .x-btn a {
font:normal 11px arial,tahoma,verdana,helvetica;
color:#333;
}

marcing
26 Jan 2010, 3:37 AM
Hi Condor,

Thank you for suggestion.
I am including results with your css applied.

There are some changes, although I would not consider it a fix.
Biggest problem for me is that when using ext-all.css + your css on my project all toolbar images are not displayed on IE7 (last screen) - So far I can not explain why.
When I remove the following:


.ext-strict .ext-ie7 .x-btn button, .ext-strict .ext-ie7 .x-btn input
{
width: 0;
float: left;
}

Images are displayed again.

Thanks,
Marcin

jayrobinson
23 Feb 2010, 4:06 PM
I tested nine different browsers and 8/9 of them were within three pixels of each other.

The only one off the mark was Google Chrome 4.0.249.89 (38071) on Windows XP.

The simplest fix seems to be a simple WebKit specific override:

.ext-gecko .x-btn button, .ext-webkit .x-btn button {
padding-left:0;
padding-right:0;
}

This has been committed to 3.1.x and 3.2.x.

jayrobinson
23 Feb 2010, 4:37 PM
Reverted back for 3.1.x. This change will be released with 3.2.

marcing
23 Feb 2010, 11:55 PM
Hi jay,

Thanks for the info.
It seems to help - the difference is not that big now.

Thanks,
Marcin