Asv3's Blog

October 8, 2009

text indent problem in Submit buttons on IE6

Filed under: css — Tags: , , , , — asv3 @ 2:24 pm

People often use Images for buttons in UI for visual feel and capability of pictures/images to convince the message within given space. Say, for example thumbs up and down buttons, to have then lied out in text take minimum 100px (width) each, where as using image buttons we can do that with 16×16 icon, hence we started using images as background for buttons and having same text with CSS text-indent to cover accessibility concerns. But here comes most nightmarish browser for front-enders, IE6, text-indent on submit buttons doesn’t work in IE6, but luckily we don’t have to change our approach or sweat over it, just add font-size:0 and line-height:0 for that button, you will achieve desired look and functionality.so that code look like this.

.image_submit_button{
background
: transparent url(image url); width:16px; height:16px; /* background position if you are using sprites */
font-size
:0; line-height:0/* add a ‘*’ before font-size/line-height if you want to hide this from other browsers */
}

Create a free website or blog at WordPress.com.