Unable to return site IE8 - css

My site at http://arcrealtyco.com will not load in IE8. I have updated jQuery (1.9.1) and updated Modernizr (2.5.2) running on the site. It works fine in ie9 while using ie8 mode, but on ie8 it will not load. It appears the issue is with our CSS file.
Right now it is a 301k size file that has been concatenated from SCSS. I even tested a minified version that is 131k. nothing.
Any thoughts here?
Within the css file we have Bootstrap, Symbolset our global CSS and a few other things.

In your <footer>, you have a <br> inside of a <strong>. Try taking that <strong> away so it's just a <br> by itself. That made the crash go away for me. I used Windows 7 and the real Internet Explorer 8.

Related

Chrome & Firefox not rendering huge stylesheet (>200k characters) while Safari works fine

we're stuck at a strange behavior in a clients project:
We have many SCSS files resulting in a compiled CSS file of 240000 characters in size.
I was able to develop in Safari without a problem.
Then a colleague started working on the same project using Chrome - he got a completely unstyled page. In Firefox he got the same problem. I tried it with Chrome and Firefox on the Mac too, and yep - they both won't display the page anymore.
"Anymore" because it worked fine. The only thing that changed is the SASS compilation workflow to use the Wordpress Plugin "WP-SCSS" instead of Grunt.
Our new compiled CSS seems to be bigger than the previous one. Maybe the underlying Foundation framework was customized, so that it did not include that many rules. Anyway: more rules should not end up in a broken stylesheet like in IE some years ago. Therefore Safari (both v9.1 and "Safari Technology Preview") render fine.
Yes, all browsers are up to date.
Yes, all caches are cleared.
Has anyone an idea, a hint, or a guess?

CSS Loading in IE9 but not IE11 using IE9 emulation mode

I have a really strange issue that has me pulling my hair out. When I load a web page in IE9 the CSS renders perfectly fine. The page also renders fine in firefox and chrome.
However when I try to render the page in IE11 using a document mode of 9 several CSS files are not being applied. This is also the case if the document mode is 10 but it works fine using "Edge"
I have monitored the network traffic and can confirm that the CSS files are being pulled down.
Any ideas what might be causing this?
Eventually during a discussion with a colleague it was discovered that this issue was being caused by SharePoint and not IE11. The problem was that the file was UTF-8 encoded and needed to be ANSI encoded and subsequently was not being served correctly for whatever reason.
For me the answer was to add this with my existing conditional comments...
<!--[if !IE]><!--><script type="text/javascript">if(/*#cc_on!#*/false){document.documentElement.className += 'ie10';}</script><!--<![endif]-->
Why it only works when I add that I'm not sure, currently using a HTML5 doctype and no additional styling is given with the class ie10, it's literally there for feature detection purposes only.
I had tried giving the CSS a different encoding (ANSI & UTF-8) like other answers have said, also tried using a XHTML 4.0 doctype incase it was caused by the HTML5 doctype but nope.
Also ensured the IIS 7.0 server did accept the text/css MIME.

IE8 not applying CSS altough files are loaded and classes added to DOM objects

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!

my entire CSS dies in ie7 mode

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

IE Not Applying Styles

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.

Resources