View Full Version : Problems With CSS Validation

12-12-2006, 11:13 AM
I use the IE hack '/' before an element that needs to be read by IE only. The only problem with this is it creates a parse error when I try to validate the CSS. Are there any quirks or hacks, or ways around this to make my stylesheet valid like the HTML in the rest of the page?

I've thought about creating two stylesheets, one for each, but don't know how to do the @import thingy and, because the stylesheets are quite large, believe this to be a hell of a ball-ache! Anyone have any ideas how this could be done more easily??

12-12-2006, 11:29 AM
Microsoft themselves recommend using conditional comments (http://www.javascriptkit.com/howto/cc2.shtml) over CSS hacks to feed IE-specific styles to the desired versions of IE; these are placed in the HTML document so using different style sheets is recommended. Remember that you only need to override those styles in the general style sheet that are specific for IE; this usually means that the IE-specific style sheet only contains a subset of the general styles.

Here's more about the @import (http://www.w3.org/TR/CSS21/cascade.html#at-import) "thingy"; although it can be used to hide certain advanced styles from ancient browsers that don't understand the @import rule, it won't help much in feeding IE specific styles.

12-12-2006, 11:38 AM
So you're saying that all that needs to be in the IE stylesheet are the elements that I used to hack to make them look right in IE? Everything else will be read from the normal stylesheet I use?

I'm a bit confused now. I put this conditional statement in the <head>, right? And do I put it before or after the normal stylesheet I use?

I have this so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>The Plant Hire Register - planthiresolutions.com</title>
<link href="/resources/style.css" rel="stylesheet" type="text/css" media="screen">
<!--[if IE]>
<style type="text/css">
@import url(/resources/ie-style.css);
<script type="text/javascript" src="/resources/script.js"></script>

yet it doesn't seem to be reading from that IE stylesheet??

12-12-2006, 12:35 PM
Okay. I've sorted that out now... but what the heck does this mean:

"To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML."

My HTML is valid, but does this mean I should indent everything and write it all out correctly?

12-12-2006, 02:06 PM
I guess you found it out, but since the "conditional" stylesheet is only visibile to--the selected versions of--IE, it should be last; everyone gets the first, general one, IE only gets the overrides following it.

Where did you get the remark about the document parse tree? I can only imagine that this refers to the proper nesting order of elements and such, which not all HTML versions demand to be valid (but which is good practice in any case).

12-13-2006, 02:59 PM
When attempting to validate my CSS, I get a load of warnings about not supplying a background-color with my color. But for text objects that are placed on gradiented backgrounds and such, if I supply a background-color it would stand out over the background?? Is there some way of putting a background color in that would not show up? I tried background-color: transparent; but that is not recognised.

Also, that parse tree thingy comes up when I validate my CSS, but because I have a strict doctype, would that mean it's validating the CSS strict too?

I thought you could pass validation with some warning allowed?

12-13-2006, 03:28 PM
The background image will supercede the background color. They are warnings NOT errors. It says you need to have a valid parse tree meaning your html that uses the CSS needs to be valid as well. You can live with the warnings if you like or just add what it says you should have. Its for accessibility reasons. Disable images and background images and see if text is still legible. Don't assume default background color is white and default text color is black. Its not.

12-13-2006, 04:47 PM
I never mentioned anything about Errors?? I know they are all warnings, but for some reason this site does not give me the option of displaying a passed validation image even tho technically it has passed but with a few warnings?

I know the default background color is actually transparent, I did do a bit of homework on this before asking you guys. I do have a valid parse tree, plus my friend has a site that has warnings and that line about the parse tree, yet he has got the validation image to go with, which is another thing that's confusing me. I have correctly used the IE conditional statement and created a separate stylesheet for IE... could someone tell me exactly how to draw in a stylesheet from another file?

12-13-2006, 05:11 PM
Okay nevermind guys. Thanks for your help. The reason it wouldn't tell me it was validated is because I was uploading a local file and until I made it live for some reason it wouldn't allow it as valid CSS??

Oh well, sorted now. Thanks again :)

12-13-2006, 05:55 PM
Well the image links to an online site. Keyword: online. When you uploaded the local file they didn't give you the image because it was a file that was online.

12-13-2006, 07:08 PM
The reason it wouldn't tell me it was validated is because I was uploading a local file and until I made it live for some reason it wouldn't allow it as valid CSS??

I get that warning all the time when I use the Web Developer plugin on FF to validate my local code. It'll validate the CSS for me but will always tell me my HTML needs to be validated. I just don't worry about it until I post it online.

12-14-2006, 03:44 PM
Okay, an update in case people don't know.

When validating CSS I've been getting loads of errors saying that 'You have no background-color with your color'. To sort this using a transparent background didn't work, but if you put background-color: inherit;, or color: inherit; where you need a colour to get rid of the warnings it will validate and won't mess up your site.

The whole point of needing to give a background colour with a color on a page is because some users have their own styles and colour that they use to display a web page, which means, if you haven't set one it will use theirs, which can make the page look wrong.

Setting it as inherit means it will take whatever their default is for that particular element of the page, or if they don't have one, which is in most cases, it won't display one at all. Sorted!