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
Related
Are there any lists of default CSS stylesheets for different browsers? (browser stylesheets in tabular form)
I want to know the default font of text areas across all browsers for future reference.
Not tabular, but the source CSS may be helpful if you're looking for something specific:
Firefox default HTML stylesheet
WebKit default HTML stylesheet
You're on your own with IE and Opera though.
I suspect this is something of a moving target for all the browsers, but there is a default style sheet for HTML 4 as defined by the W3C.
There probably is a list, this is why we use CSS Resets however.
Eric Meyer's Reset
Yahoo's Reset
CSS class have compiled a list of CSS2.1 User Agent Style Sheet Defaults. Some links at the bottom of that page as well.
You cannot possibly know all defaults for all configurations of all browsers into the future.
The way people get around this is to start their CSS by resetting everything to known values. Here's an example from one of the main CSS experts: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
There was some discussion and testing done on www-style not too long ago:
http://lists.w3.org/Archives/Public/www-style/2008Jul/0124.html
http://lists.w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.htm
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.
I'm working with a custom app that doesn't allow classes to be applied to the tag and the original CSS we were working with uses this methodology. Instead, the app requires an individual CSS file for each browser (lame, I know).
Our company has a sample page that has the working code applied with browser specific overrides placed on the HTML tag. So, what I'd like to do is load up the page in each version of IE and see what specific CSS is actually applied, then just upload each CSS file to the app. Does anyone know a tool that will do that?
Note, I did find this: How can I see which styles in my stylesheet are actually being applied to the current page?
But the answers were for firefox. :(
If you press F12 in Internet Explorer it will bring up Developer Tools.
From here you can inspect the HTML/CSS and see the specific CSS rules applied.
With these tools you can then change the browser mode Internet Explorer runs in e.g. If you are using IE9 you can set it to run in IE9 Compatibility Mode, IE9, IE8, IE7.
You can also change the document mode IE9 Standards, IE8 Standards, IE7 Standards and Quirks mode.
EDIT : You could try http://unused-css.com/
Where can I get the source for a browsers native/base stylesheet?
In particular the internet explorer ones.
Unlike Firefox and Chrome where you can see the standard styles that were applied to its elements indenpendentemente your own CSS, IE does not. The default styles are programmed into the engine itself, but are not treated as a style sheet that can be visualized.
You can get almost exact ones for different versions of Internet Explorer from here:
http://www.iecss.com/
You can pick from IE6 all the way up to IE9.
The same site also includes the user agent style sheets for some other common browsers, but it's reasonably easy to obtain them directly from these other browsers yourself.
There is a small problem here: if you want IE's default stylesheet to use on your page, you're probably doing something wrong.
Are there any lists of default CSS stylesheets for different browsers? (browser stylesheets in tabular form)
I want to know the default font of text areas across all browsers for future reference.
Not tabular, but the source CSS may be helpful if you're looking for something specific:
Firefox default HTML stylesheet
WebKit default HTML stylesheet
You're on your own with IE and Opera though.
I suspect this is something of a moving target for all the browsers, but there is a default style sheet for HTML 4 as defined by the W3C.
There probably is a list, this is why we use CSS Resets however.
Eric Meyer's Reset
Yahoo's Reset
CSS class have compiled a list of CSS2.1 User Agent Style Sheet Defaults. Some links at the bottom of that page as well.
You cannot possibly know all defaults for all configurations of all browsers into the future.
The way people get around this is to start their CSS by resetting everything to known values. Here's an example from one of the main CSS experts: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
There was some discussion and testing done on www-style not too long ago:
http://lists.w3.org/Archives/Public/www-style/2008Jul/0124.html
http://lists.w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.htm