Re: Two CSS challenges

Here is the link:
http://terrainformatica.com/w3/like-a-button.htm

it contains referential button that you can try. Please do this in IE as
other browsers did not manage to make button press right, I suspect for
reasons that I've mentioned.

And now click on button-alike-span - that is how it should be done ideally
(consider this as requirement at least).

As you see I was forced to use <span><label>text</label></span> but
I would like to avoid use of that label element - it is redundant.
Ideally CSS should allow to do such simple things.


-- 
Andrew Fedoniouk

http://terrainformatica.com



-----Original Message----- 
From: "Gérard Talbot"
Sent: Sunday, December 26, 2010 2:47 PM
To: Andrew Fedoniouk
Cc: W3C style mailing list
Subject: Re: Two CSS challenges

Le Sam 25 décembre 2010 12:31, Andrew Fedoniouk a écrit :
> Here are two challenges that have no solutions in modern CSS.
>
> 1. Consider this simple markup:
>
> <p> Something <span>Like a Button</span></p>
>
> I would like to define the span above to behave (visually) as a button -
> on
> span:active I would like to shift/offset its text from its normal position
> by 1px.

[snipped]

Here's a recap of the proposed testcases so far with 3 customized
(according to my tastes,... although line-height: 1.25 is almost necessary
here):

A button-like span shift/offset its text by 1px when :activated, version 1:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/button-like-span-activated-moves-left.html

A button-like span shift/offset its text by 1px when :activated, version 
1.1:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/button-like-span-activated-moves-left-v1.1.html

A button-like span shift/offset its text by 1px when :activated, version 2:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/button-like-span-activated-moves-left-v2.html

A button-like span shift/offset its text by 1px when :activated, version 
2.1:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/button-like-span-activated-moves-left-v2.1.html

A button-like span shift/offset its text by 1px when :activated, version 3:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/button-like-span-activated-moves-left-v3.html

A button-like span shift/offset its text by 1px when :activated, version 
3.1:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/button-like-span-activated-moves-left-v3.1.html

All 6 testcases work as expected in Firefox 3.6.13, Opera 11.0, Chrome
8.0.552.224 and Konqueror 4.5.4.

season's greetings, Gérard
-- 
CSS 2.1 Test suite RC4 (December 10th 2010)
http://test.csswg.org/suites/css2.1/20101210/html4/toc.html

Contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/

Web authors' contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html

Received on Monday, 27 December 2010 01:55:42 UTC