SITE REVIEW: CSS usage / style check - beta

I would like it if someone who is experienced with CSS could take a look at my project and critique my CSS usuage and format/etc.

I also welcome comments on the design - under development - beta.

The layout:

http://www.lineleeder.com/bluesprings/layout.htm

The CSS:

http://www.lineleeder.com/bluesprings/styles/blueSprings.css

This is my first real attempt at heavy css use. I've only used them to format links and such in the past. CSS Zen Garden inspired me to learn...

How'm I doing?

Wow, someone actually looking for a code review

Well, it's all looking mostly good. Cross browser as much as I can tell on my work comp. Your smantics are good (p tags, headers,lists of links etc), so it all looks good on text browsers as well. There is nothing sticking out about the css file, and it seems pretty hack-free too, so well done on that one.

having a look here. Overall everything is neat and tidy, ~45% text is a nice figure. And all the structural stuff looks really slim too although you seem to have a superfluous div in a div down the bottom of the page and I can't work out why.

You are suffering from the IE double margin float bug type thing with the related links box, which can be hacked out by making it display:inline;

You might want to use % font sizes for accessibility. The layout seems to work fine with in Firefox with a text zoom, so using % will allow it to work iin IE as well.

If you are going to be using borders and padding (esp the latter) then it would be worth looking into the tantek celic box model hack, for compatibility with IE5.

Next steps: lose the table and maybe try some xhtml

Nice work

Wow - thanks! Few questions since I'm actually going to try and learn from your reply You seem to know your stuff...

1. Why % for accessability?
2. display:inline; - use that in ADDITION to display:block; ?
3. Talk to me about xhtml - please?
4. Regading the "tantek celic box model hack" - due to a post I read somewhere I've developed a fear of "hacks" as they may present unforseen cross-browser compatability issues. How does one know when a hack is good to use or when it just "duct tapes" the problem?
5. What's the difference between ".cssStyle" and "#cssStyle" ? is it a preference thing? The tuts I've been learning from seem to vary on which format they use - reason?
6. Please recommend some CSS resources if you know any you like.


I greatly appreciate your time - and thanks for providing me with intelligent insight.

5. # is an ID selector while . is a class selector - An ID can only be used once, while a class can be used as much as you want.

Does that mean if I create

.style

I can apply it to anything while if I create

#style it can be applied only to one specific div?

I think I got that right... why, then, would I not just make them all .'s?

Sorry if it's a newbie question - think I'm getting a grasp of css but the basics aren't obvious to me yet...

That's right. And many people _do_ use all classes. Id's mainly have their use as anchors for links to reference and for javascript. If you happen to have an ID on an element (and only plan to use that style once, say, if the element were a navigation menu, or a container for the textual content of a document), you might as well keep it as an ID attribute.

Sometimes I use id's just to be cute with my code, arrogantly implying (to anybody who happens to look) that I am certain I won't need the style applied anywhere else.

Additionally, some people claim that using id selectors in their CSS makes it easier to read.

Sorry for my tardiness, I have not been visiting these forums much lately. So:
Because if you use px, then users of internet explorer cannot resize your text. Not everyone has perfect eyesight, so you need to let them be able to resize your text, else they can't read it

Good, too many people rely on hacks too much. The problem is that most browser hacks use one (typically a parsing) bug to correct a (typically formatting/displays) bug. The problem occurs when the next version of the browser comes out. If both bugs are still present, then you are ok. If both are fixed then you are ok, but what if only ONE of the two bugs are fixed?

The tantek Celic hack IMO is safe. IE 5 has both bugs, but IE6 has neither. I would consider it safe to assume that future versions of IE will have neither bug. At the moment this is the ONLY browser tricking hack that I am happy about using.

Just display:inline on it's own. Yup it's a hack and I would avoid it where possible. However, it's relatively safe, the worse that could happen is that future versions of IE might display it the way it displays in IE6 now

If you know html, take a half hour (thats all it will take you) to read the following, as w3schools can explain far better than I can:
http://www.w3schools.com/xhtml/default.asp

Yeah, what Sam said. Personaly, I use the ID's for my structural divs. If I have a nav column and a content column, the chances I will not never multiple instances. I rarely use classes at all, and tend to group elements using the DOM, there is a good article by Eric Meyer on the subject. I'll dig it out when I get a moment.


My linky bits page, it's a little slim at the moment (I always forget to bookmark stuff so I have to search for it again later lol) but there are some handy sites listed:
http://www.caffeinefuelled.net/resources/

I'm trying to collect as much info as I can on my site, although maintenance has been neglected for the past month or so, for personal reasons.

I see a lot of this:
You can replace that and make it: and you will get the same thing. Same for a little further down the CSS when you make the font-weight: bold. You can make it bold by changing the 3rd normal to bold, bolder, lighter, or a weight from 100-900. I wouldn't use the 100-900 setting because the visitors computer must have weighted-fonts available.

And as for a good CSS resource, I would go for "DHTML and CSS for the World Wide Web" by Jason Cranford Teague. It explains every bit of CSS in detail and has a reference chart at the back that even tells you what browsers are compatible with each property. $21.99 is the sticker price!

well , i'll be honest that your site made me a good impresion.i don't especially agree black color but you made a good job
good luck
valentin
http://www.tempodesign.tk