In order to fix accessibility problems with headline hierarchy required for section 508 (Requirement 1194.22 (d)), I need to rewrite headlines hierarchy with JS.
Problem is that HTML is already built and that back-end technologies cannot be used to reorder those headlines. We have a situation that some headlines are of lower order than they are supposed to be, so they appear in this order, for example:
H1
H2
H4
H4
H4
H1
H3
H4
H4
H5
H2
H4
This should be converted to
H1
H2
H3
H3
H3
H1
H2
H3
H3
H4
H2
H3
How do I accomplish this?
You might not have to do anything. There is nothing in 1194.22 that says the order of the headings must be sequential, although that is certainly the preference.
(Note that Section 508 was updated a couple years back so that it follows WCAG 2.0 so referring to 1194.22(d) is old school and instead you should refer to WCAG 2.0. In this particular case, success criteria 1.3.1 talks about headings.)
It can be perfectly valid to have an <H4> nested under a <H2>. Your tool cannot make the decision on whether the hierarchy is correct. A human must do that.
When incorporating third party libraries, having bad heading hierarchy is a quite common problem, but in fact the main problem is that in many cases those heading should not exist. Getting rid of them should be considered before applying the following script which does the intended job.
This javascript uses jQuery but can be adapted in vanilla-javascript. It parses the page for standard headings (h1 to h6) and changes the level to the appropriate expected level at the rank considering its parent one.
The difficulty of this kind of scripts is that in your example, fixing the heading hierarchy just by changing the first h4 to a h3 for instance might work on paper but is not a reliable solution.
$(document).ready(function() {
var level=0, plevel=[0];
$("h1,h2,h3,h4,h5,h5").each(function() {
var c_level=$(this)[0].tagName.substr(1);
var p_level=plevel[plevel.length-1];
while (c_level<p_level) {
plevel.pop();
level--;
p_level=plevel[plevel.length-1];
}
if (c_level>p_level) {
level++;
plevel.push(c_level);
}
if (c_level!=level) {
$(this).replaceWith("<h"+(level)+">"+$(this).html()+"</h"+(level)+">");
}
});
});
Related
I've created a website: www.mvscaccounting.com and at the bottom of the website I have a search engine made from javascript. Beside it, I wanted to write all rights reserved. However whenever I write anything beside the search engine in dreamweaver, it turns bold!
Problem: I can't get it to unbold! it's not bold in dreamweaver, but on website it is
I tested it out, and the unintentional bold text starts when the javascript form is made. If you go to my website, and view page source you can see all the surrounding code.
**** UPDATE: THE PROBLEM HAS BEEN SOLVED, IT WAS A MISPLACED H3 TAG ****
It's bold because it is inside an <h3> element, which is rendered with bold text as defined by the default stylesheet for HTML.
Here's a snapshot of the document in Chrome:
There are several ways to override this. Try adding this to your stylesheet:
.red { font-weight: normal; }
This will cause all elements that are marked with class="red" to use the normal font-weight, even though they're embedded in an element that should be rendered in bold (like <h3>).
You could try adding this rule to the "red" class.
font-weight: initial;
If web designer has a full control over the entire code, it is easy to use browser default font - just don't change any font style and you got it.
However if there is not a full control over it and for example there is some font-related style defined on html or body element, or font-related CSS style for * { ... }, then there is a need to redefine font style to not inherit modified styling.
Is there any way, CSS, pure JavaScript or jQuery solution that would allow explicitly set browser default font for specific element?
Unfortunately, there is no simple "initial value" for font-family. It is, as you know, user-agent dependent.
Perhaps the closest you can come is by using a font keyword. font-family:serif; will use whatever the browser considers to be the default serif font. font-family:sans-serif; is the same, for sans-serif.
This is the closest I can suggest, sorry!
Yes. Do
.my-selector {
font: initial;
}
Well, I understand your requirement sounds simple but UNFORTUNATELY this is just a limitation of web technologies. We can not read browser's / system's font using either CSS or jQuery in any way.
The fonts rendered either by browser or system can not be read by web application. It is not designed that way. All we can do is apply font-family:serif or something similar to that.
I tried couple of POC for you but I could not retrieve the browser default settings.
All we can do is create a new ticket in W3C for font-family reset and let's keep hoping that they include something like that in future..
I would still do some digging for you and get back to you if I find something. This definitely is one very important requirement..
I dealt with such situations before but the other way. Just like overriding with the required font.. That's it!
However,
There is an alternative for this. I won't say it is the best way but we can try this :
Prpeare a JavaScript that reads the user agent, something like this..
var setDefaultFont = {
Android: function () {
$('*').css( "font-family", "//FONT USED IN ANDROID BROWSERS" );
},
BlackBerry: function () {
$('*').css( "font-family", "//FONT USED IN BLACKBERRY BROWSERS" );
},
iOS: function () {
$('*').css( "font-family", "//FONT USED IN iOS BROWSERS" );
},
Opera: function () {
$('*').css( "font-family", "//FONT USED IN OPERA BROWSERS" );
},
Windows: function () {
$('*').css( "font-family", "//FONT USED IN WINDOWS BROWSERS" );
}
};
We can be specific to Windows browsers if we need..
I know this is not the best solution but it should work
This has already been answered, but I found a solution that may be helpful:
*, html, body {
font-family: inherit !important;
}
This tells the root elements of the HTML document to inherit their font from the parent. In this case, the parent would be the browser's user agent styles, so your fonts will inherit from the default.
I've been coming across your questions on a somewhat regular basis it seems, and they appear largely theoretical cases. In any case, the others have more or less pointed you in the right direction, but I'm going to sound off just to re-enforce some points.
Explicit Means
There is no existing built-in functionality in Javascript nor CSS to explicitly assign the browser default font. This is outright impossible with the present CSS specification, however, you could, theoretically, utilize Javascript to get the name of the font for explicit use. I will not attempt to write the Javascript code because I predict it would be time consuming to accurately portray, but I will at least try to provide light on how it may be possible. Additionally, I under no circumstances am implying the following idea will work, but I believe it could work.
Conceptual Structure
I'd suggest the following:
Create 5 span nodes as following:
<span style="font-family: monospace;">Monospace Text</span>
<span style="font-family: sans-serif;">Sans-Serif Text</span>
<span style="font-family: serif;">Serif Text</span>
<span style="font-family: fantasy;">Fantasy Text</span>
<span style="font-family: cursive;">Cursive Text</span>
The five generic font families are the browser defaults, however this does not immediately resolve your question because a) it does not give us an explicit font-name that a person is using and b) the default font for a given element is one of these, not all of them.
Pay respect to the words "a person is using"; what the browser would have used by default versus what the user has set the default font to and subsequently sees by default is very different; this is why Rahul Patil's structure would be imperfect, despite I'll admit this was my original assumption and in most cases he would be absolutely correct.
Note
Certain elements default to different generic font families, and are not consistent from browser to browser. Code blocks, for example, are typically rendered as monospace by default. For consistency, you will need to utilize a CSS Reset file.
Use something like this to detect the font:
http://www.lalit.org/lab/javascript-css-font-detect/
This font detection is not ready for what you need out of the box, you need to modify it to parse a list of fonts and match it to the default. This script only shows the theory behind what may work for you; character dimension comparison, as typically all fonts are different in size in height and width, and that difference is easier to detect when the font size is large (hence why it uses 72 pixels).
Caveat
One major caveat I can think of is that this will typically only be able to detect ASCII / Romanized fonts and may not apply to Unicode sets; I'm sure you could modify it, but it may computationally intensive to accurately detect the font. You would likely retain a database of fonts applicable to each language, and you would need a consistent way to detect the language settings for the browser (and not the system); this is not easy, or even possible to my knowledge in a consistent way.
You can obtain an idea of the language settings using the "navigator.language" and "navigator.userLanguage" variables in Javascript, but these, to my knowledge reflect the system language and not the language used by the browser. Server side code would likely be necessary for this to be achieved with any degree of accuracy.
Build a Javascript routine to parse a list of fonts, and compare said fonts against the dimensions of the elements created in Item 1 of this list. You can get a list of fonts necessary to parse by using Flash. I'd suspect a Java applet would be able to do this as well. This may be helpful (JS+Flash):
https://github.com/gabriel/font-detect-js
http://font-detect.s3.amazonaws.com/index.html
This should, theoretically, give you the explicit font name used by the person. You could extend upon this and also get the default generic fonts for each individual element type (e.g. sans-serif, serif, monospace, fantasy and cursive), but I suspect this would be CPU intensive and would be best used with some of type of system level application; e.g. caching the given conditions for a given member, and create the CSS catered to that specific user.
Implicit Means
A number of people suggested some other means, Daniel Lisik in particular highlighted what I may do, with respect that is "serif" declaration is invalid in it's context, since declaring "sans-serif !important" would assign "sans-serif"; you can actually build up using "inherit !important" and make strict font-family changes with the given "font-family !important". For example:
<html>
<head>
<style>
div { font-family: Cursive; }
p { font-family: Inherit !important; }
.serif { font-family: Serif; }
.sans-serif { font-family: Sans-Serif; }
.serif-important { font-family: Serif !important; }
.sans-serif-important { font-family: Sans-Serif !important; }
</style>
</head>
<body>
<div>
Normal Div Text
<p>Default P Text</p>
<p class="serif">Serif</p>
<p class="sans-serif">Sans-Serif</p>
<p class="serif-important ">Important, Serif</p>
<p class="sans-serif-important ">Important, Sans-Serif</p>
</div>
</body>
</html>
"Normal Div Text" would be in "Cursive"
"Default P Text" would be in "Cursive"
"Serif" would be in "Cursive"
"Sans-Serif" would be in "Cursive"
"Important, Serif" would be in "Serif"
"Important, Sans-Serif" would be in "Sans-Serif"
If you need any clarifications, just ask and I'll edit as necessary.
References
http://www.w3.org/TR/CSS21/fonts.html#value-def-generic-family
http://www.w3.org/TR/CSS2/cascade.html#value-def-inherit
Resources
http://www.lalit.org/lab/javascript-css-font-detect/
https://github.com/gabriel/font-detect-js
http://font-detect.s3.amazonaws.com/index.html
Your question isn't very clear. I don't know if I've misunderstood but I will try to help anyway.
If you're really determined to respect the default browser fonts and font sizes set in the browser then this should do the trick:
html, body {
font-size: 100% !important;
}
body {
font-family: serif !important; /* Or sans-serif, monospace or whatever is appropriate. */
}
Then the inheritance should kick in, as long as you don't set font stacks or sizes on everything else.
Bear in mind, the cascade order comes into play here.
This would override all types of stylesheets except for user stylesheets containing !important declarations set on relevant elements. In this particular case, you just need to respect the user's choices.
Personally, I would just write this:
html, body {
font-size: 100%;
}
body {
font-family: serif; /* Or sans-serif, monospace or whatever is appropriate. */
}
Then I would refrain from setting font stacks on everything else simply because, if an user was really determined to have his own way, he's likely to have set !important declarations on the elements that matter to him, like fonts, etc in his own user stylesheet - and this will override a normal author stylesheet (which omits !important declarations).
The others are right, the initial keyword is a viable method as long as you're not worried about IE because, no version of IE supports it.
So I think your best bet is to look for a polyfill of some sort for IE, or create your own. Modernizer might be worth a look or if you want to create your own, there's polyfill.js. I don't know anything about creating polyfills, sorry!
I know it's not a perfect answer (it's 6am and I've been up all night), but I hope it helps you in some way.
P.S. I've just realised you might have been referring to hijacking a browser's settings to set the default font you want set, regardless of how the user has it set up. It would be pointless doing that. In any case, I don't think it would work if an user has his own user stylesheet especially if it has !important declarations set on the font properties.
You can try it in this way:
.element {
font-family: -webkit-body;
font-family: -moz-body
font-family: -o-body
font-family: body
}
And also try the following which is also working fine:
.element {
font-family: none;
}
Are you simply talking about element selectors?
div {
color: red;
}
input {
font-family: sans-serif;
}
As per my understanding, font-family: none; works fine for me in chrome and firefox.
.element {
font-family: none;
}
This code will inherit to default browser font.
Use a generic font-family. The browser will choose which font is "best" for him :)
font-family: serif;
In a WYSIWYG editor (based on a contenteditable div), I have code to make sure that no inline styles are inserted into the HTML while copy-pasting, normal typing, etc. But now browsers seem to want to screw with me even more. Say I have 2 paragraphs of this sort in my HTML
<p>This is the first paragraph |(cursor)</p>
<p>This is the second paragraph</p>
There are no inline styles present. But if I now join the two paragraphs by pressing "Delete/Backspace", Chrome decides to do this
<p>This is the first paragraph |(cursor)
<!-- Note the horrible inline styles -->
<span style="font-size: 13px; line-height: 19.53px;">
This is the second paragraph
</span>
</p>
Does anyone have any idea as to how I might prevent/detect when this happens?
This is a Webkit's issue. It also influences CKEditor (http://dev.ckeditor.com/ticket/9998). I reported these tickets:
http://code.google.com/p/chromium/issues/detail?id=226941
https://bugs.webkit.org/show_bug.cgi?id=114791
But there was no response.
You could not replicate this on jsfiddle because styles need to be applied to those paragraphs. E.g.:
p { line-height: 1.5em; font-size: 12px; }
Check this one: http://jsfiddle.net/HHHak/2/
So currently there are two possible solutions:
avoid any styling :| (but that won't solve other issues I described in mentioned bug reports),
implement your own backspace/delete support (really tricky... you can find an algorithm in a spec draft, but I'm not certain that it is complete).
Good day... yes I am a nOOb. So I apologize for my nOObness right off the top. I have searched this site and many like it for a week without any resolution. I believe my problem is unique.
I have a site with about 10 pages that I am creating that have lots and lots of tables on them. Most of the tables are formatted the same way so I immediately went to CSS for my needs.
So now I am trying to understand CSS and selectors and how to combine them etc.
Here is my dilemma. I have created a tag style for the <td> tag which works great on about 95% of everything I am doing. I have also created an "override" class for it for those instances when I want to align left and indent the <td>:
TD {
text-align: center;
vertical-align: middle;
all other rules;}
td.overide_l {
text-align: left;
vertical-align: middle;
padding-left: 1em;
all other rules;}
My problem comes from a piece of corporate controlled javascript that creates a lefthand nav menu. Apparently, there are td's in that code that is affected by my rule. The problem is that the javascript is not something that I can make changes to. It is a corporate script saved on a corporate site, yet needs to be on each of my pages.
If I change the <td> style to left align the script will align to the left. If I remove the <td> tag all together it will align to the left. If I make the <td> style center aligned like I want it, the script center aligns the left nav and I can't override it.
I have tried a thousand things. I tried to put the script in a separate table with the class override in it, I tried placing it in a separate td that surrounded it, I have put the class="overide_l" class in a <span>.
Lastly, I tried creating <div>'s that had id's associated with them which worked, but then my Class="overide_l" (and a plethora of other class styles I had created), didn't work within the new divs anymore...
div#content-section td {
text-align: center;
vertical-align: middle;}
Ultimately what I want to do is leave the tag style like it is at the top of this post and simply create a <div> or something that will shut off the <td> tag style for that one piece of code. Is this even possible?
Can you please help me!
Can't you just do the same thing you did with your td selector with your override class?
#content-section td.overide_l {
text-align: left;
vertical-align: middle;
padding-left: 1em;
}
The problem is specificity:
100 points for an ID selector
10 points for a class selector
1 for a tag selector
If you add up the selectors, you get the selector that will take precedence.
In your case:
td.overide_l = 11
div#content-section td = 102
So the second wins. Changing td.overide_l to #content-section td.overide_l will make it 111.
What you need to do here is be more specific in your css rules. Putting a rule on all elements (td) is a bad idea for exactly the reason you are illustrating here. Have the tables in your code have a different class so that your CSS rules know the difference between those and the nav tds. Also, if you guys are using tables for so much, you guys are going to have a bad time.
tl;dr = "Anyone know how to apply chained classes for IE6 using jQuery or similar?"
Right,
perhaps I ask the impossible? I consider myself fairly new to Javscript and jQuery, but that being said, I have written some fairly complex code recently so I am definitely getting there... however I am now possed with a rather interesting issue at my current freelance contract.
The previous web coder has taken a Grid-960 approach to the HTML and as a result has used chained classes to style many of the elements. The example below is typical of what can be found in the code:
<div class='blocks four-col-1 orange highlight'>Some content</div>
And in the css there will be different declarations for: (not actual css... but close enough)
.blocks {margin-right:10px;}
.orange {background-image:url(someimage.jpg);}
.highlight {font-weight:bold;}
.four-col-1 {width:300px;}
and to make matters worse... this is in the CSS:
.blocks.orange.highlight {background-colour:#dd00ff;}
Anyone not familiar with this particular bug can read more on it here: http://www.ryanbrill.com/archives/multiple-classes-in-ie/ it is very real and very annoying.
Without wanting to go into the merrits of not chaining classes (I told them this, but it is no longer feasible to change their approach... 100 hand coded pages into a 150 page website, no CMS... sigh) and without the luxury of being able to change the way these blocks are styled... can anyone advise me on the complexity and benefits between any of my below proposed approaches or possible other options that would adequately solve this problem.
Potential Solution 1
Using conditional comments I am considering loading a jquery script only for IE6 that:
Reads the class of all divs in a certain section of the page and pushes to an array
creates empty boxes off screen with only one of the classes applied at a time
Reads the applied CSS values for each box
Re-applies these styles to the individual box, somehow bearing in mind the order in which they are called and overwriting conflicting instructions as required
Potential Solution 2
read the class of all divs in a certain section of the page and push to an array
Scan the document for links to style sheets
Ajax grab the stylesheets and traverse looking for matching names to those in class array
Apply styles as needed
Potential Solution 3
Create an IE6 only stylesheet containing the exact style to be applied as a unique name (ie: class='blocks orange highlight' becomes class='blocks-orange-highlight')
Traverse the document in IE6 and convert all spaces in class declarations to hyphens and reapply classes based on new style name
Summary:
Solution 1 allows the people at this company to apply any styles in the future and the script will adjust as needed. However it does not allow for the chained style to be added, only the individual style... it is also processor intensive and time consuming, but also the most likely to be converted into a plugin that could be used the world over
Solution 2 is a potential nightmare to code. But again will allow for an endless number of updates without breaking
Solution 3 will require someone at the companty to hardcode the new styles every time they make a change, and if they don't, IE6 will break.
Ironically the site, whilst needing to conform to IE6 in a limited manner, does not need to run wihtout javascript (they've made the call... have JS or go away), so consider all jQuery and JS solutions to be 'game on'.
Did I mention how much i hate IE6?
Anyway... any thoughts or comments would be appreciated.
I will continue to develop my own solution and if I discover one that can be turned into a jQuery plugin I will post it here in the comments.
Regards,
Mike.
edit: added tl;dr to the top.
Here's a combination solution: http://code.google.com/p/ie7-js/
Fixes the multiple class bug and some other selector issues you may encounter.
I believe that if you look closely at how IE6 handles class chaining, and if the order of the class names are consistent, then you can avoid some of the IE6 issues with careful class coding.
First have a look at your provided HTML example:
<div class='blocks four-col-1 orange highlight'>Some content</div>
IE6 will apply the CSS in the order of the class names, starting with 'blocks' and continue through to 'highlight'.
Now look at your initial group of classes:
.blocks {margin-right:10px;}
.orange {background-image:url(someimage.jpg);}
.highlight {font-weight:bold;}
.four-col-1 {width:300px;}
These would be applied without any problems as each applies different properties. However, if you should, say, apply a different background with 'highlight' you should see that it will override the one set with 'orange'.
Using this same logic approach, let's have a look at the last class you defined:
.blocks.orange.highlight {background-colour:#dd00ff;}
This class should only apply to objects that have all three class names applied. What happens in IE6 is the first two class names are ignored and only the last class name is used to apply the styling. This means that any object that has the class 'highlight' will receive the new background property. (PS: the CSS property should be background-color, no 'u')
However, if you use other selector methods you can possibly avoid the limitations by applying nested ids/classes [#section .blocks] and/or object associations [form input.highlight]. This complicates the process I know, but at some point we simply need to stop trying to fully support out dated software.
Note: IE6 has not received any updates for two years and the browser itself is nine years old. The browser has two successors and a third is already in development. There should be some cutoff where an acceptable loss of presentation is allowed.
OK... as there is some confusion about what I am asking:
I have been called in to work on a project that is almost completed.
There are no templates.
There are 100+ pages, hand coded and a looming deadline. Here is some actual code from the HTML/CSS all written by the last guy (not abreviated like above):
<div class="block four-col-1 gold black-bg">
<h1>Self Managed Super</h1>
<a class="highlight" href="#"><span class="left bottom">
<strong><span class="text-white">Bolster your<br />
portfolio</span><br /></strong>
with unique<br />
investment<br />
options</span>
<img src="/AU/individuals/_images/superannuation-2.png" alt="" /></a>
</div>
<div class="block four-col-1 grey-light black-bg">
<h1>Self Managed Super</h1>
<a class="highlight" href="#"><span class="left bottom">
<strong><span class="text-white">Financial <br />
flexibility,</span></strong> <br />
into and <br />
throughout <br />
retirement
</span>
<img src="/AU/individuals/_images/superannuation-3.png" alt="" /></a>
</div>
and here is some of the relevant CSS:
.block .highlight {display:block;position:relative;height:auto;min-height:110px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.block .highlight:hover {border:1px solid #ddd;}
.block .bottom {position:absolute;font-size:11px;line-height:12px; bottom:10px;letter-spacing:-0.2px; }
.block .left {float:left;font-size:11px;margin-left:8px;width:75%;}
.block.black-bg p, .block.black-bg p * {color:#828282;}
.block.black-bg p * span.text-white {color:#fff;}
.block img {position:absolute;bottom:0;right:1px;z-index:0}
.block .highlight img {position:absolute;bottom:0;right:0px;z-index:0}
.highlight:hover {opacity: .75; filter: alpha(opacity=75); -ms-filter: "alpha(opacity=75)";-khtml-opacity: .75;-moz-opacity: .75; overflow:visible;}
.content .block.black-light.highlight, .block.black-light .highlight, .block.black-light
.block-inner {background:url(/AU/_images/system/block-black-light.gif) no-repeat top left;}
.content .block.grey-light.highlight, .block.grey-light .highlight, .block.grey-light
.block-inner {background:url(/AU/_images/system/block-grey-light.gif) no-repeat top left;}
.content .block.orange.highlight, .block.orange .highlight, .block.orange .block-inner {background:url(/AU/_images/system/block-orange.gif) no-repeat top left;}
.content .block.gold.highlight, .block.gold .highlight, .block.gold .block-inner {background:url(/AU/_images/system/block-gold.gif) no-repeat top left;}
.content .block.blue-light.highlight, .block.blue-light .highlight, .block.blue-light .block-inner {background:url(/AU/_images/system/block-blue-light.gif) no-repeat top left;}
.content .block.blue-dark.highlight, .block.blue-dark .highlight, .block.blue-dark .block-inner {background:url(/AU/_images/system/block-blue-dark.gif) no-repeat top left;}
.content .block.black-light.black-bg.highlight, .block.black-light.black-bg .highlight, .block.black-light.black-bg .block-inner {background:url(/AU/_images/system/black-block-black-light.gif) no-repeat top left;}
.content .block.grey-light.black-bg.highlight, .block.grey-light.black-bg .highlight, .block.grey-light.black-bg .block-inner {background:url(/AU/_images/system/black-block-grey-light.gif) no-repeat top left;}
.content .block.orange.black-bg.highlight.block.orange.black-bg .highlight, .block.orange.black-bg .block-inner {background:url(/AU/_images/system/black-block-orange.gif) no-repeat top left;}
.content .block.gold.black-bg.highlight, .block.gold.black-bg .highlight, .block.gold.black-bg .block-inner {background:url(/AU/_images/system/black-block-gold.gif) no-repeat top left;}
.content .block.blue-light.black-bg.highlight, .block.blue-light.black-bg .highlight, .block.blue-light.black-bg .block-inner {background:url(/AU/_images/system/black-block-blue-light.gif) no-repeat top left;}
.content .block.blue-dark.black-bg.highlight, .block.blue-dark.black-bg .highlight, .block.blue-dark.black-bg .block-inner {background:url(/AU/_images/system/black-block-blue-dark.gif) no-repeat top left;}
(Code is essentially exactly as he wrote it, in all it's unformatted, hideous beauty.)
If you can be bothered to read all that (and most of you probably can't - hence my abbreviations above) you would see that whilst some classes are unique and do not conflict, some do. The result is that some blocks which are expected to be balck, in EI6 are blue, and the margins in EI6 are often wrong, and the absolutely positioned images also break particularly when combined with an IE PNGFix to make them appear transparent as expected.
Also, due to the nature of the deadlines, assume that going over each and every of the 100+ pages and editing the HTML is no longer an option. This was my recommendation from day one and whislt the client accepts that what they have is well and truly less than ideal, they are also working to a tight deadline.
This leaves only two options for edits. Change the CSS so it works across all browsers (as this is called on each page), or generate some Javascript (again, this can be called onto each page using an include) to do something with the HTML on every page on the site, or something else tricky. Changing code in the included pages is easy, changing the HTML in each of the blocks in question is out.
I completely understand what everyone is commenting on so far and thanks for those... they were my initial solutions in both cases, and I wouldn't be on here if they were an option.
Thanks to everyone who has read this, but I really am trying to find some super tricky solution to the entire problem of non-chaining classes in IE6. potentially for broader use than this project. However I now only have 5 working days to find the answer before my contract ends, so if we don't we will just hack an IE6 style sheet that makes all the blocks appear in one way on that browser and leave it at that. I would prefer to find a universal solution, but... meh. Hopefully 18 months from now the user base of IE6 will be so low that it's no longer an issue.
Thanks everyone.
Cheers,
Mike.
I think you may have missed the point of my earlier comment. I was not confused about your request but was trying to explain how you might approach the task should the coding of the site be consistent.
For a more detailed example, lets take a line from your last CSS example, minus the actual styling properties:
.content .block.orange.highlight, .block.orange .highlight, .block.orange .block-inner { }
Following the behavior of Internet Explorer 6 in regards to chained CSS classes, that line of code would be seen by IE6 as:
.content .highlight, .orange .highlight, .orange .block-inner { }
Notice that the chained class names are ignored for all except the last name in the chain. Since you had already rejected the JavaScript solutions that were proposed by others, the only solution I can see is to design your CSS class definitions with this IE6 limitation in mind as you code.
This does not make the task simple as the whole reason for chaining the classes is to be able to apply special conditional styling without increasing the DOM nodes of the document. However, in order to continue to support enhanced feature programming in IE6, without the help of some JavaScript solutions, you will simply have to put in more effort to find older conventional methods for the same result. I know this comment is likely a bit late for your project but I hope it helps with the planning process when dealing with IE6 styling.