Valid CSS?

Hi,

I have been trying to clean-up my CSS and have tried to validate it using: http://jigsaw.w3.org/css-validator/validator-uri.html I get a long error report back saying things like the colour i used in the scrollbar does not exist. The colour is fffff0. There are obviously loads of other errors that i can't explain and work-out.

http://www.futurecorps.net/00.htm

For those of you that know how, please explain.

Cheers

Hello future buzz,

The scrollbar declarations are IE specific and is not valid CSS. Browsers other than Internet explorer do no recognize those rules. The same with the DXImage transforms. You can keep these but your css won't validate.

Also, for any non-zero value that you have for widths, positioning, etc, you must have a unit after the value. for example:

top: 10px; width: 75%; font-size: 1em

These things comprise the bulk of the validation errors.

Good luck.

JrzyCrim, thanks for the info!

I see what you mean about the unit after the value etc... I'll change that.

So as long as i have the shadow filter my CSS wont validate?? Man, thats pants! Well, i'm not too worried really. As long as i and the users of my site enjoy it then thats all it's about for me.

Do i need to create another external CSS if the one that i use now gets too full? Will it affect the download speed? I am very new to CSS, i need more info from sites and people.

Any thoughts?

futurebuzz.

ps - Back at 17:00

Your welcome. Glad to be of some use.

I'm fairly new to css myself and I really don't know what is considered to be too large. Unless you are planning on having a huge stylesheet, I don't think it will be an issue. As with any web document, the smaller the better. Try to optimize as you go. Group similar styles together, use short-hand form for declarations when possible. see http://home.no.net/junjun/html/shorthand.html

I personally prefer writing out each individual declaration to make it easier to read/edit. If size is an issue, however, the shorthand method may help.

I have fallen into the habit of separating layout styles (positioning for main elements) and other styles (fonts, links, heading styles, etc) into two separate documents. This is my own thing and doesn't really make too much of a difference. I would avoid having too many separate documents because a request has to be made for each one which could slow things a bit.

Here's a service which might be of use to you:
http://www.websiteoptimization.com/services/analyze/

This service, when given a url, will return information about that page. loading time, file sizes (including css, html, scripts), and recommendations for optimizing. I wouldn't worry about the caution of CSS file sizes too much. Anything over 1160 byte is considered to large by this service. Ozzu's is 6k+.

Here are some other resources:

css tutorials:
http://www.css.nu/
http://www.mako4css.com/
http://www.richinstyle.com/
http://www.blazonry.com/css/
http://www.w3schools.com/css/
http://www.websitetips.com/css/
http://www.htmlhelp.com/reference/css/
http://www.pageresource.com/dhtml/indexcss.htm
http://www.climbtothestars.org/coding/cssbasic/
http://www.htmlcenter.com/tutorials/index.cfm/css/
http://www.freewebmastertips.com/php/co ... hp3?aid=48
http://www.canit.se/~griffon/web/writin ... heets.html
http://www.utoronto.ca/ian/books/xhtml2 ... ss-4a.html
http://idm.internet.com/articles/200101 ... ial1a.html
http://www.greytower.net/en/archive/art ... tsumi.html
http://www.westciv.com.au/style_master/ ... _tutorial/
http://webmonkey.com/authoring/styleshe ... rial1.html

layout examples:
http://www.glish.com/css/
http://www.csszengarden.com/
http://www.wannabegirl.org/css/
http://tantek.com/CSS/Examples/
http://www.saila.com/usage/layouts/
http://www.bluerobot.com/web/layouts/
http://www.benmeadowcroft.com/webdev/
http://nemesis1.f2o.org/templates.php
http://www.xs4all.nl/~apple77/columns/
http://www.meyerweb.com/eric/css/edge/
http://www.htmler.org/tutorials/3/1.html
http://css.nu/articles/floating-boxes.html
http://webhost.bridgew.edu/etribou/layouts/
http://www.roguelibrarian.com/lj/index.html
http://css-discuss.incutio.com/?page=CssLayouts
http://ecoculture.com/styleguide/r/rollovers.html
http://thenoodleincident.com/tutorials/ ... index.html
http://www.webreference.com/authoring/s ... /advanced/

pure css menus
http://www.meyerweb.com/eric/css/edge/menus/demo.html

Fast rollovers:
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

centering
http://dorward.me.uk/www/centre/
http://www.w3.org/Style/Examples/007/center.html
http://www.student.oulu.fi/~laurirai/www/css/middle/

master compatibility charts:
http://centricle.com/ref/css/filters/
http://www.blooberry.com/indexdot/css/index.html
http://macedition.com/cb/resources/abri ... pport.html
old:
http://www.immix.net/html/CSSGuide.htm
http://devedge.netscape.com/library/xre ... s-support/

hiding CSS from crappy browsers:
http://diveintomark.org/safari/csshacks/
http://www.ericmeyeroncss.com/bonus/trick-hide.html
http://www.w3development.de/css/hide_css_from_browsers/

