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...

/**
* 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.