Re: [css-d] Scalable CSS Buttons That Work in All Browsers
Ok I was able to make the scalable buttons work with the sliding door technique found here: Specific Button Solution http://filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/ They look great in all browsers: IE6, IE7 and Safari but is slightly off in FF3. And I haven't been able to come up with a solution that will make it work in all. It seems like FF3 is throwing a margin around the span that I can't control. Please take a look here: http://elliv.nbcuxd.com/ (previous address was renamed.) All feedback and suggestions welcomed. TIA, Elli --- On Mon, 10/20/08, Bill Brown [EMAIL PROTECTED] wrote: From: Bill Brown [EMAIL PROTECTED] Subject: Re: [css-d] Scalable CSS Buttons That Work in All Browsers To: [EMAIL PROTECTED] Cc: [EMAIL PROTECTED], 'CSS Discuss' css-d@lists.css-discuss.org Date: Monday, October 20, 2008, 10:43 PM Thierry Koblentz wrote: Hi All, Was just wondering if anyone knew of any good sliding door techniques or anything else that would allow me to create scalable buttons in the major browsers: IE6, IE7, FF, Safari. [snip] I have this page up: http://tjkdesign.com/articles/buttons/input-type-button.asp I can't find the time to write an article/tutorial about the technique, but you should be able to figure things out. Hi Elli! How's things in the Big Apple? Thierry also has an excellent resource here: http://tjkdesign.com/lab/uploader/buttons.asp It has more elements in the source than you're using but seems quite robust across the browser spectrum. Let me know if it helps, but give the credit to Thierry. If it's not quite what you need, I'll see if I can't dig something else up for you. Best, Bill -- ~~~ Bill Brown, MacNimble.com :: From dot concept to dot com since 1999 WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Scalable CSS Buttons That Work in All Browsers
Elli Vizcaino wrote:
They look great in all browsers: IE6, IE7 and Safari but is slightly
off in FF3. And I haven't been able to come up with a solution that
will make it work in all. It seems like FF3 is throwing a margin
around the span that I can't control.
Hi Elli--
I adjusted this:
.lgt_blue_btn, .wht_btn {font-weight: bold;
color: #FFF;
padding-right: 5px;
text-align: center;
width: auto;
overflow: visible;}
to this:
.lgt_blue_btn, .wht_btn {font-weight: bold;
color: #FFF;
padding-right: 0;/* Set to to 0 for FF3 */
text-align: center;
width: auto;
overflow: visible;}
to get it to work in FF3 on my Ubuntu box.
Hope it helps.
--Bill
--
~~~
Bill Brown, MacNimble.com :: From dot concept to dot com since 1999
WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Scalable CSS Buttons That Work in All Browsers
Right but then it won't work in the other browsers that's the problem I'm
having.
--- On Tue, 10/21/08, Bill Brown [EMAIL PROTECTED] wrote:
From: Bill Brown [EMAIL PROTECTED]
Subject: Re: [css-d] Scalable CSS Buttons That Work in All Browsers
To: [EMAIL PROTECTED]
Cc: [EMAIL PROTECTED], Martin Möller [EMAIL PROTECTED], 'CSS Discuss'
css-d@lists.css-discuss.org
Date: Tuesday, October 21, 2008, 11:49 AM
Elli Vizcaino wrote:
They look great in all browsers: IE6, IE7 and Safari
but is slightly
off in FF3. And I haven't been able to come up
with a solution that
will make it work in all. It seems like FF3 is
throwing a margin
around the span that I can't control.
Hi Elli--
I adjusted this:
.lgt_blue_btn, .wht_btn {font-weight: bold;
color: #FFF;
padding-right: 5px;
text-align: center;
width: auto;
overflow: visible;}
to this:
.lgt_blue_btn, .wht_btn {font-weight: bold;
color: #FFF;
padding-right: 0;/* Set to to 0 for FF3 */
text-align: center;
width: auto;
overflow: visible;}
to get it to work in FF3 on my Ubuntu box.
Hope it helps.
--Bill
--
~~~
Bill Brown, MacNimble.com :: From dot concept to dot
com since 1999
WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com,
Anytowne.com
The intuitive mind is a sacred gift and the rational
mind is a
faithful servant. We have created a society that honors the
servant and
has forgotten the gift. -- Albert Einstein
~~~
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Scalable CSS Buttons That Work in All Browsers
Elli Vizcaino wrote: Right but then it won't work in the other browsers that's the problem I'm having. Normally I would just make the 5px wide background-image on those buttons 10px wide (or wider) so it covers the gap, and let browsers do their things. That button-construction is pretty weak though, as span and background-images have fixed height. Browsers interpret line-height in pixels differently, which means Firefox will change line-height upon font-resizing while IE and Opera won't. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Scalable CSS Buttons That Work in All Browsers
Yes, creating a larger image is what I think I will have to do. Do you have any suggestions for making the background button/span construction better? TIA, Elli --- On Tue, 10/21/08, Gunlaug Sørtun [EMAIL PROTECTED] wrote: From: Gunlaug Sørtun [EMAIL PROTECTED] Subject: Re: [css-d] Scalable CSS Buttons That Work in All Browsers To: [EMAIL PROTECTED] Cc: 'CSS Discuss' css-d@lists.css-discuss.org Date: Tuesday, October 21, 2008, 3:13 PM Elli Vizcaino wrote: Right but then it won't work in the other browsers that's the problem I'm having. Normally I would just make the 5px wide background-image on those buttons 10px wide (or wider) so it covers the gap, and let browsers do their things. That button-construction is pretty weak though, as span and background-images have fixed height. Browsers interpret line-height in pixels differently, which means Firefox will change line-height upon font-resizing while IE and Opera won't. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Scalable CSS Buttons That Work in All Browsers
Elli Vizcaino wrote: Yes, creating a larger image is what I think I will have to do. Do you have any suggestions for making the background button/span construction better? Fixed-height background-images restrict such construction, but they can take a lot more if one adds an extra span to contain the text and offset this vertically with font-size. I can look in my archives and create a vertically centered text construction if you need one ... later :-) You can also probably extract something useful out of Dave S's attempts... http://rincon.pedrera.com/clients/pedrera/standards/Services_Philadelphia_website_design_development.asp Roger's custom corners can also be adapted... http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/ ...and they can take a lot more than Dave's - but Roger's are generally more complex. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Scalable CSS Buttons That Work in All Browsers
Gunlaug Sørtun wrote: ... I can look in my archives and create a vertically centered text construction if you need one ... later :-) Guess now is later, and the basics are here... http://www.gunlaug.no/tos/moa_38.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Scalable CSS Buttons That Work in All Browsers
Hi All, Was just wondering if anyone knew of any good sliding door techniques or anything else that would allow me to create scalable buttons in the major browsers: IE6, IE7, FF, Safari. The technique would have to work with any combination of elements such as: button span which is what I'm using in the work I'm doing now. That combination is working well in FF3 but not Safari or IE6 or 7. If I use a span it works well across all browsers but wouldn't validate given the use of the buttons in the form. Please look here to see what I'm referring to: http://elliev.nbcuxd.com/ Feedback and suggestions always welcomed. TIA, Elli __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Scalable CSS Buttons That Work in All Browsers
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] On Behalf Of Elli Vizcaino Sent: Monday, October 20, 2008 5:56 PM To: CSS Discuss Subject: [css-d] Scalable CSS Buttons That Work in All Browsers Hi All, Was just wondering if anyone knew of any good sliding door techniques or anything else that would allow me to create scalable buttons in the major browsers: IE6, IE7, FF, Safari. The technique would have to work with any combination of elements such as: button span which is what I'm using in the work I'm doing now. That combination is working well in FF3 but not Safari or IE6 or 7. If I use a span it works well across all browsers but wouldn't validate given the use of the buttons in the form. Please look here to see what I'm referring to: http://elliev.nbcuxd.com/ Feedback and suggestions always welcomed. I have this page up: http://tjkdesign.com/articles/buttons/input-type-button.asp I can't find the time to write an article/tutorial about the technique, but you should be able to figure things out. -- Regards, Thierry | http://www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Scalable CSS Buttons That Work in All Browsers
Thierry Koblentz wrote: Hi All, Was just wondering if anyone knew of any good sliding door techniques or anything else that would allow me to create scalable buttons in the major browsers: IE6, IE7, FF, Safari. [snip] I have this page up: http://tjkdesign.com/articles/buttons/input-type-button.asp I can't find the time to write an article/tutorial about the technique, but you should be able to figure things out. Hi Elli! How's things in the Big Apple? Thierry also has an excellent resource here: http://tjkdesign.com/lab/uploader/buttons.asp It has more elements in the source than you're using but seems quite robust across the browser spectrum. Let me know if it helps, but give the credit to Thierry. If it's not quite what you need, I'll see if I can't dig something else up for you. Best, Bill -- ~~~ Bill Brown, MacNimble.com :: From dot concept to dot com since 1999 WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
