I'm having a strange issue with an icon font misbehaving in IE... specifically, it seems that the browser is showing the icon associated with the lower-case character instead of the upper-case character. The characters in question are being specified in CSS using the content property of :before selectors.
For example, if we have CSS like:
.icon-1:before {
content: 'o';
}
.icon-2:before {
content: 'O';
}
and HTML like:
<div class='icon-2'></div>
we see the icon-1 icon instead of the icon-2 icon.
Does anyone have any suggestions as to how this could be happening? The icon font behaves correctly in other browsers, and even works correctly in my VM version of IE. I was only able to reproduce this using a colleague's Windows laptop.
Edit: This is happening on IE11, Windows 8.1.
Edit 2: Just found this, which may explain the behavior:
http://www.browserquirks.org/blog/2014/04/02/css-content-rule-is-not-case-sensitive-in-ie8-plus/
Apparently when IE looks at CSS it ignores the casing. You can however add a text-transform property to fix the issue.
.icon-1:before {
content: 'o';
}
.icon-2:before {
content: 'O';
text-transform: uppercase;
}
That should make the second one be uppercase and appear correctly on each browser.
Related
Back arrow hyperlink's image is rendering properly in chrome but not in internet explorer 11, however I am able to click on it, even from ie (mouse cursor is changing from arrow to hand, when I move the cursor to its respected position in ie11).
Below is my html code --
Below is my css code --
.backlink {
content: url(back/back.png);
padding-right: 5px;
vertical-align: middle;
}
In chrome back.png is displaying like below --
Please help!!
Using content: on regular elements is not yet fully supported.
content: is intended for use with pseudo element, such as before, and after.
Chrome, has likely started to implement some of the CSS working draft (where it has been suggested that content work on 'regular' elements too.
I am trying to replicate a bug on IOS 8.3 where I select a checkbox and the colour of my arrow is meant to be green but it is black instead.
Is this an IOS bug fix for this or is this something that it does not support?
here is my SASS/css:
input[type="checkbox"] + .field-label-replaced {
&:before {
background-color: $C-Bg-Field;
border: 1px solid $C-Border; // Use px value to cope with field edges disappearing when zooming out
box-sizing: border-box;
color: $GIP-OxfamGreen;
content: '';
height: $D-FieldElement;
text-align: center;
width: $D-FieldElement;
}
}
input[type="checkbox"]:checked + .field-label-replaced {
&:before {
color: $GIP-OxfamGreen;
content: '\2714';
}
}
If you want to test it yourself I have a codepen account that shows the issue.
http://codepen.io/mattclaffey/pen/EjNwRw
Unicode characters are a bit interesting in that they are displayed differently by different things. Sometimes, they can also be displayed as a full-color symbol, rather than with a single tone, which means it can no longer be affected by CSS color rules.
Take this as an example:
http://jsfiddle.net/f4joLkmg/
In chrome and safari, the symbol is displayed as a purple umbrella with blue rain droplets, but in firefox, it is a single tone graphic, so it adopts the red style that was applied to it.
I don't have an IOS 8.3 device (as was mentioned in the comments to be where the issue was seen) so I can't test out how a checkmark symbol is displayed there, but I would assume that that OS version simply chooses to display that symbol with a specific color set, which means it can no longer be controlled by the text color.
So how do you get around it? Well, you mentioned Font Awesome in your question title, but aren't actually using it here. If you've already got Font Awesome loaded up, you might as well just use that:
&:before {
font-family: FontAwesome;
color: $GIP-OxfamGreen;
content: '\f00c';
}
If you don't have Font Awesome already in use in your project.. well you still might want to consider using it, or something similar instead of unicode symbols. An actual icon font will always give you better results in terms of consistency, and most of the time the symbols look a little nicer as well.
I want to add Unicode icons to a website, and only unicode -No custom font files.
I know I can do something like:
[class^=icon-facebook]:before {
content: "\00066";
}
[class^=icon-twitter]:before {
content: "\01F426";
}
[class^=icon-phone]:before {
content: "\01F4DE";
}
[class^=icon-fax]:before {
content: "\01F4E0";
}
[class^=icon-email]:before {
content: "\01F4E7";
}
[class^=icon-link]:before {
content: "\01F517";
}
[class^=icon-pay]:before {
content: "\01F4B8";
}
[class^=icon-dollar]:before {
content: "\01F4B5";
}
[class^=icon-yen]:before {
content: "\01F4B4";
}
[class^=icon-save]:before {
content: "\01F4B0";
}
jsFiddle
However, I am reading that some browsers won't render the "icon" (Unicode character) properly. Sometimes browsers would display an empty square instead of the Unicode character.
How can I code my CSS to prevent that from happening?
No custom fonts
No images
i understand that you dont want to make an "extra" call for a font download or image download. if you insist on keeping it all in the CSS you could try Base64 for example:
<style type="text/css">
div.image {
width: 14px;
height: 14px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGMjdBMjVGOTU2NTAxMUUyOUFBN0EzOUYwOEVBMkQ1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGMjdBMjVGQTU2NTAxMUUyOUFBN0EzOUYwOEVBMkQ1MCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkYyN0EyNUY3NTY1MDExRTI5QUE3QTM5RjA4RUEyRDUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkYyN0EyNUY4NTY1MDExRTI5QUE3QTM5RjA4RUEyRDUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+AND5IAAAAHBJREFUeNpi/P//P4OJiQkDGmAG4r9AzATl/4Oy/zHgAWfOnIFrOAjE/5HwHyj9F4r/I9G48CEGJBdQA4AMZWCBcuypZSo1XUhbAw8SCHBi8EFkA/9TwXH/kCPFYeRFygEqRMoBmuQURlDhQE0AEGAA1LJE38CAHLYAAAAASUVORK5CYII=');
}
</style>
This will place the hamburger menu icon.
Here is a working example: Demo
It will surely look exactly the same in all browser because it is an image and not a font.
you can make any png image into this here:
PNG to Base64
Good luck :)
However, I am reading that some browsers won't render the "icon"
(Unicode character) properly. Sometimes browsers would display an
empty square instead of the Unicode character.
How can I code my CSS to prevent that from happening?
I am not sure if you are meaning that you want to prevent rendering the empty square only or you want the font to be the same for all browser.
If you mean you want the font to be the same for all browser, and don't want to include any font file or image file, all you can do is choose a font that is supported by all browser and test if they are shown correctly.
Here is a tool that you may try for testing your icon on every possible browser:
https://spoon.net/browsers
Or if you just want to know if the character is correctly shown and in case not you want to handle the error by another way, here is a way that you may find useful.
https://stackoverflow.com/a/1912045/1273587
If a browser supports Unicode at all, it will support all character codes. But not all fonts will have character glyphs for all Unicode characters.
So, to get support for the characters that you want, you would need to use a font (in your case, the web safe ones) that has those characters, in formats used by all different operating systems.
till today there is no single web-browser is built which will comply all the standards and meet all our technical and design requirements.
Every browser has it's own capabilities and limitations. That's why, we developers try to understand those limitations and come out with alternate solutions so that our applications work as seamlessly and as perfect as possible in all the browsers and in all versions. Writing the cross-browser compatible code is an skill/art.
The day when all browsers gets standardised and follow the same rule, then the life of webdevelopers(specially HTML CSS Developers) will be very easy and may not have much work/challenges too !! ;-)
What you are trying to achieve is very optimistic solution but in reality it is just not possible. It's hard truth but you have to digest it and should focus on other ways as how to achieve your goals with the available alternate solutions (Which you already know)
I'd like to include a down triangle in my CSS dropdown menu. It works correctly in every browser, except for IE9.
In normal browsers (Firefox, Opera, Chrome, etc.) it looks like this way:
However in IE9 it shows up like this:
The CSS code:
.parent-down > em:after,
.parent-down > a > em:after {
content: "\25be";
}
Any idea what can be the problem and how could I fix it?
You need to declare the font family for the (pseudo-)element containing the special character so that you use only fonts that are known to contain that character. For example, add the following rule into your declaration:
font-family: Arial Unicode MS, Lucida Sans Unicode, sans-serif;
When you declare Helvetica, as you say (in a comment) you do, Windows treats it as Arial by its own special internal rules (if Helvetica is not available, and it usually isn’t). Since Arial does not contain the character, the browser should check the different fonts in the system in some order set by its settings to find one that contain the character. Browsers may fail in doing so, and IE often does.
In this case, it is probably better to use another, more visible character, which happens to have better font coverage. The basic principle is still that special characters need special attention when declaring fonts. For generalities on this, see my Guide to using special characters in HTML.
I came to the solution by accident.
However IE9 doesn't show the "\25be" (▾) character, it shows the "\25bc" (▼).
It's the same down triangle, however somewhat bigger. So now I use this one and change its size with CSS, so it looks identical with the original version.
Don't ask why, IE9 is quite strange.
My new code:
.parent-down > em:after,
.parent-down > a > em:after {
content: "\25bc";
font-size: 8px;
vertical-align: 2px;
margin-left: 2px;
}
There is a bug in IE9 that causes the font of a container to be set to the font of the first element of that container. Try to set a :before selector like this:
.parent-down >em:before,
.parent-down> a > em:before {
content: '';
}
This will force IE9 to recognize that the font assigned to the container is the font meant to be used
See this site, which describes a similar issue and gives this workaround, which solved this very tricky problem for me.
I'm working on a site and I have some problems that I hope you guys can help me with :)
If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.
In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.
Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:
This is my project.
I hope some one can help me out with this.
If you have something I better I can do, I will be glad to hear that too :)
Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.
Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.
You can put the code below in your css to target Firefox and bring the outline back in:
#-moz-document url-prefix() {
#content{
outline-offset: -11px;
}
}
Live example: http://jsfiddle.net/tw16/n8bet/
#1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers
#2: remove this line from #content css:
outline: 1px solid #B9BDBE;