homepage Welcome to WebmasterWorld Guest from 54.205.144.54
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS validator warnings
how important are they
teylyn




msg:1218262
 10:30 pm on Dec 19, 2005 (gmt 0)

I just ran my CSS file through the validator. It did not come up with any errors but a list of warnings. Of these, there are two types that constitute the bulk of the warnings. One is

You have no background-color with your color : h1
This comes up for most of my defined html elements and the pseudo classes.

The other recurring warning is

Redefinition of width : * html #menu
Now, I'm using the Tan-Hack a lot to correct IE 5 from displaying the wrong measurements.

I don't want to assign background colours to most of my classes, because they display fine on the several different backgrounds that they are used on. Can I just disregard the warning?

I also don't want to abandon the Tan-Hack. The pages look just like I want them in IE6, IE5.5, IE5.01, Firefox and Opera and the html code validates as XHTML 1.0 strict and not a single table anywhere near the code. Yeah! :)

If I leave my CSS file as it is right now, with all the warnings that it generates, is it still all right to display the W3C CSS icon for valid code? Remember, no errors, the code validates, just the warnings listed above.

cheers

teylyn

 

createErrorMsg




msg:1218263
 3:57 am on Dec 20, 2005 (gmt 0)

If I leave my CSS file as it is right now, with all the warnings that it generates, is it still all right to display the W3C CSS icon for valid code?

Yes. Warnings are just that: warnings of spots in your code that could cause potential problems.

The first type of warning is based on accessibility concerns. If you explicitly set a font color, but do not explicitly set a high-contrast background color, there is a risk that certain visually-impaired users who surf with their own default background color set in a user stylesheet might not be able to read your text. With no background color set in the author stylesheet, the user stylesheet will apply as the default. So if your text is dark blue and I roll along with a default black background, I won't be able to read your text. But if you have dark blue text and explicitly set a white background, my stylesheet can't cause a problem. It's an unlikely problem, and therefor only a warning in the validator rather than an error, but still a relevant part of maintaining accessibility.

The second is probably just pointing out what the validator sees as either an inconsistency in the code or a potential conflict. Remember that the recommended approach to cross-browser coding issues, suggested by both the W3 and the folks at Microsoft, is to feed IE versions their own styles via conditional comments. This not only eases code maintenance, but also allows you to have a main stylesheet that is valid and clean.

Regardless, you can still confidently display the little W3 CSS icon on a page that registers warnings.

