I have already created an input element of type submit as follows
input type="submit" alt="Next" class="next_button"
That has the following styles applied:
.next_button {
background:transparent url(next.jpg) no-repeat scroll 0 0;
border:none;
height:34px;
width:70px;
color:transparent;
font-size:0;
}
.next_button:hover{
background-position:-70px 0;
}
The background is the button as I would like it to appear, which for
browsers that suppourt :hover in this context shows a nice rollover with the
image being shifted, which also fails gracefully for the rest. The color:
transparent and font-size:0 styles were added because I do not want the
"Next" text to appear if CSS is enabled, but I do want some text to appear
on the button if CSS is not available for some reason.
The color:transparent style works for most browsers, but does not function
as desired in Opera or Internet Explorer. The font-size:0 style presents
the desired appearance in Opera.
In Internet Explorer however the text still appears with a 1px height across
the center of the button. Is there any way in Internet Explorer's
interpretation of CSS to not show any of the value or alt text so that it
will appear if the CSS were to fail?
Thanks,
Jack
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
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/
