I have a web page with a phone number being displayed in the page header. The font color for that section of the page is brown.
When the page is viewed on an iPad, the iPad (correctly) detects the text as a phone number and automagically converts the phone number text to a "contact link".
My problem is that I am unable to FORCE the link color to be brown - regardless of what I do in the CSS file (including "! important" after the color statement), the phone number is always being displayed in it's own self-appointed color!
Any clues on how to get my CSS declaration to win the war?
It seems like ipad wraps the number in an <a>. I just added an additional rule for this:
Before:
.phone { color:red; }
After:
.phone,
.phone a { color:red; }
Have a look on this page (format-detection) ;)
Try this, it worked for me (change the color code):
a.phone[href^=tel]:link { color:#9F6; }
<meta name = "format-detection" content = "telephone=no">
Works for me. Check this for more detail.
http://developer.apple.com/library/safari/#featuredarticles/iPhoneURLScheme_Reference/Articles/PhoneLinks.html
(360) 687<i>-</i>8936
I have a client who is a crazy person. He wants his phone number all over the website, and in only one place does it clash with the iphone/ipad auto-linking parser.
So, adding the i tag around the dash fooled iOS into seeing it not as a phone
Related
i navigated to the location of my mobile site while on my desktop. (ex. www.mysite.com/m/index.html). On my desktop the image appears exactly the way i want it to, on mobile it does not show at all. Can anyone here tell me the possibilities of why that might happen? Here is the css associated with the image.
#mlogo {
background-image: url(/m/mobileimages/mobilelogo.jpg);
background-size: 100% 100%;
background-position:top;
position: relative;
width:100%;
height:171px;
text-align:center;
}
ive tried on a galaxy 4 and an iphone 6 .... neither displayed the image.
try to check source code of your page goto view-source:www.mysite.com/m/index.html on your phone browser, if its displaying your source code correctly then try to navigate to your image url
My server was autofilling the link address since i used short hand in my coding. the code was incorrect because of this. if you ever run into this problem. use Divyanks method to check the link. if the link is invalid you must manually enter the correct link to your image (starting with http:// and so on) to avoid the server auto filling the link address incorrectly.
I am facing a problem related to css.My question is that I want to change background-color to black of any website page through url. I want this for study better to protect my eyes meanwhile I have eye problem. So what code to apply in the url to show the page black meanwhile we use this css rule like body {
background-color:#00000;} to output .I have attached two images for it to clear more better.Hope will get response as soon as possible.Thank you too much!
I think the best solution for you to it to take some of the recommendations above, and turn it into a bookmarket! That way, you can always click the button in your address bar and it will
1) Load jQuery if necessary
2) Change the background-color of <html> and <body> elements to black.
Here's a link to the JSFiddle. Drag the link to your bookmarks bar and watch the magic happen:
http://jsfiddle.net/lasha/GjQGZ/
No need for all the extra steps! :)
I would suggest you use some kind of glare reduction/warmer color software, like F.lux.
I use it and even with white backgrounds, my eyes don't get tired as much.
For SO site, where Jquery is used, you can type this in the console:
$('body').css('background-color', '#000');
And also you can change the text color to white:
$('body').css('color', '#fff');
If no Jquery is loaded, you can selet the body tag with document.getElementByTagName
you can't do it through a URL. However, since you're using firefox:
Alternatively, look in to a plugin like greasemonkey (or similar) and inject custom CSS styles on to the page you're viewing. Something like:
// ==UserScript==
// #name Readability Helper
// #description makes font more readable for custom viewing.
// #namespace CSS
// #include *
// #version 1.0
// ==/UserScript==
(function(w){
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "* {color:#fff !important;background-color:#fff !important";
w.document.body.appendChild(css);
})(unsafeWindow);
Brad already gave a good answer.
Alternatively you could use the Firefox add-on Color That Site!
The purpose of this Add-on is to let you easily change the colors of any web site you want. These color edits can be permanently saved and be im-/exported for sharing.
This can be done by applying some javascript to the site. After site is loaded, you can write in the address bar something like this:
javascript:document.body.style.backgroundColor = "#000";
Make sure to include 'javascript:' prefix part (if you copy/pasted it might happen that browser excluded it for security reasons).
This will work only locally, of-course!
UPDATE: If it happen for some reason this doesn't work in chrome, try to do it like this:
javascript:document.body.style.backgroundColor = "#000"; alert()
I didnt figure why or how but it works!
You cannot do such things with a URL (unless the server specified in the URL has special functionality for this).
You can use a user style sheet or browser add-on to impose your CSS rules. The ways to do such things depend on browser.
When using a user style sheet, you mostly need the !important specifier, since by default page (author) style sheet rules override use style sheet rules. Example:
body { background: black !important;
color: white !important; }
Note that this also overrides any background image that pages might set for body. And setting color whenever you set background is a good idea—you don’t want to see black on black, or even dark gray on black.
But it’s really more complicated. Any element can have a background (and content color) of its own. For example, if a page has <body><div id=content>...</div></body> and it sets background on that div, then you settings for body won’t have much effect.
At the extreme, you could replace body by * in the rule above, to make everything white on black, except those ingredients that are not under CSS control (like contents of images and possibly some form fields).
http://alleystoeden.org/testing3/index.html
in windows safari 5.1.7, the primary navigation, both regular and when hovered don't look right. in fact, when not hovering the main menu is practically unreadable it's so light. the drop down menu is fine and fonts there are rendering properly.
body text (visible on the contact form page) are also rendering correctly.
i've tested it on iphone and it is fine there.
is there some code i can add to this template to fix the windows safari font problem with just the primary menu?
i'm not sure what part of the code i would copy and paste to show what i'm currently using, but if you can tell me the name, i can copy and paste it here.
thanks so much
In your CSS file (styles.css, line 1197) you have the following declaration:
white .nav--primary > li > a {
color: #CCC;
}
Change this light grey to a darker colour and you should be fine.
HTML name#dmain.com works as normal in an MVC 3 View - except that the display is invisible - white text on a white background and if I mouse over it I see the e-mail address that's "displayed" isn't underlined.
So, I tried adapting George's answer at MailTo link in Razor to
`#helper EmailTextBox(string email, string title) {
#title
}
and
#EmailTextBox("name#domain.com", "name#domain.com") (both in a view)
and this also works - also generates an e-mail message with the e-mail address pre-populated like a normal HTML e-mail hyperlink - except that the display is still invisible - white text on a white background and if I mouse over it I see it also isn't underlined.
Applying a style to the containing tag doesn't work.
So, how can I apply a style to get the e-mail address to display (or is there perhaps some other method)?
Sounds like a css issue, try seeing what styles are applied to this tag (right click -> inspect element in Chrome, Firefox with the firebug extension, etc.)
You can always override the style being applied with something like
<style>
a {
color : black !important;
}
</style>
But it would be much better to find out what rule is causing the color in the first place.
EDIT
I have not worked with the razor view engine in MVC, always keep in mind that this is emitting html, anything you can do in html should be achivable. Make good use of Firebug or equivalent to view what html you are generating.
I would be very surprised if you could not do
`#helper EmailTextBox(string email, string title) {
<a class="email" href="mailto:#email">#title</a>
}
then
<style>
a.email {color:black;}
</style>
But it really sounds like you should make the rule turning links white much more narrow.
I am trying to print a PHP generated document in chrome, on the browser it looks fine Link to the page I want to print But my printer will not print any coloured backgrounds, can anyone offer any suggestions please? Can I do this with CSS?
You adjust in the browser, whether the background colors and images are printed. See your browsers printing options.
Google Chrome offers this feature starting from version 26 (march 2013).
Also starting from version 17, Chrome allows changing the background print behavior programmatically by using -webkit-print-color-adjust:exact; in the element CSS to print the background.
Gordon's answer is great, but for people whose CSS skills are rusty, here's a more complete example.
Put the following in your document's <head> section.
<style type="text/css">
#media print { body { -webkit-print-color-adjust: exact; } }
</style>
By the way, although Chrome/Chromium's print dialog now has a Background graphics checkbox, it only seems to work if you do not click Print using system dialog (observed with Chromium in Linux).
Chrome > Print (cmd P) > click More Settings > Options: check Background graphics