cascading style sheets, level 1 specification
http://www.w3.org/TR/REC-CSS1

cascading style sheets, level 2 specification
http://www.w3.org/TR/REC-CSS2/

Got this great list of resources from Brucie, usenet group: comp.infosystems.www.authoring.stylesheets

Cheers

woah, big list of links! I've been looking at some of them recently, and some of them are quite advanced lol. Have you got a secret stash of useful links that you've been hoarding jrzycrim?

There is no filesize limit on a css file as far as I'm aware. It's the same as external images. You can have a 3Mb image on your page and it will still display. Bear in mind that the stylesheet is plain text, so large ones will be <2KB, and an enormous one maybe 5kB. Both of these filesize will load very quickly even over dial up.

Size isn't really an issue with css in download time, but your main concern is making it manageable and editable.

I have just learned how to do css layouts and wish I learned it a few months ago. Have a look at some of the layouts sites above. However some of the sites listed above detail techniques that are to advanced for IE to handle, so possibly best to keep this in mind and skim over them for a little while.

In terms of the filters, in real terms you can live without them. For a site like yours, the shadow filter could be reproduced using an image. But like you said, it's not that important if your css validates, but it's always best to try

I thought it was time time to break out the big list.

I didn't think css size would be an issue. You can fit many rules inside of 5Kb. I did a search on google and ran across a forum on which css file size was being discussed. Specifically, what's the largest css file you have ever created. Someone said 22kb. That's huge!

You're right about some of the layouts being advanced. Some are simple and will work across most browsers. The Pure CSS Menus don't work in IE.

For now I'm just sticking to simple layouts or letting my content flow normally and use css to style elements. You can do good looking pages with simple layout and presentation. Plus it's easier to maintain compatibility across different browsers.

Cheers,

its huge for a text file but how long to download.....



Those css menus are great, as is the complex spiral.

I've only really got into the css layouts, but its fantastic, I find it so much easier. I'm just embarking on a really detailed study of all the techniques I have learned, extending and adapting in places. So much to learn.....

BTW: what is the quote, it strikes very true at the moment with the amount I'm learning!

22kb text file shouldn't take very long at all. Of course, if you have a css file that big, odds are there is a lot of content to download as well.

I wish some of the more advanced css worked in IE. The stuff on Eric Meyer's site is great. If you get the chance, check out his book, Cascading Style Sheets, The Definitive Guide. It's excellent.

That quotes definitely applies to me. Sometimes I feel like I know just enough to be dangerous. It's from a fantasy series by Stephen R. Donaldson. 'The Chronicles of Thomas Covenant the Unbeliever'. That's a three book series. Actually, the quote is from the Second Chronicles... another three book series. Anyway, it's a fantastic read. If you like fantasy, you'll love this. Even if your not into fantasy but do like to read, The Chronicles of Thomas Covenant is one of those stories that transcend any particular genre.

Sorry, didn't mean to ramble on about it. I do love those books...

Cheers

I second that and it really is, it takes you through all the cmopatibillity issues. If oyu can justify the cost of reference books this is definately one to get.

For some reason I'm getting a javascript error everytime I roll over your left-side navigation bar. You might want to look into this.

I get an error as well. Didn't notice that yesterday when using firefox. Guess it's suppressing the errors.

Description: Object expected
Source: http://www.futurecorps.net/00.htm
Lines 19, 22, 25, 28, 31 onmouseover="clearFade()"

Seems that the function 'clearFade()' isn't defined anywhere in your scripts.

I just had scan through the script files and couldn't see it. This error wasn't there before?

First of all, thanks to you all for the help!!

I was working on my site last night and the errors happened then too... However, i have fixed the problem! I forgot to add the script link into the head of my page doh!



NEVERMIND...

Right then, off to study CSS

I don't get the errors now but I do not see anything happening when I hover over your left side nav links. In firefox, the top menu links are gone.

In IE, the top menu is working but things seem really sluggish. Scrolling of the main page seems sluggish as well.

Do you have the same problem or is it just me?

Maybe it because of the duration? I'm not really sure. I never really played around with these MS filters before.

Cheers,

Yeah, nothing is supposed to happen when you hover over the links on the left. Through the site i have fading links like the ones on this site. If the links on the left menu fade then they can't be viewed properly because of the netted image thingy... So, i just kept them white and therefore, clear! View this page to see what i mean... http://www.futurecorps.net/mp3s.htm (page not finished)

As for the sluggish top menu... I had a load of stick from when i asked for the page to be reviewed. People said the same as you. After studying the menu for some time, i have decided to make it better or... faster! I have taken away the fade and .jpg... It works fine now! I'll upload the updated version in a few mins! I might change it again in the near future though...

I think the menu can't be viewed in other browsers because of the fade.

It's early days...

Thanks for the replies!!