Hi Corey,
I would simplify your button code to something like this:
.some_btn { background:transparent url(../images/some_btn.gif) no-repeat
center center; border:none; cursor:pointer; height:26px; line-height:26px;
text-align:center; margin:0; overflow:hidden; padding:0; width:99px;
}
Then use html like this:
<input type="submit" class="some_btn" value="buttontext" />
By setting line-height and button height the same, and centering the
background and the text, the button text should be positioned correctly.
Also use px font size rather than pt when layering over a px sized image if
you want precise control, but please make sure it's big enough to read...and
realize it might grow. Best to use your blank background button image and
let the input value determine what text is on the button.
Good luck!
Lisa
-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of corey deep
Sent: Tuesday, March 11, 2008 3:49 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] buttons elements that are kickass in IE6
Hello all,
I have been trying to accommodate a design spec involving intricately styled
buttons w/ rounded corners.... I have been sourcing out best of practices
and after trial and error, am leaning towards the use of image as form
button element ... however the techniques I have tested use text indent to
hide value text, and this is not working in IE6. Does anyone have experience
overcoming this obstacle, or possibly a better technique for presenting form
button elements consistently cross browser ( including ie6 )...
thanks in advance !
.some_btn {
position: relative;
background:transparent url(../images/some_btn.gif) no-repeat scroll left
top; border:0pt none; cursor:pointer; height:26px; margin:0pt;
overflow:hidden; padding:0pt; vertical-align:middle; width:99px;
text-indent: -9999px;
}
.some_btn:hover {
background: transparent url(../some_btn.gif) no-repeat 0 -27px; }
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
