[css-d] Call Button CSS not working in all browsers

2014-09-13 Thread Paul 
Hello everyone, I am relatively new to responsive design and css with
media queries and have used an online tool to generate my template and
then customized it as I went along to try and learn.  I seem to have it
working well as far as I can see without actually viewing on smart phones
but I cannot seem to get my call button to work in ff 32.0.1 or Chrome
37.02 but it works in Safari 5.1.7, IE 11 and Opera 12.16.  Not sure about
older browsers.

The code I used is this:
html - a href=tel:1-555-555-img class=call
src=images/callbutton.png alt=call button //a
css - .call {display:none;}
media query - /* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and
(orientation: landscape){.call {display:run-in; }}
and
/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {.call {display:run-in; }}

Site can be viewed temporarily at:
http://www.sportsmanfishing.com/webdev/index.html

Any help greatly appreciated!
Paul

__
css-discuss [css-d@lists.css-discuss.org]
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] Call Button CSS not working in all browsers

2014-09-13 Thread Tom Livingston 
Two things. You might want to check support for 'run-in'. Will
display:inline; work?

Also, those two MQs result in the same thing. Seems unnecessary to have
both.

On Saturday, September 13, 2014, Paul cssl...@bassonhook.com wrote:

 Hello everyone, I am relatively new to responsive design and css with
 media queries and have used an online tool to generate my template and
 then customized it as I went along to try and learn.  I seem to have it
 working well as far as I can see without actually viewing on smart phones
 but I cannot seem to get my call button to work in ff 32.0.1 or Chrome
 37.02 but it works in Safari 5.1.7, IE 11 and Opera 12.16.  Not sure about
 older browsers.

 The code I used is this:
 html - a href=tel:1-555-555-img class=call
 src=images/callbutton.png alt=call button //a
 css - .call {display:none;}
 media query - /* Phone Landscape (480px) */
 @media only screen and (min-width: 321px) and (max-width: 480px) and
 (orientation: landscape){.call {display:run-in; }}
 and
 /* Phone Portrait (320px) */
 @media only screen and (max-width: 320px) {.call {display:run-in; }}

 Site can be viewed temporarily at:
 http://www.sportsmanfishing.com/webdev/index.html

 Any help greatly appreciated!
 Paul

 __
 css-discuss [css-d@lists.css-discuss.org javascript:;]
 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/



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
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] Call Button CSS not working in all browsers

2014-09-13 Thread Tom Livingston 
Also, the button works on my iPhone 5s.

On Saturday, September 13, 2014, Paul cssl...@bassonhook.com wrote:

 Hello everyone, I am relatively new to responsive design and css with
 media queries and have used an online tool to generate my template and
 then customized it as I went along to try and learn.  I seem to have it
 working well as far as I can see without actually viewing on smart phones
 but I cannot seem to get my call button to work in ff 32.0.1 or Chrome
 37.02 but it works in Safari 5.1.7, IE 11 and Opera 12.16.  Not sure about
 older browsers.

 The code I used is this:
 html - a href=tel:1-555-555-img class=call
 src=images/callbutton.png alt=call button //a
 css - .call {display:none;}
 media query - /* Phone Landscape (480px) */
 @media only screen and (min-width: 321px) and (max-width: 480px) and
 (orientation: landscape){.call {display:run-in; }}
 and
 /* Phone Portrait (320px) */
 @media only screen and (max-width: 320px) {.call {display:run-in; }}

 Site can be viewed temporarily at:
 http://www.sportsmanfishing.com/webdev/index.html

 Any help greatly appreciated!
 Paul

 __
 css-discuss [css-d@lists.css-discuss.org javascript:;]
 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/



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
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] Call Button CSS not working in all browsers

