Valid CSS warnings

[BLiZZaRD]

I am trying to get all my pages to validate. So far so good, so I moved on to my CSS. It validates but I have 2 warnings:

    * Line : 93 (Level : 1) You have no background-color with your color : #nav-menu li a
    * Line : 107 (Level : 1) You have no background-color with your color : #nav-menu li a:hover

Now what I DO have here is an image for each background as such:

#nav-menu li a
{
background: url(/cssimg/1.png);
height: 2em;
line-height: 2em;
float: left;
width: 85px;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

Is there something I can add to the background: line that will keep my images visible as well as make the images appear?

Is it good manners to just put:

background: #000000;
background: url(/cssimg/1.png);

Since CSS will use what is second on the list?

[BLiZZaRD]

Post and it shall come!

I completely forgot about using:

background-color: #000000;

I feel silly now...

But I was wondering... Sometimes I see a THREE number hex code for colors i.e. #eee or #000 is this valid and how so?

[Twey]

Warnings are notes of things that could be a problem depending on your design, not things that necessarily are. As such, they're not a serious concern if you know the problem(s) don't apply in your case.

But I was wondering... Sometimes I see a THREE number hex code for colors i.e. #eee or #000 is this valid and how so?

It's just a shorter form. Double each code to receive the six-digit form. For example, #eee is equivalent to #eeeeee, and #123 is equivalent to #112233.

[billyboy]

Speaking of shorter forms, instead of writing two separate declarations for the background image and the background colour, they can be combined into one. It's always a good idea to include a colour matching the main colour of the image just in case images don't load or a user has them disabled.

background: url(/cssimg/1.png) #000;

The background repeat and background position property can be included in that shorthand declaration as well.

[mwinter]

Is it good manners to just put:

background: #000000;
background: url(/cssimg/1.png);

Since CSS will use what is second on the list?

No, because the first declaration is effectively ignored, so its presence is meaningless. The effective declaration is:

  background: transparent url(/cssimg/1.png) repeat scroll 0% 0%;

which is precisely what you had to begin with.

As billyboy pointed out, a background image should be accompanied by a background colour. The only exception is if the intention is to take advantage of transparency, either because the image contains transparent or translucent sections, or it only renders in a subregion of the element and the content of "lower" elements should shine through. Still, there should be an explicit background colour somewhere relevant. You'll just have to live with the warnings, in that case.

Mike

[BLiZZaRD]

Thanks for that guys! I will give it a go, my CSS is getting quite large now, so saving file size will soon have to take some sort of priority, I suppose.

I am not using transparencies, I am using images for static and hover to make a nav-menu, so that shouldn't be a problem.

I was using my bg color to match my web page, is that bad? As my images are different colors/ multi colored so I thought that was a safe way to go.

[mwinter]

I will give it a go, my CSS is getting quite large now, so saving file size will soon have to take some sort of priority, I suppose.

You might want to break the style sheet down if there are document-specific rules: a separate style sheet that contains the common theme (assuming there is one) applied throughout the site and imported using an import at-rule, and use other smaller style sheets to cope with the more unique portions of the site. This doesn't reduce the overall size, but it can make maintenance simpler, and doesn't invalidate caching for the entire style sheet, only the edited parts.

I was using my bg color to match my web page, is that bad?

Not necessarily. The main thing is to ensure that the text is readable if the image isn't rendered. If you have the Web Developer toolbar for Firefox, you can disable images from the Images menu. You can also do the same thing from within Firefox preferences, but the toolbar makes it a little easier. If the background colour can be similar to the image, so much the better.

Mike

[BLiZZaRD]

There really isn't a "one specific" page or portion of my site that I could justify not having everything in one CSS. I understand the idea behind it and have done this in other areas, when I needed a different layout or something. But all the things I am working on are going to be (at least for the most part) on every page.

The spot where I have the images within the CSS are all links as well, so even if the pics are disabled it will resort to a <ul> and the text will become a link, which will then follow the link colors I have specified, so they will still be visible, yes?

[mwinter]

The spot where I have the images within the CSS are all links as well, so even if the pics are disabled it will resort to a <ul> and the text will become a link, which will then follow the link colors I have specified, so they will still be visible, yes?

More-or-less, but it's easy enough to see for certain: disable images and load the page. If the links are easily readable, you'll have no problems.

It's the work of seconds, literally, with the Web Developer extension or the View menu in Opera, and only slightly longer through browser preferences.

Mike

[BLiZZaRD]

Yup, disabling makes the links themselves show up. Good to go with that one