/    Sign up×
Community /Pin to ProfileBookmark

CSS, IE and external style sheets

Copy linkTweet thisAlerts:
Aug 14.2008

I’m working on a company page which, due to various decisions, is IE only. I’ve been developing the site using inline code, and then to migrate the code over the cross-page CSS and JS files.

I’ve got some VERY basic CSS that doesn’t seem to want to do this, and i have no idea why! Currently i have these 3 classes in an inline CSS block:

[CODE]
<style type=”text/css”>
/* Standard colours for statuses */
.approved {
color: green;
}
.unknown {
color: orange;
}
.declined {
color: red;
}
</style>[/CODE]

Very basic stuff, but on moving this to the global stylesheet and replacing with:
<link rel=”stylesheet” type=”text/css” href=”expenses.css” />

Suddenly all nicely coloured text blocks turn back to their default black! Why on earth does IE7 do this, and is this is a known bug with a known workaround?

The weird thing is that several styles from the included stylesheet are making it through, as you can clearly see page margins changing (as defined in the CSS).

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAAug 14.2008 — I would check to see if this is an inheritance issue; that these classes, although styled as above, are also inheriting another style (and if this style is later in the stylesheet, then that will be what is shown). Without your code, it's hard to deduce further.

KDLA
Copy linkTweet thisAlerts:
@AslateauthorAug 14.2008 — I would love to put my code, however this is an internal Microsoft SharePoint site and there's problems with linking to the site / source.

[CODE]
<head>
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D"/>
<!-- SNIP -->
<link rel="stylesheet" type="text/css" href="expenses.css" />
</head>
<body>
<!-- SNIP -->
<table style="font-size:8pt">
<tr><td class="approved">Approved</td>
[/CODE]

Doing a style trace using the IE toolbar reveals these are the font-related styles making their way down to my element. Without embedding the style on the page (and instead linking to the CSS sheet) the first match does not appear on the trace.

[CODE]
/* Matches for node: TD class=approved */
/* Rule 3 of embedded stylesheet */
.approved { COLOR: green}

/* Matches for node: TABLE */
/* Inline style */
{ FONT-SIZE: 8pt }

/* Matches for node: TD class=ms-propertysheet id=MSO_ContentTable */
/* Rule 398 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */
.ms-propertysheet {
FONT-SIZE: 0.7em;
COLOR: #4c4c4c;
FONT-FAMILY: verdana;
TEXT-ALIGN: left
}

/* Matches for node: BODY */
/* Rule 3 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */
BODY {
COLOR: #000000;
FONT-FAMILY: verdana,arial,helvetica,sans-serif;
BACKGROUND-COLOR: #ffffff
}
[/CODE]

Now because this is an MS SharePoint site, there is a lot of CSS, tables and nested elements, so i've chopped out anything that seems irrelevant as best i can. I have also tried this with the !important flag in the style-sheet, still nothing.
Copy linkTweet thisAlerts:
@KDLAAug 14.2008 — When you mentioned "microsoft", a bell rang ----- in the <head> section, do you link to any MS themes, schemas, or such?
Copy linkTweet thisAlerts:
@AslateauthorAug 14.2008 — Nothing that i can see that seems to do that, here's the snipped page head:

[code=html]<HEAD>
<!-- SNIPPED META -->
<title></title>

<!-- MS Auto-CSS / JS -->
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D"/>
<script type="text/javascript" language="javascript" src="/_layouts/1033/init.js?rev=ck%2BHdHQ8ABQHif7kr%2Bj7iQ%3D%3D"></script>
<script type="text/javascript" language="javascript" src="/_layouts/1033/core.js?rev=S5dt4K8TJGVTYU9HrW6enw%3D%3D" defer></script>
<script type="text/javascript" language="javascript" src="/_layouts/portal.js?rev=cRI8b5r5N%2BkLhIuWR03ICg%3D%3D"></script>
<script type="text/javascript" language="javascript" src="/_layouts/1033/ie55up.js?rev=Ni7%2Fj2ZV%2FzCvd09XYSSWvA%3D%3D"></script>
<script type="text/javascript" language="javascript" src="/_layouts/1033/search.js?rev=yqBjpvg%2Foi3KG5XVf%2FStmA%3D%3D" defer></script>
<-- MS auto - No idea about this -->
<link type="text/xml" rel="alternate" href="/sites/duck/Exp/aslater/_vti_bin/spsdisco.aspx" />

<!-- My CSS / JS -->
<script language="javascript" type="text/javascript" src="expenses.js"></script>
<script language="javascript" type="text/javascript" src="commonFunctions.js"></script>
<script language="javascript" type="text/javascript" src="sharePointSoap.js"></script>
<script language="javascript" type="text/javascript" src="expenses_form.js"></script>
<link type="text/css" href="expenses.css" rel="stylesheet" />

<style type="text/css">
<!-- MS Created inline CSS, all are class .zz1_ -->
</style>
</HEAD>[/code]

The style block at the end is auto-generated on the fly based on SharePoint menus, MS have named these in a nice, long and complicated manner to avoid collision.
Copy linkTweet thisAlerts:
@KDLAAug 14.2008 — &lt;link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D"/&gt;

You might look into this one, especially for "span" tags/styles. Microsoft is notorious for placing that type of styling in its dynamic (editor-created) applications. Look at your code blocks, too, to see if any <span> tags or additional classes have been added once the page is published. (You can have more than one class assigned to an element.)
Copy linkTweet thisAlerts:
@AslateauthorAug 14.2008 — I posted above the "Applied styles trace" from the IE Developer Toolbar, it lists all the CSS with comments on which file, rule and line are matched to an element.

The core.css shouldn't be overriding a CSS rule, applied to the lowest-level element (the TD tag) by a distinct class name from a file that's linked to after the core.css file should it?

I can't seem to find anything in core.css overriding mine, especially if i add !important to my rules.
Copy linkTweet thisAlerts:
@KDLAAug 15.2008 — I suggest you comment out the core.css and see if your text renders correctly; if it does, then you know that's the issue. It could be that this text is inheriting something totally unexpected (as to not in your applied styles trace).

I just know that when I work with the developers here, who rely heavily on MS Visual Studio, I find that MS programs attempt to style elements, often overriding my code. It takes a lot (or a little if I'm allowed to get rid of the MS stylesheet) to render things as conceived.

Lastly, I suggest you validate your code -- there could be an open tag somewhere, affecting inheritance.

Sorry I can't be more help -- it is really hard to diagnose a problem without seeing the "patient" ?. Good Luck - Sharepoint is a booger to work with; we have it here, and I can't say that I like it one bit.
Copy linkTweet thisAlerts:
@CentauriAug 15.2008 — Just wondering, you didn't happen to include the <style type="text/css"> part in your css file did you?
Copy linkTweet thisAlerts:
@AslateauthorAug 15.2008 — Sorry I can't be more help -- it is really hard to diagnose a problem without seeing the "patient" ?. Good Luck - Sharepoint is a booger to work with; we have it here, and I can't say that I like it one bit.[/QUOTE]

I'll keep delving, thanks for what you've tried. It's hard i agree, but that's often what comes with SharePoint boogery...
×

Success!

Help @Aslate spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...