Re: styling a submit button as regular text link with css
McKirahan
news:4255348b$0$3396$9b62...@news.freenet.de...
> Hello,
>
>
> I'd like to style a submit button as regular text link.
> demo: www.byteshift.de/msg/div/input-as-link-by-css
>
> I applied "display:inline; margin:0; padding:0;" to both the form and the
> input and "background:none; border:none; cursor:pointer;" to the input
only,
> which should do the trick, but it doesn't.
>
> Gecko (using Firefox1.0/Win) keeps adding space to the left and right.
> MSIE adds space to the left, right and top.
>
> I know how to deal with this using JS, but I'm looking for a CSS solution.
>
> Any advice?
> Marek
>
> bn5...@g214mx.net
> (remove numbers to despam)
If you put this line before your </form> tag
<input type="submit" value="BUTTON" />
you'll see why the word BUTTON is positioned as it is.
To see the "hand" under IE, add "cursor:hand;" after "cursor:pointer;".
McKirahan
> > If you put this line before your </form> tag
> > <input type="submit" value="BUTTON" />
> > you'll see why the word BUTTON is positioned as it is.
>
> It's clear why the word BUTTON is positioned as it is without my css
class,
> removing the default margin, padding, background, border and display
> properties all browsers add to form elements should solve the issue -
> and it fact the class .link does it mostly except for a few pixels, the
> question is: why not entirely, what css properties need to be overridden
> additionally?
>
AFAIK "margin" and "padding" do not apply to buttons.
Try this instead: width:78; height:26
>
> > To see the "hand" under IE, add "cursor:hand;" after "cursor:pointer;".
>
> That's beside the point too; IE6/7 have no trouble with W3C-conforming
> cursor:pointer, that's an IE<=5.5 issue only, they require the
non-standard
> cursor:hand.
>
Since this ng includes "ie55" in its name, I don't think it's "beside the
point".
Marek Möhling
It validates as strict and gets interpreted at least by gen 5/6/7 browsers
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.byteshift.de%2Fmsg%2Fdiv%2Finput-as-link-by-css&usermedium=all
> Try this instead: width:78; height:26
I tried solutions based on setting explicit width, height,
position:absolute/relative or negative margin/padding, they break when
fontsizes are changed by css or overridden by the user - which he can do in
modern browsers.