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.

So, when such span-behaving-like-button is not activated, it should get
back to its normal position: that is what I understand here.

> Here is its style:
>
> span {
>    display:inline-block;
>    border:1px solid;
>    padding:3px;
>    vertical-align:baseline;

Default and initial value is baseline anyway, to begin with.

> }
> span:active { ???? }
>
> Straightforward solution of using something like padding:4px 2px 2px 4px;
> will not work here because of vertical-align:baseline ...

Andrew,

Whenever you have special requests or particular and precise issues, best
for everyone involved is to provide an url with all of the (only) relevant
valid markup and valid css code. I assure you that you will get more
people to reply or provide suggestions, corrections, improvements, etc..
Over here, it saves time. Over here, anything that can save time will be
appreciated and will help us trying to help you.

Here's my proposal:

http://www.gtalbot.org/BrowserBugsSection/css21testsuite/button-like-span-activated-moves-left.html

If you want to move the text and only the text, not the box, then this can
be worked out too.

regards, 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 Sunday, 26 December 2010 21:12:45 UTC