I have a problem with content from CSS on IE11.
.icon-ok:before{content:"\f113"}
IE11 is computing this to .icon-ok::before{content: normal}
I can see that there is .icon-ok::before{content: "\f113"} but it is crossed.
So I didn't get the right icons there. - Ofc it is working on all other browsers.
I thought that's because of the ::before pseudo-class, but it is computed by IE, in the source css file it is written as :before.
Can somebody tell me whats wrong there?
Edit:
I figured out that the IE is changing the icon-font id's.
When I use "\f118" in IE it is working properly there.
How can it be?
This can happen because different browsers needs different formats of the font.
So this isn't basically a CSS problem rather a problem which format of the font is used.
Related
I'm debugging a style problem in Internet Explorer 9.
It look's like ie9 doesn't apply all style rules defined in my css file. As I look in the network tab of Developer Tools, I see for example the '.mobileMenu' class present.
But the style is not applied to the element, if I use 'Inspect element', the browser simply doesn't know about any related style rules. A large portion of the css file (but not all of it) is simply ignored by ie9.
It works in Chrome, Firefox and IE 10. There are a couple of CSS validation errors, but none that look really troubling.
My guess, which is a guess, is that perhaps some stylesheet property (CSS3?) is causing ie9 to stop rendering and skip the rest of the file. Is that possible?
Anyone any experience?
Thanks !
In the end, it had nothing to do with CSS3.
Ie9 did stop rendering, not because of anything in the css file itself, but because the style sheet was to large..
According to Microsoft:
http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
We split the Style Sheet into two seperate files and the problem was resolved.
Some CSS3 properties are not accepted by IE9. See this page for which browsers support which properties.
If the CSS3 properties are not support by IE9, you can try using a plugin like:CSS3PIE
The css top or margin-top values in chrome is so different with firefox and opera,what should I do?
For example in chrome when I put (top:0px;) my menu is in its right place,but in firefox I have to put (top:-80px;).
What should I do?please help;Thanks in advance.
and also firebug doesn't have any errors.
Sorry I couldn't post a jsfiddle link because the site contains lots of pictures and I reaaly wanted to post pictures so that you can understand what I mean better,I tried but I needed 10 reputation but I have only 8.
You need to reset all the styling that a browser applies, then it will only apply your styling, instead of adding it's own aswell. To do this include a redet style sheet such as Normalize.css
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
It's bizarre.
This site works perfectly in all browsers but IE7. In ie7 NOTHING works. Most of the css just doesn't even render. IE8? Fine. Ie9 Perfect. Firefox and Chrome, of course.
Want to hear something weirder? this is a template site i have worked with before. Other sites built on essentially the same template DO work in ie7.
This is why i think whatever it is is simple.
I don't want to paste the code here - it's massive. But i'll give you a link to the site and to the css
site: http://canadianrecovery.ca
css http://canadianrecovery.ca/css/screen.css
Thing is, i have document standard set to ie9 It works fine in ie7 mode with doc standards set to ie9
But i have noticed that most IE browsers don't display default doc standards... this is obviously some sort of issue with IE itself. But it's frustrating.. most end users have no clue how to fix this.
Thanks in advance.
ella
I think I may have found the reason. In your body-style (line 13), you have the following:
font-family: "Times New Roman;
See that unclosed quote? Seems like Chrome, FF, IE9 etc can fix that error, whereas earlier versions of IE read the rest of the CSS as your font-family declaration.
Try Modernizr, it makes a lot of things possible in older/less compatible browsers without a lot of trouble. Try the development version to see if it can help you and compose your own production version targeting your specific needs to minimize the size (and speed) of the javascript library.
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Thanks everyone. I actually found a solution. Look for a js script called ie7.js and include it with conditional comments.. it solves a LOT of ie7 issues
Firefox does not seem to be completing every aspect of the stylesheet for the site (nsfw text) www.theshandy.com
Firefox seems to have implemented the body styling but none of the class or id styles. Every other browser seems to be having no trouble at all.
After doing some research I have tried fixing problems other people have found. The sheet is directly linked (not called by php). The type is definitely text/css. And I believe it has the correct utf-8 character set.
I am really at a loss.
Thank you very much.
EDIT SOLVED:
It was a rogue apostrophe in one of the early ID styles. Apparently chrome and safari will ignore is and firefox won't and it then refused to load the rest of the stylesheet (creating the idea that the body styles were loading but not others.
Thank you for trying to help!
Check your paths.. you might be using /css/style.css instead of css/style.css.
This could generate this problem.
Can you guys point out what I am doing wrong on with the navigation on this site? It works fine on webkit, but not firefox!
http://datatables.dyndns-web.com/
vs intended
The NAV-tag isn't a block-element by default in current versions of Presto, Trident and Gecko. Only WebKit has a default stylesheet for HTML5-elements included already. You should use a basic-/reset-CSS to format all HTML5-elements.
See: http://html5doctor.com/html-5-reset-stylesheet/
BTW, if someones asking for an image, you should upload an image of the desired result, not one of the broken view…