PDA

View Full Version : Strange button rendering



dobberph
28 Oct 2010, 2:10 AM
Hi all,

I have there a strange behavior of my button(s):
23052
I think that somewhere a padding is used where it shouldn't.

Here is an extract of my code:
HTML:

<script type='text/javascript'>
Ext.onReady(function(){
var handlerContentFormEdit = function(button,event){
location.href='".$_SERVER["PHP_SELF"]."?view=".$_GET["view"]."&action=edit';
};
var buttonEdit = new Ext.Button({
handler:handlerContentFormEdit,
text:'editieren',
renderTo:'buttonEditDiv'
});
var buttonLastEdit = new Ext.Button({
text:'Last edited by ".$lastEditedUser["username"]." on ".$result["lasteditedon"]."',
disabled:true,
handleMouseEvents:false,
overCls:'x-item-disabled-new-mouseover',
disabledClass : 'x-item-disabled-new',
renderTo:'buttonLastEditDiv'
});
});
</script>
<style type='text/css'>
.x-item-disabled-new * {
color: ".$_SESSION["settings"]["COLOR_5"]." !important;
}
.x-item-disabled-new-mouseover * {
cursor:default !important;
}
#headerDiv{
width:100%;
display:block;
font-weight:bold;
text-align:right;
color:".$_SESSION["settings"]["COLOR_textcolorNav"]."
}
</style>
...
<table style='position:absolute;top:0px;left:0px;width:100%;'>
<tr>
<td>
<div id='buttonEditDiv' style='float:left;display:inline-block;margin-right:5px;'></div>
</td>
<td style='text-align:right;'>
<div id='buttonLastEditDiv' style='display:inline-block;margin-right:5px;'></div>
</td>
</tr></table>
Javascript:


Ext.onReady(function(){
new Ext.Panel(
{
title: '',
preventBodyReset: true,
renderTo: 'innerContent',
width: <?echo intval($_SESSION["settings"]["width"])-14;?>,
layout:'column',
autoScroll:true,
/*bodyStyle:'border-color:#D2E6F0',*/
border:false,
items:[
//...
]
},{
columnWidth:1,
baseCls:'x-plain',
bodyStyle:''+
'padding:10px 5px 5px 10px;'+
'text-align:left;',
items:[
{
title: '',
layout:'fit',
preventBodyReset: true,
padding:5,
autoLoad: {
url: '<?echo $_SESSION["page"];?>',
scripts: true
},
border:false
}
]
},{
width:<? echo $_SESSION["settings"]["breite_Anzeigen"]; ?>,
baseCls:'x-plain',
bodyStyle:'padding:10px 5px 5px 5px',
items:[
//...
]
}]
});
});
Perhaps someone has seen this before?

Thanks,
dobberph

Condor
28 Oct 2010, 3:16 AM
This is usually caused by your own stylesheet (do you have a padding for 'td' in there somewhere?).

To make sure, poke it with a debugger (Firebug, Developer Toolbar etc.) to see which css rule is causing the padding.

dobberph
29 Oct 2010, 1:19 AM
This is my whole own css:

body {font-family:"Arial";margin:0;padding:0;}
a:link, a:visited, a:focus {text-decoration:none;}
a:hover {text-decoration:underline;}
img {border:0 solid white;margin:0;padding:0;}
h1, h2, h3, h4, h5, h6, h7, h8 {color:#15428C;}
h1 {font-size:2em;text-align:center;}
#loginDivLong {display:inline-block;margin:0;padding:0;text-align:right;width:400px;}
#loginDiv {display:inline-block;margin:0;padding:0;text-align:right;width:100px;}
#loginDiv a {color:white;}
#greetingDiv {display:inline-block;margin:0;padding:0;text-align:right;width:300px;}
#greetingDiv a {color:white;}
#innerBody {background-color:white;margin:5px auto 10px;padding:0;width:1000px;}
#headerLine {background-color:#15428C;color:white;font-size:0.7em;line-height:30px;margin:0;padding:0;text-align:left;vertical-align:middle;width:1000px;}
#footerLine {background-color:#15428C;color:white;font-size:0.7em;line-height:30px;margin:0;padding:0;text-align:right;vertical-align:middle;width:1000px;}
.footerElement {cursor:pointer;padding-left:10px;padding-right:10px;}
#headerPic {border-left:2px solid #8DB2E3;border-right:2px solid #8DB2E3;}
#footerPic {background-color:white;border-left:2px solid #8DB2E3;border-right:2px solid #8DB2E3;}
#headerNavigation {background-color:#CEDFF5;border-left:2px solid #8DB2E3;border-right:2px solid #8DB2E3;line-height:40px;}
#navigationContent {border-left:1px solid white;border-right:1px solid white;color:#15428C;font-size:0.9em;font-weight:bold;height:40px;width:994px;}
.navigationElement {color:#15428C;cursor:pointer;float:left;margin:0;padding:0 25px;}
#headerNavigationSubmenu {background-image:url("lib/extjs/resources/images/default/shared/glass-bg.gif");background-position:left center;background-repeat:repeat-x;border-left:2px solid #8DB2E3;border-right:2px solid #8DB2E3;line-height:20px;width:996px;}
#headerNavigationSubmenuContent {border-left:1px solid white;border-right:1px solid white;border-top:1px solid white;color:#D2DCE6;font-size:0.9em;font-weight:bold;margin:0;padding:0;width:994px;}
#content {border-bottom:2px solid #8DB2E3;border-left:2px solid #8DB2E3;border-right:2px solid #8DB2E3;margin:0;padding:0;width:996px;}
#innerContent {padding:5px;}


.x-item-disabled-new * {color:#8DB2E3 !important;}
.x-item-disabled-new-mouseover * {cursor:default !important;}
#headerDiv {color:#15428C;display:block;font-weight:bold;text-align:right;width:100%;}

dobberph
29 Oct 2010, 1:27 AM
I could solve the problem with a preventBodyReset: false instead of true.
Although I didn't find the padding, that caused the problem.

Thanks,
dobberph