 No More Warnings - Background Color, validate your stylesheet |
  |
 Oct 14 2005, 10:53 PM
Post
#1
|
|
 insert coin  Group: Main Team
Posts: 5,344 Joined: 24-May 04 From: Maastricht Member No.: 35   |
As you validate your stylesheet, you may often get the congratulations that it validated, but you end up with tons of warnings...
Since W3 modified the css validation service, a new fixture was added some time ago (don't know exactly, but it's been here for quite a while now..). I experienced it when I was validating a site, my stylesheet always validates without a problem, but I got a lot of warnings, saying I didn't specify the background colour for a number of elements.. First of all the reason why this warning shows up is that if you for example are loading an image as a background colour, and this doesnt load, the user might see white text on a white background, as white is the default color for a background colour. Another thing that might happen is when a user uses a personalized stylesheet on his pc (for example if he has trouble staring at a white screen for too long). If he has the setting that the background is black, and you specified your textcolour to be black (color:#000;), then he ends up with a black screen.. On a side note: I saw this on a pc of one of my clients, he changed the colour settings of his pc, and when I purchased SwishMax on his pc, the form at swishzone was unvisible, so I had to select the text in order to see it.. Not that it mattered to me, but people who have less patience might become annoyed and click-away. Thats 80 euros down the drain per copy  So what to do when you really cant specify a background colour, because you need the element to be transparent, when for example the background image of the surrounding element needs to be visible? CODE background-color : inherit;  That's all! Just place this code for the element that generates the warning, and the stylesheet will validate without a single warning!Now don't add this line to every single line, it's better to first look at the warnings (it specifies the line and the element on your stylesheet), and fix it according to this list. If you for example add this line to an a:hover element, you get new warnings saying it contains a block element etc. and thats not what we want as we are getting rid of the warnings! Lot of text for a single line of code, but just to make a point and explain the reasoning behind it...  Happy styling! 
|
  
|
|
|
Oct 16 2005, 08:23 AM
Post
#2
|
|
 Uptight Dot Group: Moderator
Posts: 1,170 Joined: 20-October 04 Member No.: 916 |
Wow, that's so easy and so effective! Stupid validators. LOL.
Thanks Rick! |
|
|
|
|
Oct 16 2005, 11:13 AM
Post
#3
|
|
 Merry KissMoose Group: Main Team
Posts: 15,990 Joined: 18-May 04 From: North Pole Member No.: 2  |
Nice little tip Rick.
Thanks |
|
|
|
|
Nov 22 2005, 05:56 PM
Post
#4
|
|
 Regular Dot  Group: Member
Posts: 60 Joined: 22-November 05 Member No.: 8,299  |
As I make to locate < div > to be a horizontal menu with < ul > and
<I> Thanks. |
|
|
|
|
Mar 22 2006, 06:06 PM
Post
#5
|
|
|
Regular Dot Group: Member
Posts: 169 Joined: 21-August 04 Member No.: 567  |
Great tip
For people using this, recognize that whichever class/ID/whatever you put this in, it will just take the background color from the containing tag. for example: CODE <body> The div with class inherit_color would have the same background color as your entire document.<div class="inherit_color"></div> </body> On the other hand, if you added something like: CODE <body> <div class="black_bg"> <div class="inherit_color"></div> </div> </body> The inherit_color classed tag would inherit the black background from the black_bg class
|
|
|
|
|
Jun 2 2006, 11:09 AM
Post
#6
|
|
|
New Member Group: Member
Posts: 23 Joined: 21-April 06 Member No.: 10,871 |
Very nice tip. Worked easily and effectively
|
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 29th July 2010 - 11:06 PM |