[css-d] Call Button CSS not working in all browsers
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
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
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
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
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
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
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/
[css-d] Script Changing CSS Font BG
There is a jQuery load() command that is changing my font and pages background when the event is triggered. I know this issue is not completely CSS related, I want to know if this is a DOM issue, it doesn't seem to be, because the script loads after the DOM has completed ? __ 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] Script Changing CSS Font BG
Can you elaborate on what you want/expect to happen? Sounds like a jsfiddle.net example or some code might be necessary to help. If you don't want it to happen, it *sounds* like a JavaScript/jQuery issue. If you want it to happen but you're getting the wrong styles, it *could* be a CSS issue. Chris On Sep 13, 2014 8:36 PM, Crest Christopher crestchristop...@gmail.com wrote: There is a jQuery load() command that is changing my font and pages background when the event is triggered. I know this issue is not completely CSS related, I want to know if this is a DOM issue, it doesn't seem to be, because the script loads after the DOM has completed ? __ 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] Script Changing CSS Font BG
On Sep 13, 2014, at 7:42 PM, Chris Rockwell ch...@chrisrockwell.com wrote: Can you elaborate on what you want/expect to happen? Sounds like a jsfiddle.net example or some code might be necessary to help. If you don't want it to happen, it *sounds* like a JavaScript/jQuery issue. If you want it to happen but you're getting the wrong styles, it *could* be a CSS issue. Chris On Sep 13, 2014 8:36 PM, Crest Christopher crestchristop...@gmail.com wrote: There is a jQuery load() command that is changing my font and pages background when the event is triggered. I know this issue is not completely CSS related, I want to know if this is a DOM issue, it doesn't seem to be, because the script loads after the DOM has completed ? If you want the jQuery to happen after load, put it in a $(document).ready(); If you need any jQuery help, hit me off list. Be more then happy to see if I can help. Best, Karl DeSaulniers Design Drumm http://designdrumm.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] Script Changing CSS Font BG
Hi, thank you for your help. If you don't mind visiting this page, followed by clicking on the word tutorials. There are two issues, first being the background the font size change, there is actually three issues, those are the first two, the third is the page that is loaded via jQuery should scroll but is being cut-off, even though I have overflow enabled. Thank You Karl DeSaulniers wrote: On Sep 13, 2014, at 7:42 PM, Chris Rockwellch...@chrisrockwell.com wrote: Can you elaborate on what you want/expect to happen? Sounds like a jsfiddle.net example or some code might be necessary to help. If you don't want it to happen, it *sounds* like a JavaScript/jQuery issue. If you want it to happen but you're getting the wrong styles, it *could* be a CSS issue. Chris On Sep 13, 2014 8:36 PM, Crest Christophercrestchristop...@gmail.com wrote: There is a jQuery load() command that is changing my font and pages background when the event is triggered. I know this issue is not completely CSS related, I want to know if this is a DOM issue, it doesn't seem to be, because the script loads after the DOM has completed ? If you want the jQuery to happen after load, put it in a $(document).ready(); If you need any jQuery help, hit me off list. Be more then happy to see if I can help. Best, Karl DeSaulniers Design Drumm http://designdrumm.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] Script Changing CSS Font BG
Hey Chris - there is no link in your email. Chris Chris Rockwell On Sat, Sep 13, 2014 at 9:06 PM, Crest Christopher crestchristop...@gmail.com wrote: Hi, thank you for your help. If you don't mind visiting this page, followed by clicking on the word tutorials. There are two issues, first being the background the font size change, there is actually three issues, those are the first two, the third is the page that is loaded via jQuery should scroll but is being cut-off, even though I have overflow enabled. Thank You Karl DeSaulniers wrote: On Sep 13, 2014, at 7:42 PM, Chris Rockwellch...@chrisrockwell.com wrote: Can you elaborate on what you want/expect to happen? Sounds like a jsfiddle.net example or some code might be necessary to help. If you don't want it to happen, it *sounds* like a JavaScript/jQuery issue. If you want it to happen but you're getting the wrong styles, it *could* be a CSS issue. Chris On Sep 13, 2014 8:36 PM, Crest Christophercrestchristop...@gmail.com wrote: There is a jQuery load() command that is changing my font and pages background when the event is triggered. I know this issue is not completely CSS related, I want to know if this is a DOM issue, it doesn't seem to be, because the script loads after the DOM has completed ? If you want the jQuery to happen after load, put it in a $(document).ready(); If you need any jQuery help, hit me off list. Be more then happy to see if I can help. Best, Karl DeSaulniers Design Drumm http://designdrumm.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/ __ 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] Script Changing CSS Font BG
Hey Chris, Are you familiar with developer tools at all? If you're using Chrome, right click on the page and in your context menu choose Inspect Element. A pane should open that shows HTML; hit the Escape Key (esc) and then click on tutorials - you'll see that you're getting several 404 errors. Addressing those errors may help you track down the problem - I'm still unsure what you're going for here though. Also, when you click on Reach Me you'll notice that you get undefined is not a function. Without digging in, I'm going to guess that you're not pulling in the jQuery library that defines 'easeInOutBounce' - you'll want to track down that error as well. You should definitely take the time to get familiar with developer tools in your browser of choice. Without knowing more, I do think you're dealing with a JavaScript issue rather than a CSS one. Hope it helps, Chris Chris Rockwell On Sat, Sep 13, 2014 at 9:50 PM, Crest Christopher crestchristop...@gmail.com wrote: Sorry ! [Link http://www.thecreativesheep.ca/webdesignprojects/largeprojects/CreativeSheep/cs_site.html ] Chris Rockwell wrote: Hey Chris - there is no link in your email. Chris Chris Rockwell On Sat, Sep 13, 2014 at 9:06 PM, Crest Christopher crestchristop...@gmail.com wrote: Hi, thank you for your help. If you don't mind visiting this page, followed by clicking on the word tutorials. There are two issues, first being the background the font size change, there is actually three issues, those are the first two, the third is the page that is loaded via jQuery should scroll but is being cut-off, even though I have overflow enabled. Thank You Karl DeSaulniers wrote: On Sep 13, 2014, at 7:42 PM, Chris Rockwellch...@chrisrockwell.com wrote: Can you elaborate on what you want/expect to happen? Sounds like a jsfiddle.net example or some code might be necessary to help. If you don't want it to happen, it *sounds* like a JavaScript/jQuery issue. If you want it to happen but you're getting the wrong styles, it *could* be a CSS issue. Chris On Sep 13, 2014 8:36 PM, Crest Christophercrestchristop...@gmail.com wrote: There is a jQuery load() command that is changing my font and pages background when the event is triggered. I know this issue is not completely CSS related, I want to know if this is a DOM issue, it doesn't seem to be, because the script loads after the DOM has completed ? If you want the jQuery to happen after load, put it in a $(document).ready(); If you need any jQuery help, hit me off list. Be more then happy to see if I can help. Best, Karl DeSaulniers Design Drumm http://designdrumm.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/ __ 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/