However, bear in mind that the only reason to display the icon is to show visitors that the site is compliant. Should any visitors choose to click the link and see for themselves, they will see the same warnings you do. And like you, they may not clearly understand the difference between a warning and an error. If they don't, the addition of the icon actually hurts you, as it now looks like you're claiming to write valid code when you, in fact, "don't" (or at least they don't think so, which is just as bad).

cEM

Fotiman




msg:1218264
 3:06 pm on Dec 20, 2005 (gmt 0)


Remember that the recommended approach to cross-browser coding issues, suggested by both the W3 and the folks at Microsoft, is to feed IE versions their own styles via conditional comments.

Do you have a reference to back this statement up? I would be interested in reading more on that.

Thanks.

createErrorMsg




msg:1218265
 3:57 pm on Dec 20, 2005 (gmt 0)

Do you have a reference to back this statement up?

I may have gone a step too far in saying the the W3 recommends using conditional comments to deal with IE versions, as I don't think the W3 has made any official statement at all about handling specific browser issues. However, the widely shared opinion amongst the pillars of the CSS community is that the best way to handle feeding IE it's hacks and special code is through conditional comments, as they allow you to maintain a clean valid stylesheet for all browsers with only IE getting the junk it needs. For reference, check out the writings of the CSS guru-publishers...Dave Shea, Roger Johansson, etc. Most of them, at some point or another, have sung the relative praises of CCs for dealing with IE.

The IE team, however, has definitively said that CCs are the way to go. From a blog entry by the IE development team...

We ask that you please update your pages to not use these CSS hacks. If you want to target IE or bypass IE, you can use conditional comments.

cEM

Fotiman




msg:1218266
 4:04 pm on Dec 20, 2005 (gmt 0)

I don't really see the benefit of conditional comments over, say, the Tan Hack (aka * HTML hack). What do conditional comments buy you?

createErrorMsg




msg:1218267
 4:29 pm on Dec 20, 2005 (gmt 0)

What do conditional comments buy you?

1. Valid code.
2. A fully compliant stylesheet.
3. The ability to easy and quickly isolate the IE only code in order to (a) change it if necessary or (b) remove it completely when the hacks become problematic.
4. Future-proofing. A hack exploits holes in a browsers support. CCs exploit only IE's support of CCs. Holes can be, and often are, fixed. but even if other browsers started supporting CCs, they still would effect only IE browsers since they specifically target certain versions of IE.

If you locate and read the IE team's blog entry about CSS hacks breaking pages in early tests with IE7, you'll see the problem. CCs are a quick and easy way to control what code goes to what versions of IE, while simultaneously keeping potentially troubling or conflicting code away from other browsers.

the Tan Hack (aka * HTML hack)

This is poised to be one of the biggest problems on the near horizon with IE7 on the way. The IE teams has indicated that the new engine will no longer support the star hack (presumably they are getting rid of the mysterious supra-<html> element that allows that hack to work). So the Star Hack will not deliver styles to IE7 functioning in Standards Mode. Now it may be the case that this doesn't matter. If IE7 is also compliant enough to support the code the Star Hack is overriding, you'll be fine leaving it in place, but if it ISN'T, you're back to looking for other solutions. Optionally, you bring that IE code in via a conditional comment and once you know how IE7 handles it, you either include version 7 in the conditional or don't (which, if done, would involve changing a single character).

cEM

Fotiman




msg:1218268
 5:05 pm on Dec 20, 2005 (gmt 0)


What do conditional comments buy you?

1. Valid code.
2. A fully compliant stylesheet.

The Tan Hack is valid and compliant.


3. The ability to easy and quickly isolate the IE only code in order to (a) change it if necessary or

The Tan Hack does that as well.


(b) remove it completely when the hacks become problematic.

But will the Tan Hack become problematic?


4. Future-proofing. A hack exploits holes in a browsers support. CCs exploit only IE's support of CCs. Holes can be, and often are, fixed. but even if other browsers started supporting CCs, they still would effect only IE browsers since they specifically target certain versions of IE.

Excellent point.


If you locate and read the IE team's blog entry about CSS hacks breaking pages in early tests with IE7, you'll see the problem. CCs are a quick and easy way to control what code goes to what versions of IE, while simultaneously keeping potentially troubling or conflicting code away from other browsers.

I did see those comments.


the Tan Hack (aka * HTML hack)

This is poised to be one of the biggest problems on the near horizon with IE7 on the way. The IE teams has indicated that the new engine will no longer support the star hack (presumably they are getting rid of the mysterious supra-<html> element that allows that hack to work). So the Star Hack will not deliver styles to IE7 functioning in Standards Mode. Now it may be the case that this doesn't matter. If IE7 is also compliant enough to support the code the Star Hack is overriding, you'll be fine leaving it in place, but if it ISN'T, you're back to looking for other solutions.

And that has been exactly my view. Since IE7 supposedly fixes all the stuff I use the hacks for, it will simply ignore the hack and work as desired.

I guess ultimately, IE7 will either work as it should, or not. If the Tan Hack is no longer supported, good. If they don't fix the bugs that the Tan Hack is used to fix, then they might be shooting themselves in the foot, potentially giving Firefox or some other competing browser additional momentum.

Thanks for your comments. I will have to read up on conditional comments.

pageoneresults




msg:1218269
 5:17 pm on Dec 20, 2005 (gmt 0)

You have no background-color with your color : h1
This comes up for most of my defined html elements and the pseudo classes.

The W3 made some updates to the CSS validator a while back. Every single one of my stylesheets that are out there (over a few hundred) were 100% valid and without warnings. After the changes were made to the validator, every single one of them contained warnings. I've cleaned up a few which 99% of the warnings were...

You have no background-color with your color : h1
This comes up for most of my defined html elements and the pseudo classes.

What tedious task that was.

Here are some frequently asked questions about the Errors and Warnings you are most likely to encounter...

W3C - CSS Validator FAQ [websitedev.de]

P.S. Okay, what have you CSS gurus done to address this?

teylyn




msg:1218270
 8:18 pm on Dec 20, 2005 (gmt 0)

Thanks for your comments. I will have to read up on conditional comments.

Yeah, me too. One place to start is this blog entry in Sitepoint titled Microsoft says: de-hack your CSS [sitepoint.com]

'nother question: If I use conditional comments to load IE specific style sheets after loading the general style sheet in the header, does that mean that the IE specific CSS only needs to include the lines where values change? Example:

general style sheet for all browsers:

#menu {
position:absolute;
width:580px;
top: 130px;
height: 20px;
padding-left: 170px;
z-index: 99;
border-left: solid 15px #fc0;
border-right: solid 15px #fc0;
}

