- From: Gérard Talbot <www-style@gtalbot.org>
- Date: Sun, 26 Dec 2010 13:37:59 -0800
- To: "Andrew Fedoniouk" <news@terrainformatica.com>
- Cc: "www-style mailing list" <www-style@w3.org>
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. Here is its style:
>
> span {
> display:inline-block;
> border:1px solid;
> padding:3px;
> vertical-align:baseline;
> }
> span:active { ???? }
>
> Straightforward solution of using something like padding:4px 2px 2px 4px;
"
The 'padding' property is a shorthand property for setting 'padding-top',
'padding-right', 'padding-bottom', and 'padding-left'
"
http://www.w3.org/TR/CSS21/box.html#padding-properties
padding: padding-top-value padding-right-value padding-bottom-value
padding-left-value;
So here, your padding:4px 2px 2px 4px; rule reduce padding-bottom instead
of maintaining it as before. Your padding:4px 2px 2px 4px; increases the
padding-top value instead of maintaining it to 3px.
> will not work here because of vertical-align:baseline ...
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
works for me in Konqueror 4.5.4, Chrome 8.0.552.224, Opera 11.0 and
Firefox 3.6.12 and meets your requirements.
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 Sunday, 26 December 2010 21:38:35 UTC