Re: [css-d] button using text and graphic

2014-09-04 Thread Philippe Wittenbergh
Le 4 sept. 2014 à 00:31, Tom Livingston tom...@gmail.com a écrit : If you look carefully at the image I linked to, the text and arrow image aren't well centered vertically. It look better in Safari. I know vertical centering is a bit annoying but is there a better way to go about this

Re: [css-d] button using text and graphic

2014-09-04 Thread Tom Livingston
On Thu, Sep 4, 2014 at 9:29 AM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 4 sept. 2014 à 00:31, Tom Livingston tom...@gmail.com a écrit : If you look carefully at the image I linked to, the text and arrow image aren't well centered vertically. It look better in Safari. I know vertical

Re: [css-d] button using text and graphic

2014-09-04 Thread Tom Livingston
One possibility: set the line-height to '1' on the element. Might help a little by making the line box the same size as the font-size. Le 4 sept. 2014 à 00:50, Tom Livingston tom...@gmail.com a écrit : Also, I can't use background-position: 100% 50%; in this case as the arrow is a

Re: [css-d] button using text and graphic

2014-09-03 Thread Tom Livingston
On Tue, Sep 2, 2014 at 7:55 PM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 3 sept. 2014 à 07:05, Georg ge...@gunlaug.com a écrit : Den 02.09.2014 22:20, skrev Tom Livingston: http://www.tomliv.com/img/button.png If that's a typical button, I would think the addition of

Re: [css-d] button using text and graphic

2014-09-03 Thread Tom Livingston
If you look carefully at the image I linked to, the text and arrow image aren't well centered vertically. It look better in Safari. I know vertical centering is a bit annoying but is there a better way to go about this structure/style? Sorry. The structure I'm currently using is just this:

Re: [css-d] button using text and graphic

2014-09-03 Thread Tom Livingston
On Wed, Sep 3, 2014 at 11:32 AM, Tom Livingston tom...@gmail.com wrote: If you look carefully at the image I linked to, the text and arrow image aren't well centered vertically. It look better in Safari. I know vertical centering is a bit annoying but is there a better way to go about this

Re: [css-d] button using text and graphic

2014-09-03 Thread Tom Livingston
In addition: background-position: 100% 50%; and again, use em, rem instead of px for the padding. and adding the arrow in with '::after' should be flexible enough to work. Not great for AT, if you use the 'content' property; if you use a background image on the ::after element, you'll

Re: [css-d] button using text and graphic

2014-09-03 Thread Jon Reece
On Tue, Sep 2, 2014 at 4:20 PM, Tom Livingston tom...@gmail.com wrote: ​ I have a button, as shown here: http://www.tomliv.com/img/button.png ​[...]​ ​ This type of style comes up a lot where i work. This isn't very stable. It's easily messed up by different font sizes - either

[css-d] button using text and graphic

2014-09-02 Thread Tom Livingston
I have a button, as shown here: http://www.tomliv.com/img/button.png and I am using this style: .button{ display: inline-block; background-color: $yellow; background-image: url(../img/button-arrow.png); background-position: 100% 0; background-repeat: no-repeat; color:

Re: [css-d] button using text and graphic

2014-09-02 Thread Crest Christopher
What do you mean by live text ? Christopher Tom Livingston wrote: color: $lightblue __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ --

Re: [css-d] button using text and graphic

2014-09-02 Thread Tom Livingston
The text isn't a graphic. On Tue, Sep 2, 2014 at 4:33 PM, Crest Christopher crestchristop...@gmail.com wrote: What do you mean by live text ? Christopher Tom Livingston wrote: color: $lightblue -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 |

Re: [css-d] button using text and graphic

2014-09-02 Thread Karl DeSaulniers
Hi Tom, Have you tried the good 'ol button element? button type=button class=buttonLive Text!/button Best, Karl Karl DeSaulniers Design Drumm http://designdrumm.com On Sep 2, 2014, at 3:45 PM, Tom Livingston tom...@gmail.com wrote: The text isn't a graphic. On Tue, Sep 2, 2014 at

Re: [css-d] button using text and graphic

2014-09-02 Thread Georg
Den 02.09.2014 22:20, skrev Tom Livingston: http://www.tomliv.com/img/button.png If that's a typical button, I would think the addition of 'background-size' and adding the arrow in with '::after' should be flexible enough to work. regards Georg

Re: [css-d] button using text and graphic

2014-09-02 Thread Philip Taylor
Tom Livingston wrote: background-color: $yellow; color: $lightblue; What do the dollar signs contribute ? Philip Taylor __ css-discuss [css-d@lists.css-discuss.org]

Re: [css-d] button using text and graphic

2014-09-02 Thread Tom Livingston
Sorry. A little sass is still in there. On Tuesday, September 2, 2014, Philip Taylor p.tay...@rhul.ac.uk wrote: Tom Livingston wrote: background-color: $yellow; color: $lightblue; What do the dollar signs contribute ? Philip Taylor -- Tom Livingston | Senior Front-End

Re: [css-d] button using text and graphic

2014-09-02 Thread Tom Livingston
I have. I usually get the same result as far as tweakiness. What I'm after is more stability. Especially with vertical centering and spacing. On Tuesday, September 2, 2014, Karl DeSaulniers k...@designdrumm.com wrote: Hi Tom, Have you tried the good 'ol button element? button type=button

Re: [css-d] button using text and graphic

2014-09-02 Thread Tom Livingston
I'll play with that, thanks Georg On Tuesday, September 2, 2014, Georg ge...@gunlaug.com wrote: Den 02.09.2014 22:20, skrev Tom Livingston: http://www.tomliv.com/img/button.png If that's a typical button, I would think the addition of 'background-size' and adding the arrow in with

Re: [css-d] button using text and graphic

2014-09-02 Thread Philippe Wittenbergh
Le 3 sept. 2014 à 07:05, Georg ge...@gunlaug.com a écrit : Den 02.09.2014 22:20, skrev Tom Livingston: http://www.tomliv.com/img/button.png If that's a typical button, I would think the addition of 'background-size' yes (sized in em, or rem, using an SVG image) In addition: