Comments on: 8 Common CSS Mistakes and How to Fix Them

By: Emerson

Emerson — Thu, 10 Mar 2011 04:00:41 +0000

I genuinely appreciate blogs like these that not only provides data just to sell their item but also gives info that is practically helpful to the people who are concerned.

By: Ragesh

Ragesh — Wed, 05 Jan 2011 08:38:17 +0000

So nice… thank you very much…!

By: Brett Widmann

Brett Widmann — Thu, 04 Nov 2010 19:58:01 +0000

Very simple mistakes that can ruin the whole coding project! Thanks for putting together a list with some solutions.

By: Diseño Web Toledo

Diseño Web Toledo — Mon, 28 Jun 2010 09:08:51 +0000

Thx for sharing the tips.

css is simplicity

By: Rick

Rick — Fri, 21 May 2010 01:52:20 +0000

I totally agree with @Dan Hensby there is no right or wrong for font-size. I prefer to use pixels now as well since nested items will not inherit the parents size.

Also we need to remember it was recommended to use ems back when most browsers would not allow user to zoom text that was in pixels. Nowadays modern browser zoom entire pages.

Good article, thank you

By: Kim_Office_Team

Kim_Office_Team — Tue, 30 Mar 2010 23:23:41 +0000

@Rachel — I’m sure the community would really value hearing about your thoughts on converting from the Office Live WSYWIG to CSS. You can join the conversation at the Office Live page on Facebook, here: http://www.facebook.com/officelive.

Cheers,
Kim
Microsoft Office Live Outreach

By: Andy

Andy — Tue, 30 Mar 2010 12:04:02 +0000

Nice post, an interesting and educational read!

@David – I agree with your point of capturing a semantic meaning with the value of an id, rather than coupling it with presentation detail. I suppose in the post, a better id might have been “oddOneOut”, which captures the meaning that element conveys in the example.

A minor quibble that had me confused (an admittedly easy task ) for a sec:

“4: Ignoring shorthand … It goes as follows: top, right, bottom left. You can think of it as going counter-clockwise starting from the top…”

That ordering is clockwise rather than counter-clockwise no?

By: Dan Hensby

Dan Hensby — Sun, 28 Mar 2010 21:13:18 +0000

A nice article all round; however, I can’t say I agree with #6. Before I go further, I’ll say that I don’t think there is a ‘right’ or a ‘wrong’ way; people should choose what they like and keep consistent.

You justify em being better than px because 1em = 16px by default in FF. Thus, 1.5em = 24px, etc. So really, you are still addressing pixels, it’s the same as saying 16px or 24px, just not by name. The key difference I see is that ems are relative and pixels are absolute – so, if someone changes their default font size, then everything will scale. But, all modern browsers have zoom features that make ems unnecessary. In fact, the only thing I think IE6 gets ‘right’ is that when you use zoom, px don’t scale and ems do! (px are absolute, so should always be the defined size)

I use px to do all the measurements because it saves time with calculation. Not only do we not need to work out how many em for a 13px font size. Plus because it is relative to the element you are nested in, it gets even harder to manage and more complex. It’s essentially a maintenance nightmare because you can’t instantly look at the CSS file and see the font size and make sure it is correct according to the design.

eg: If we declare this rule ul,li,li a { font-size: 1.2em; } where 1em = 10px is the base in the ul, then the text in the anchor will be ~17px. but if we decide then wrap the UL in another div with the font size decoration of 1.2em, then the font size of a the anchor tag will be increased to ~21px which would be unintentional and a pain to debug.

By: Allen

Allen — Sat, 27 Mar 2010 17:43:19 +0000

“browsers from IE6 and up understand the new HTML5 doctype.” Are you sure about that? IE 6 was finished before HTML5 was dreamed up.

By: Paul Fleischanderl

Paul Fleischanderl — Fri, 26 Mar 2010 07:42:56 +0000

nice article! realy!

BUT: #6 was not in mind when you create this theme?