CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-9
amit
amit

Reputation: 10261

IE 9 ignoring CSS rules

I have this weird issue with IE9 where it is ignoring certain CSS rules on its own. Even IE8 loads it correctly. So does IE 10 and all the nicer browsers like FF and Chrome.

The css is being loaded with "text/css" MIME.

For example,

These rules are not being applied by IE9. I cannot find these rules in the developer toolbar CSS tab. 

.B2B .info_cart { display: block; clear: both !important; }
.B2B .info_cart .priceDetail { font: 14px/22px Arial,Helvetica,sans-serif; padding-left: 3px; }
.B2B .info_cart .priceInfo { bottom: 2px; font-size: 10px; line-height: 24px; margin: 0 0 0 2px; overflow: hidden; padding: 0; position: absolute; word-wrap: break-word; }
.B2B .info_cart .info_vat { font-size: 10px; float: right; margin-top: 7px; }

The relevant HTML: 

<div class="info_cart clearfix">
    <span class="spanBasketInfo"></span>
    <span class="cartValue"></span>
    <span class="cartShippingDetails"></span>
    <span class="info_vat">
        <span class="exc">exc. VAT</span>
        <a href="#">(change)</a>
    </span>
</div>

What could be wrong?

UPDATE This is the Doctype I am using, if it helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="sv" xmlns="http://www.w3.org/1999/xhtml" class=" js no-touch borderradius boxshadow textshadow opacity cssgradients csstransitions">

Upvotes: 7

Views: 6281

Answers (7)

amit
amit

Reputation: 10261

Finally got hold of the problem. IE cannot handle more than 4096 selectors in a stylesheet. Therefore it was ignoring all the style rules after it reached its limit of 4096 selectors.

After splitting the CSS file into two separate files, the problem was fixed.

Upvotes: 15

Mohit Kumar Gupta
Mohit Kumar Gupta

Reputation: 362

Please use this code 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!--[if lt IE 7]> <html class="no-js lt-ie10  lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html xml:lang="sv" xmlns="http://www.w3.org/1999/xhtml" class=" js no-touch borderradius boxshadow textshadow opacity cssgradients csstransitions"> <!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- start: Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- end: Mobile Specific -->

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

Upvotes: 0

code-sushi
code-sushi

Reputation: 719

The main issue here is that your doctype declaration does not support the use of a class designation on the HTML tag. I fleshed out the code you provided with proper head, body, etc. tags and ran through the W3C validator. Information returned:

Error Line 2, Column 64: there is no attribute "class"…="http://www.w3.org/1999/xhtml" class="js no-touch borderradius boxshadow text…

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

Regardless of this issue (though you should definitely address it), adding "overflow: hidden;" to your declaration for .B2B .info_cart should cause your styles to display in the developer console, under both "trace" and "computed" --

.B2B .info_cart { display: block; clear: both !important; overflow: hidden; }

Let me know how this works out for you. This is all I can do with what you have provided so far.

Upvotes: 0

Brian Wiltshire
Brian Wiltshire

Reputation: 447

Have you tried removing the .B2B from your CSS? That seems to be the problem by looking at your example..

So instead of this

.B2B .info_cart { display: block; clear: both !important; }

Try this

.info_cart { display: block; clear: both !important; }

Upvotes: 0

bboysupaman
bboysupaman

Reputation: 1334

Verify that IE is not running in compatibility mode. I had a similar issue once before that caused IE9 to render as if it was IE7. I turned off compatibility mode and all of my problems were solved! If that is the issue, you can force IE to render without compatibility mode using the following meta tag in your head (go ahead and put it in your head and see if it resolves the issue for you):

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Upvotes: 4

MarvinK
MarvinK

Reputation: 111

.B2B .info_cart .priceDetail { font: 14px/22px Arial,Helvetica,sans-serif; padding-left: 3px; }
.B2B .info_cart .priceInfo { bottom: 2px; font-size: 10px; line-height: 24px; margin: 0 0 0 2px; overflow: hidden; padding: 0; position: absolute; word-wrap: break-word; }

There is no HTML for this Rules. I Think this is because it's not showed. 

.B2B .info_cart .info_vat { font-size: 10px; float: right; margin-top: 7px; }

In this case it could be that you override this with another rule in the class exc

Upvotes: 0

15eme Doctor
15eme Doctor

Reputation: 375

first your doctype is not valid for HTML5

replace your existing doctype by this could help

<!doctype html>
< html lang="fr"> <--! fr if your text is in french "sv" if your text is in Swedish -->

then the CSS look valid but none of the css called can be applied because it is not in the excerpt of html that you have here.

Upvotes: 0

Related Questions