styling a submit button as regular text link

[bnmm]

Hello,
I'd like to style a submit button as regular text link.
demo: www.byteshift.de/msg/div/input-as-link-by-css (XHTML strict)

I applied "display:inline; margin:0; padding:0;" to both the form and
the
input and "background:none; border:none;" 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.
MSIE6 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.

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
eg. safari/gecko/khtml.

Besides, they'd break when the content changes, so it would be hard to
mantain.
Any advice?
Marek
BTW:
I cant't post to dp-news.maxwell.syr.edu using a mail client, I keep
getting "440 Posting Not Allowed".

I don't know if it's needed, but I applied for and got a LISTSERV
password using bn**@gmx.net, but when trying to login to
"listserv.uga.edu/cgi-bin/wa?P1&L=sas-l" I keep getting "...you are not
authorized to post to the SAS-L list from the address you entered in
the login screen". What can I do?

[Fred Oz]

bn**@gmx.net wrote:

Hello,
I'd like to style a submit button as regular text link.
demo: www.byteshift.de/msg/div/input-as-link-by-css (XHTML strict)

I applied "display:inline; margin:0; padding:0;" to both the form and
the
input and "background:none; border:none;" 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.
MSIE6 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.

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
eg. safari/gecko/khtml.

Besides, they'd break when the content changes, so it would be hard to
mantain.
Any advice?
Marek
BTW:
I cant't post to dp-news.maxwell.syr.edu using a mail client, I keep
getting "440 Posting Not Allowed".

I don't know if it's needed, but I applied for and got a LISTSERV
password using bn**@gmx.net, but when trying to login to
"listserv.uga.edu/cgi-bin/wa?P1&L=sas-l" I keep getting "...you are not
authorized to post to the SAS-L list from the address you entered in
the login screen". What can I do?

If you muck around with styles long enough you will discover what to
do. Can you provide a sensible reason for hiding a submit button?
--
Fred

[Safalra]

bn**@gmx.net wrote:

Hello,
I'd like to style a submit button as regular text link.
demo: www.byteshift.de/msg/div/input-as-link-by-css (XHTML strict)

[snip]

Gecko (using Firefox1.0/Win) keeps adding space to the left and right. MSIE6 adds space to the left, right and top.
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 eg. safari/gecko/khtml.

What you *could* do is study this effect in various browsers, working
out how exactly it depends on font size in each of them, and then use
the various CSS parsing bugs to give each browser different CSS...

The problem is that buttons are not designed to look like links -
buttons are intended to perform some action (like submitting a form),
whereas links just go somewhere (and don't do anything on the way).

--
Safalra (Stephen Morley)
http://www.safalra.com/hypertext/

[Marek Moehling]

> If you muck around with styles long enough you will discover what to

do.
Obviously, you didn't get the point ...I already DID muck around and
explained how:

I tried solutions based on setting explicit width, height,
position:absolute/relative or negative margin/padding...
BUT: ...they break when fontsizes are changed... or ...when the content

changes...
Can you provide a sensible reason for hiding a submit button?

When using PHP sessions, links transfer sessions-IDs by long query
strings only, this misleads search engines more often than not to
unwanted and unpredictable indexing results, as some begin to interpret
query strings, but not yet sensibly so. Besides URLs several times as
long than needed are contrary to the concept of providing the visitor
with short URLs that can remembered and typed easily. Using mod_perl to
preserve states would help in some situations, but I can't tell my
clients to switch server/provider whenever it suits me. So, in some
situations, it's advisable to transfer states by POST and not by GET.
Stuffing text blocks with form elements is unsightly, though.

[Marek Moehling]

> What you *could* do is study this effect in various browsers, working

out how exactly it depends on font size in each of them, and then use Thx, I know, but I don't want to: it would be hardly manageable. I'm
looking for a generic CSS solution. Should there be none, I'll resort
to JS, but that's second choice.
the various CSS parsing bugs to give each browser different CSS...

Indeed bugs they are, as setting margin, padding, border, bg and
display as I did should do, according W3C.

[Jim Moe]

Marek Moehling wrote:

Can you provide a sensible reason for hiding a submit button?
When using PHP sessions, links transfer sessions-IDs by long query
strings only, this misleads search engines more often than not to

This is untrue. PHP can access data sent by both GET and POST methods.
[...] Using mod_perl to
preserve states would help in some situations, but I can't tell my
clients to switch server/provider whenever it suits me. So, in some
situations, it's advisable to transfer states by POST and not by GET.
Stuffing text blocks with form elements is unsightly, though.

Using the POST method and hidden input fields eliminates URL bloat.
Since your are using php, this should be no problem delivering pages with
tracking data.
Why mod_perl? You have php.
I do not understand you comment about switching ISPs.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Alan J. Flavell]

On Tue, 12 Apr 2005, Jim Moe wrote:

Using the POST method and hidden input fields eliminates URL bloat.

Off-topic for a stylesheets group; but unnecessary use of POST can
also make a site more hostile to navigate. Attempts to move Back can
result in browser alerts, warning about re-submission of POST data.
And things that would have been naturally cacheable become by default
uncacheable, and have to be delivered all over again by the server,
unless the author has the expertise to deal with such details.

Oh, and trying to fake a submit control as a text link is rude. Users
get to know what the various components of a web page look like, and
how they're likely to behave; the more discerning ones will get angry
if they find you're fooling them. (Or maybe the hon Usenaut doesn't
want any discerning visitors? SCNR).