2014-09-13 Thread Tom Livingston 
 On Saturday, September 13, 2014, Paul cssl...@bassonhook.com
 javascript:_e(%7B%7D,'cvml','cssl...@bassonhook.com'); wrote:

 Hello everyone, I am relatively new to responsive design and css with
 media queries and have used an online tool to generate my template and
 then customized it as I went along to try and learn.  I seem to have it
 working well as far as I can see without actually viewing on smart phones
 but I cannot seem to get my call button to work in ff 32.0.1 or Chrome
 37.02 but it works in Safari 5.1.7, IE 11 and Opera 12.16.  Not sure about
 older browsers.

 The code I used is this:
 html - a href=tel:1-555-555-img class=call
 src=images/callbutton.png alt=call button //a
 css - .call {display:none;}
 media query - /* Phone Landscape (480px) */
 @media only screen and (min-width: 321px) and (max-width: 480px) and
 (orientation: landscape){.call {display:run-in; }}
 and
 /* Phone Portrait (320px) */
 @media only screen and (max-width: 320px) {.call {display:run-in; }}

 Site can be viewed temporarily at:
 http://www.sportsmanfishing.com/webdev/index.html



I usually develop mobile first with all my base styles for phone width. My
first break point MQ is usually 'min-width: 30em' (480px).


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
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] Call Button CSS not working in all browsers

2014-09-13 Thread Paul 
Thanks for your quick reply Tom. The display:inline did the trick.  I was
under the impression that I needed a media query for anything below 321
which is why I left the second media query there. It was actually created
for me from the online tool I used to get started.  Maybe I'm
misunderstanding how the break points work. I am doing some more reading
on media queries as we speak.

On Sat, September 13, 2014 12:15 pm, Tom Livingston wrote:
 Two things. You might want to check support for 'run-in'. Will
 display:inline; work?


 Also, those two MQs result in the same thing. Seems unnecessary to have
 both.

 On Saturday, September 13, 2014, Paul cssl...@bassonhook.com wrote:


 Hello everyone, I am relatively new to responsive design and css with
 media queries and have used an online tool to generate my template and
 then customized it as I went along to try and learn.  I seem to have it
  working well as far as I can see without actually viewing on smart
 phones but I cannot seem to get my call button to work in ff 32.0.1 or
 Chrome
 37.02 but it works in Safari 5.1.7, IE 11 and Opera 12.16.  Not sure
 about older browsers.

 The code I used is this:
 html - a href=tel:1-555-555-img class=call
 src=images/callbutton.png alt=call button //a css - .call
 {display:none;}
 media query - /* Phone Landscape (480px) */ @media only screen and
 (min-width: 321px) and (max-width: 480px) and
 (orientation: landscape){.call {display:run-in; }}
 and /* Phone Portrait (320px) */
 @media only screen and (max-width: 320px) {.call {display:run-in; }}


 Site can be viewed temporarily at:
 http://www.sportsmanfishing.com/webdev/index.html


 Any help greatly appreciated!
 Paul


 __
 css-discuss [css-d@lists.css-discuss.org javascript:;]
 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/




 --


 Tom Livingston | Senior Front-End Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com




__
css-discuss [css-d@lists.css-discuss.org]
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] Call Button CSS not working in all browsers

2014-09-13 Thread Paul 
I remember reading that somewhere also so I will give a try on my next go.
 Should I be using em instead of px?


 Site can be viewed temporarily at:
 http://www.sportsmanfishing.com/webdev/index.html




 I usually develop mobile first with all my base styles for phone width.
 My
 first break point MQ is usually 'min-width: 30em' (480px).


 --


 Tom Livingston | Senior Front-End Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
 __
 css-discuss [css-d@lists.css-discuss.org]
 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-discuss [css-d@lists.css-discuss.org]
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] Call Button CSS not working in all browsers

2014-09-13 Thread Tom Livingston 
On Saturday, September 13, 2014, Paul cssl...@bassonhook.com wrote:

 I remember reading that somewhere also so I will give a try on my next go.
  Should I be using em instead of px?



 Brad Frost explains:

http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/#relative


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
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/