CODEWITHSUNDEEP
cssinternet-explorer-7ie-developer-tools
monalisa717
monalisa717

Reputation: 3417

Why won't IE7 recognize class calls to an external stylesheet, but will recognize inline styling?

When using IE8 to view IE7 through the developer tool's browser mode feature, I am having an odd recurring problem with CSS. When I make changes to an external stylesheet and then reference that class in the HTML, it's like IE7 won't recognize it at all. If, however, I put that same styling inline, IE7 will obey it. Has anyone heard of this before? Here's a simple example to help illustrate what I'm saying:

External stylesheet:

.bold {
    font-weight:bold;
}

Call in HTML:

<p class="bold">My paragraph here</p>

No changes will be effective in IE7, although all other browsers are fine.

If however, I do this:

<p style="font-weight:bold;">My paragraph here</p>

IE7 seems happy. What's the difference? Do I really have to make CSS changes this way, or is there another workaround?

I'm baffled as to what the issue could be. I don't know if the developer tool's browser mode has a quirk and doesn't quite work as a real-life version of IE7 would, or if this is something completely different. I am using IE8 (I can't upgrade to IE9 at this government computer), but I've heard the problem persists with my changes in IE9's browser mode of IE7 too.

We're using ColdFusion to generate the HTML, using an HTML5 doctype (), and I've added a timestamp parameter to the 2 external stylesheet references so the browser is forced to grab a new copy every time.

Any help with this mystery would be hugely appreciated - thank you!

====== For @Stano or anyone else who is interested in recreating the exact problem, here is a stripped down version of it: https://docs.google.com/open?id=0B02DZPpIlMwGSk1VZHRDUHNCTkU (Can click File > Download to get the zip). Notice in IE7, "Photographer" is fine because it has inline styling, but the others aren't picking up anything.

Upvotes: 4

Views: 775

Answers (1)

Zachary Kniebel
Zachary Kniebel

Reputation: 4774

With regards to your comments, you're right in saying that it could be a caching issue, but it could also be an issue with that stylesheet (though it doesn't look like that's the case), another stylesheet, or invalid HTML.

One of the things that I want to correct you on, because I think it may influence your understanding of how CSS and HTML interact, is that class attributes in HTML elements do not call CSS. Rather, CSS rules tell the browser agent how to render things with certain attributes. This is why we are able to use the elements ID, name, groupname, class, and other values to identify which elements to apply which class to.

I mention this because if you have invalid HTML (a missing end tag, a missing arrow, etc.) it can do all sorts of weird things. A few days ago it helped me solve an issue where a misplaced tag was actually causing a script of mine to loop on one of my pages.

Take a quick second and validate your HTML using the W3C Markup Validator.

Upvotes: 1

Related Questions