[Marek Moehling]

Sorry - mostly OT, still looking for answers to my CCS issue, though...

When using PHP sessions, links transfer sessions-IDs by long query
strings only, this misleads search engines more often than not to This is untrue. PHP can access data sent by both GET and POST...

I've said nothing to the contrary: My issue here are links, THEY are
restricted to GET - and that's what I'd like to get around "...IN SOME
SITUATIONS..." only, though...
Using the POST method and hidden input fields eliminates URL bloat. Thx, that's resuming my explanation, ...detailed for those who might
need it.
Since your are using php, this should be no problem delivering pages
with tracking data. It is (visually, not technically) WHEN trying do do it insides of text
blocks:

...Stuffing text blocks with form elements is unsightly, though... Why mod_perl? You have php.
I do not understand you comment about switching ISPs.

Unlike PHP, mod_perl can preserve states even when using links and
without query strings, so in some situations I'd prefer mod_perl over
PHP, but when my clients' account doesn't offer this option, switching
to an hoster that does is the only solution ...which often is not
viable neither, as clients tend not to want the buerocratic hassle
involved or possible extra charges.

As for Jim Moe's reply:
Off-topic for a stylesheets group; but unnecessary use of POST can
also make a site more hostile to navigate. Attempts to move Back can
result in browser alerts, warning about re-submission of POST data. And things that would have been naturally cacheable become by default uncacheable, and have to be delivered all over again by the server,
unless the author has the expertise to deal with such details. Well known and very, very true.
Oh, and trying to fake a submit control as a text link is rude. Users get to know what the various components of a web page look like, and
how they're likely to behave; the more discerning ones will get angry if they find you're fooling them. (Or maybe the hon Usenaut doesn't
want any discerning visitors? SCNR).

So flame wars began; the above is well known and SO true again and yet
it starts to get obsessive-compulsive here, "...IN SOME SITUATIONS it's
advisable to transfer states by POST and not by GET" is my stand,
nothing more or less, wether you mislead users depends on your
intentions and the implementation. You CAN mislead users even when
adhering slavishly to standards.
Resuming: Browsers have bugs rendering form elements, they add
padding/margin/whatever where (according W3C specs) they shouldn't.
That's well known and mostly doesn't become visible, though sometimes
it does. So far nobody found an answer to my **CSS** issue, which is
quite OK: neither did I - but I'd prefer those who have no solutions
but strong OT stands (or prefer to read selectively) just not to post.
Should a good idea come up, I'd still be glad to hear about it.

[Darin McGrew]

Marek Moehling <bn**@gmx.net> wrote:

So far nobody found an answer to my **CSS** issue, which is
quite OK: neither did I - but I'd prefer those who have no solutions
but strong OT stands (or prefer to read selectively) just not to post.
Should a good idea come up, I'd still be glad to hear about it.

Welcome to USENET. It's a discussion forum. You posted a message, and
various people have discussed it. You don't get to control which aspects of
your original message are open for discussion and which aren't.
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"I can take one day at a time, but sometimes several days attack me at once."

[Fred Oz]

Marek Moehling wrote:

If you muck around with styles long enough you will discover what to
do.

Obviously, you didn't get the point ...I already DID muck around and
explained how:

I tried solutions based on setting explicit width, height,
position:absolute/relative or negative margin/padding...

BUT:
...they break when fontsizes are changed... or ...when the content

changes...

Can you provide a sensible reason for hiding a submit button?

When using PHP sessions, links transfer sessions-IDs by long query
strings only, this misleads search engines more often than not to
unwanted and unpredictable indexing results, as some begin to interpret
query strings, but not yet sensibly so. Besides URLs several times as
long than needed are contrary to the concept of providing the visitor
with short URLs that can remembered and typed easily. Using mod_perl to
preserve states would help in some situations, but I can't tell my
clients to switch server/provider whenever it suits me. So, in some
situations, it's advisable to transfer states by POST and not by GET.
Stuffing text blocks with form elements is unsightly, though.

Interesting discussion below.

Here is my effort. Only tested in Firefox & IE, so you may want to
try a few other mainstream ones - Netscape, Safari, Opera maybe.

Only included the relevant bits:
<style type="text/css">
body { margin:10px; vertical-align: middle;}
* { font:normal 20px/25px courier, monospace;}

.linkForm, .link
{ display:inline; margin:0; padding:0; vertical-align: -1px;
width: 3.8em;}
.link
{ background:none; border:none; cursor:pointer; color:red;
text-align: left; line-height: 1;}
.sSpace {font-size: 85%;}
</style></head>

<body>

<div id="summary">
someStr anotherStr BUTTON yetAnotherStr<br>
someStr anotherStr BUTTON yetAnotherStr<br>
<form class="linkForm">someStr anotherStr<span
class="sSpace">&nbsp;</span><input type="submit" class="link"
value="BUTTON"><span
class="sSpace">&nbsp;</span>yetAnotherStr</form><br>
someStr anotherStr BUTTON yetAnotherStr<br>
someStr anotherStr BUTTON yetAnotherStr<br>
</div>
--
Fred

[Marek Moehling]

Thx, that's quite an improvement, some pixel quirks remain. I'll work
with that, possibly trying to get rid of the spans. I won't have time
soon though, anyone interested should mail me, I'll alert them when I
post the results.
Marek