I am compiling several stylesheets into one min stylesheet in a staging environment The styles are applied locally in IE where each stylesheet is separate, but they are not being applied in the staging environment in IE where the stylesheets are compiled into one min stylesheet. I have run the stylesheets through a CSS validator and have gone through each stylesheet and corrected any syntax errors that I found. I don't necessarily need to know how to solve the problem, I mainly want to know where the problem exists. The IE developer tools aren't giving me any feedback related to the problem of styles not being applied.
Here is a link to the login page in the staging environment: https://s-app.joinhere.com/manage/sessions/new. The styles are in the stylesheet, they just aren't being applied in IE. Here's a link to the compiled min stylesheet: https://staging.joinhere.com/assets/manage-d4f70cefc93b170b5f2a04509db697c8.css
Thanks!
I tried your page, and it works fine in Chrome. However it looks weird in IE9, as if the CSS styles are not being applied, just as you described. For example, the style body#manage-sessions #main_container #login_container is not getting applied. I looked at the css tab in the developer tools, and it turns out the style is not even there, which explains how it is not working. To find out why, I used the networks inspector from the developer tool and examined the response when IE9 is downloading the css, and the style body#manage-sessions #main_container #login_container is indeed in the response. This lead me to believe that there must be some limit on the max css file size for IE. It appears that this is indeed the case as described here. Apparently IE simply ignores additional styles if the css file gets past a certain size. So this explains why everything works when the css files are separate, and why things fall apart after you combine them. To solve the problem try splitting up your large css file into 2 or more smaller ones that fall under the IE limit, and see if this corrects the problem.
I'm not sure about your personal setup, however, anything < IE 10 can only handle 32 individual stylesheets, anything after will still show up in the Dev tools like its working but rest assured, the 33 stylesheet is committed to a life of silent failure.
Related
This is what I see on the inspector:
There's like a left highlight in two rules, which are the ones Firefox is making up,
if I look on the computed styles I see this:
And finally this is how the original CSS looks like:
So Firefox it's changing the position and width rules somehow.
Anyone can explain me why is this happening and how to avoid Firefox changing those rules?
(In Chrome, Safari works fine)
The "left highlight" is used to indicate a style rule that has been modified within the Developer Toolbar since the page loaded. Reloading the page and/or restarting the browser should repair the rules from your stylesheet.
If you're still encountering the issue after this "quick fix", my next advice is to search your stylesheet(s) for position: absolute, disable them one at a time, and re-test. It's very unlikely Firefox is changing your style rules on its own.
You might also find it easier to postpone minifying your CSS while you're debugging. That way you'll get more useful line numbers to reference vs. having every rule cited as being on master.css:1.
Finally, you might find it advantageous to use shallow selectors in your CSS rather than deeply nested selectors like the one you've shown. This will help avoid specificity conflicts, which was likely the original cause of the issue you're encountering.
I got a problem on my Website http://achensee.info/ when loading in IE7.
At first, everything works perfect, and you can see the correct styles for the header and some HTML elements. However, after the main stylesheet and a little time later, IE7 strips all styles from the Website and displays it without CSS.
So, the files are loaded, but applied. Is this a common problem, or is there a way to fix this?
Could it be that too many styles cause the IE7 to crash the CSS view?
Thanks for your help and greetings from Austria :)
The problem is your call to the ie8.js file. It uses an AJAX call to your CSS files to reapply all styles, but its probably broken (as it never got past beta stage and was last touched in April of 2010).
I'm having some trouble with our precious Internet Explorer 8. We are working on a CMS for hotels and everything was just fine until awhile back, when IE8 stopped rendering the frontend properly. This is the public website demo and the top navigation as well as the menustrip are messed up in IE8. Same with the "Payment methods" in the right side of the footer, where small icons for accepted payment methods should have been shown.
The thing is, we do have a special CSS file dealing with IE issues and it's loaded on the website, but it's not being applied to elements by IE. Also, on my local machine other CSS files (not conditional) are being loaded in IE, but the browser doesn't apply the styles.
It's like this:
the CSS file is loaded
the classes are applied to the tags
but the styles are not applied to those classes (!)
Now this behaviour happens on some pages and doesn't happen on others (very few). For example, on this page the menustrip is ok. I read about similar issues in IE isn't rendering the CSS and js dom injected elements don't pick up CSS styling in IE. The thing is this behaviour has been reproduced on other PC's in the office, as well as at home. I'm quite baffled by this.
Has anyone else experienced similar issues? If so, did you fix it? How did you manage to fix it? Thanks to all!
The site I am currently working on is http://rattscallion.com/ I am focusing my efforts on getting the site to look proper in IE.
I was having trouble getting the frame on the pages (look at /murals.html for the page I'm working on first). IE9 said that the inline-style stated that the background-image was "none," so it crossed out the original background image. I figured it might be getting this from somewhere on the main stylesheet so what I did was make a new frame that only exists in IE and style it only in the IE stylesheet. Unfortunately this also doesn't work...it still says that an inline-style is setting the background-image to "none", but there is no such thing!
I double-checked and this is happening in IE9 standards mode. So why is this happening? Can anyone help figure out how to "force" it over what IE perceives as the inline style?
Well there's your problem:
CSS was ignored due to mime type mismatch
normalize.css
If you check the network calls the normalize.css is received as text/plain instead of text/css. You should install static content (under server roles) in your IIS as for some weird reason it's not installed by default. I'm betting one WHOLE dollar you're using IIS.
You could have just copy pasted the normalize.css into a server side css file so it's not accessed remotely.
I got it working by doing the following:
remove #framePos img{ display: none; } from styles-ie.css
remove unitpngfix.js - the png filter fix was for ie6 and serves no purpose on ie9 (it's actually one of the reasons the frame does not show)
Note: the frame.png pic is place in lots'o'places as background so you should consider a little clean up of the css files
Another Note: unitpngfix.js replaces the frame.png with the clear.gif and places transparency filters on every png element. So tinkering on css will not do anything until you remove the js.
what happens to them? are they loaded by the browsers?
should I split my CSS files into more stylesheets, so only images the css/images that are used are loaded on the page?
Seeing as people are saying the same thing I said in my comment I guess I should have added it as an answer.
I was going to recommend firebug, but I believe the images are not downloaded until you reference them in the html. You can confirm this using chrome or ie or firebug developer tools. as far as splitting the css, I would only do so if you have an excessively large css file, or you need to split it up for different css files for browser capability i.e. you have styles that are ie7 or ie 8 specific
Browsers will only download images that are actually used on the page. So images that are specified in CSS as background images will not be downloaded unless that CSS rule is applied on the page.
You can use Firebug or other similar programs to see what is loaded by the browser; however, I believe the answer is that since the DOM element is never created, the image is never requested from the server. No bandwidth or loading time is wasted (other than a few more bytes of CSS, but that shouldn't be too much overhead.)