1

In our application there are many dojo buttons of type dijit.form.Button. It works fine in Firefox. However, in IE, there are extra padding to the left and right of the texts in the button. The length of the padding is proportional to the length of the text in the button.

Is there any way to remove those paddings?

I searched the web and found ways for Buttons, for example: http://www.viget.com/inspire/styling-the-button-element-in-internet-explorer/

However, it does not work for dijit.form.Button.

Note that the dijit.form.Button is inside table cells. It seems ok (no padding) if the button is not in table cells.

Thanks in advance.

Bob
  • 281
  • 1
  • 4
  • 13
  • may be you can use reset sheet for this – sandeep Nov 11 '11 at 04:29
  • In which version of IE does this happen? Which dojo theme are you using? Do you see the same issue in this fiddle: http://jsfiddle.net/froden/DyvzA/3/ ? – Frode Nov 11 '11 at 09:59
  • Frode's version is working fine for me™ even after I change the browser mode to IE7 (the non-styled buttons do look weird before they fully render, though). Perhaps you forgot to include one of the dojo stylesheets? – hugomg Nov 11 '11 at 19:03
  • Hi Frode, I use IE version 8.0 and Dojo theme tundra. In the fiddle, it works fine. – Bob Nov 14 '11 at 02:34

1 Answers1

0

DO:

.dijitButtonText
{
    padding:0pt;
}  

.dijitButtonText  
{       
    padding:0pt;
} 

.dijitButtonText
{      
    padding:0pt;
}

on your css....if you have assigned your buttons into different baseClass...do:

.myBaseClass .dijitButtonText
{
    padding:0pt;
}  

.myBaseClass .dijitButtonText  
{       
    padding:0pt;
} 

.myBaseClass .dijitButtonText
{      
    padding:0pt;
}

to avoid global change to every dojo button...

Vin.X
  • 4,759
  • 3
  • 28
  • 35