IE specific style sheet:
#menu {
width: 780px;
}

As I understand it, since the general style sheet will be loaded first by all browsers, the IE specific one will be loaded only by IE and the value width will then be overwritten, but all the other attributes stay the same.

Is that assumption correct? If so, I'd just have to root around my original style sheet and place all the Tan Hack lines in a separate sheet. Should in the long run be less code, too.

cheers

teylyn

DanA




msg:1218271
 8:31 pm on Dec 20, 2005 (gmt 0)

The assumption is correct, you only have to overwrite what is different for msie 5 or 5.5 or 6 or 7...

teylyn




msg:1218272
 10:04 pm on Dec 20, 2005 (gmt 0)

And now for the catch!

I have installed multiple versions of IE. I run XP pro with IE 6 and have IE 5.5 and IE 5.01 in separate folders. When clicking "Help - About IE" I get the IE 5 logo in the 5.01 version, but the IE 6 logo in the IE 5.5 version. The text in the about window of all versions shows version 6.0.2900.etc in all versions.

I set up some conditional comments in a test page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Version control</title>
</head>
<body>
<p>A paragraph for all browsers</p>
<!--[if IE ]><p>A paragraph for Internet Explorer, all versions</p><![endif]-->
<!--[if IE 6]><p>A paragraph for Internet Explorer version 6</p><![endif]-->
<!--[if lt IE 6]><p>A paragraph for Internet Explorer below version 6</p><![endif]-->
<!--[if IE 5]><p>A paragraph for Internet Explorer version 5</p><![endif]-->
</body>
</html>

Guess what? Firefox and Opera display only the first paragraph for all browsers, but all IE versions think they're IE6 and display the next two conditional paragraphs. None of the versions displays the paragraph for below version 6 or IE 5 only.

What to do now? How can I test if my IE5 specific CSS works?

This is a tough one. Do I force IE6 into quirks mode, so I can apply the IE CSS across the board? I'd rather like to utilise IE6 in compliant mode, which would (probably) ensure that IE 7 would display the pages correctly, too, and I would not have to do any redesigning once IE7 hits the shelves.

Does that mean I do need another machine with real IE 5.x to test the specific CSS?

baffled

teylyn

teylyn




msg:1218273
 10:19 pm on Dec 20, 2005 (gmt 0)

More thoughts on the IE dilemma:

Would this work?

  • I could write my code and test for FF, Op, IE6 in compliant code.
  • Then change headers in all pages to kick IE6 into quirks mode, and with a conditional comment include an IE specific style sheet
  • make changes to the IE specific Css until if shows up fine in quirks mode
  • assume that IE6 quirks mode is equal to IE 5.x, at least where the box model is concerned
  • change all the headers again to kick IE 6 back into compliant mode
  • change the conditional comments to include every IE below v 6
  • not test the pages in my "fake" multiple IE5.x installations at all

anyone?

teylyn

GreenLeaf




msg:1218274
 10:39 pm on Dec 20, 2005 (gmt 0)

What to do now? How can I test if my IE5 specific CSS works?

[positioniseverything.net...]

This one made me happy ;-)) and solved similar problems.

teylyn




msg:1218275
 12:12 am on Dec 21, 2005 (gmt 0)

GreenLeaf, you should be promoted!

Thank you! That was most helpful and it works!

:)

teylyn

GreenLeaf




msg:1218276
 3:30 pm on Dec 22, 2005 (gmt 0)

:-)))
Thank you for your kind words.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved