extra 1px space in dialog handle style - Ext JS
Im developing a new style and having trouble with 1px of padding showing up on my west drag handle. I just cant figure out where its coming from. Any ideas?
Here is the associated CSS...
PS, anyone running KDE might recognize this style.
#
2
03-03-2007, 04:29 PM
Is that in IE or FF?
#
3
03-03-2007, 05:23 PM
IE and FF are looking exactly the same.
However I just found the problem....its in the ext-all.css on line 1489
So I added a style that overrides that in my theme file...
and now everything looks fine.
Here is the associated CSS...
/**
* Basic-Dialog
*/
.x-dlg-proxy {
background:#d3d6d0;
border:2px solid #b3b6b0;
}
.x-dlg-shadow{
background:#cccccc;
}
.x-dlg .x-dlg-hd-left {
background: url(../images/smoothgray/basic-dialog/hd-sprite.gif) no-repeat 0 -27px;
zoom:1;
padding-left: 75px;
}
.x-dlg .x-dlg-hd-right {
background: url(../images/smoothgray/basic-dialog/hd-sprite.gif) no-repeat right 0;
zoom:1;
padding-right: 109px;
}
.x-dlg .x-dlg-hd {
background: url(../images/smoothgray/basic-dialog/hd-sprite.gif) repeat-x 0 -54px;
zoom:1;
text-align: center;
padding-left: 20px;
padding-bottom: 8px;
}
.x-dlg .x-dlg-dlg-body{
background:#636363;
border:0 none;
border-top:0 none;
padding:0 0px 0px;
position:absolute;
top:27px;left:0;
z-index:1;
}
.x-dlg-auto-tabs .x-dlg-dlg-body{
background:transparent;
}
.x-dlg-auto-tabs .x-tabs-top .x-tabs-wrap{
background:transparent;
}
.x-dlg .x-dlg-ft{
border-top:1px solid #232323;
background:#636363;
padding-bottom:6px;
}
.x-dlg .x-dlg-bg{
zoom:1;
}
.x-dlg .x-dlg-bg-left,.x-dlg .x-dlg-bg-center,.x-dlg .x-dlg-bg-right{
}
.x-dlg .x-dlg-bg-center {
padding: 0px 10px 10px 10px;
background:transparent url(../images/smoothgray/basic-dialog/bg-center.gif) repeat-x bottom;
zoom:1;
}
.x-dlg .x-dlg-bg-left{
padding-left:10px;
background:transparent url(../images/smoothgray/basic-dialog/bg-left.gif) no-repeat bottom left;
zoom:1;
}
.x-dlg .x-dlg-bg-right{
padding-right:10px;
background:transparent url(../images/smoothgray/basic-dialog/bg-right.gif) no-repeat bottom right;
zoom:1;
}
.x-dlg .x-tabs-top .x-tabs-body{
border:0 none;
}
.x-dlg .x-tabs-bottom .x-tabs-body{
border:1px solid #b3b6b0;
border-bottom:0 none;
}
.x-dlg .x-layout-container .x-tabs-body{
border:0 none;
}
.x-dlg .x-dlg-close {
background-image:url(../images/smoothgray/basic-dialog/close.gif);
}
.x-dlg .x-dlg-collapse {
background-image:url(../images/smoothgray/basic-dialog/collapse.gif);
}
.x-dlg-collapsed .x-dlg-collapse {
background-image:url(../images/smoothgray/basic-dialog/expand.gif);
}
.x-dlg div.x-resizable-handle-east{
background-image:url(../images/smoothgray/basic-dialog/e-handle.gif);
border:0 none;
width: 10px;
}
.x-dlg div.x-resizable-handle-south{
background-image:url(../images/smoothgray/s.gif);
border:0 none;
}
.x-dlg div.x-resizable-handle-west{
background-image:url(../images/smoothgray/basic-dialog/w-handle.gif);
border:0 none;
padding: 0px;
margin: 0px;
width: 10px;
}
.x-dlg div.x-resizable-handle-southeast{
background-image:url(../images/smoothgray/basic-dialog/se-handle.gif);
background-position: bottom right;
width:10px;
height:10px;
border:0;
}
.x-dlg div.x-resizable-handle-southwest{
background-image:url(../images/smoothgray/basic-dialog/sw-handle.gif);
background-position: top right;
width:10px;
height:10px;
padding: 0px;
margin: 0px;
border:0;
}
.x-dlg div.x-resizable-handle-north{
background-image:url(../images/smoothgray/s.gif);
border:0 none;
}
PS, anyone running KDE might recognize this style.
#
2
03-03-2007, 04:29 PM
Is that in IE or FF?
#
3
03-03-2007, 05:23 PM
IE and FF are looking exactly the same.
However I just found the problem....its in the ext-all.css on line 1489
.x-dlg div.x-resizable-handle-west{
background-image:url(../images/default/basic-dialog/e-handle.gif);
border:0;
background-position:1px;
}
So I added a style that overrides that in my theme file...
.x-dlg div.x-resizable-handle-west{
background-position:0px;
}
and now everything looks fine.