Posted by Nik Coughlin on 11/08/07 07:01

GTalbot wrote:
> On 7 nov, 23:44, "Nik Coughlin" <nrkn....@gmail.com> wrote:
>> I am halfway through writing a tutorial on image slicing for fluid
>> CSS layouts, I would love some feedback on what I've done up until
>> this point:
>>
>> http://nrkn.com/index.html
>
> Hello again,

Hi!

> You first declared
>
> ol {font-weight: bold;}
>
> in
>
> ol {
> color: #5ac90f;
> font-weight: bold;
> margin: 1em;
> }
>
> and ol span {font-weight: normal;}

You're right, I'm not quite sure why I did that :)

> ol span {
> color: #b95207;
> font-weight: normal;
> }
>
> (Notice here that you re-declare the color for the span instead of
> using inheritance. All you had to do is declare color: #b95207 for the
> ol element and that was it!)

Actually, the reason for declaring a color for the ol and then wrapping the
li content in a span is so that that the list markers have a different
colour to the list items. There *is* method to the madness! Some would say
that it's not worth having to have the extra markup just to have different
coloured markers, but I think it makes quite a big difference visually, so I
am willing to make that sacrifice.

> then used <strong> on 3 chunks of text (only 6 words)
>
> and then declared 7 <span> with font-weight: normal;.

Yeah, the font-weight thing is a cock-up.

> When debugging your code, I removed all that. Everything. And just let
> the 3 semantic <strong> for the 3 chunks of text (a grand total of 6
> words). I removed 7 non-semantic <span>, removed both font-weight
> declarations, remove 1 color declaration and replace the remaing one
> with #b95207, then removed the ol span CSS rule.
>
> Your CSS code is definitevly improvable, optimizable.

Yep, there are some rules that can be combined that I can see right off the
bat. Anything else off the top of your head that you've noticed is
particularly in need of improvement, or do you just mean combining rules
that are repeated?

> Also, this universal selector rule
> * {
> margin: 0;
> padding: 0;
> }
> is a clear sign of over-declaring, over-defining. The use of the
> universal selector is very rarely recommendable and is discouraged by
> many CSS gurus.

We will have to agree to disagree on this :) I like this a lot as it
equalizes the way browsers set margins and padding, which are different
between different browsers for different elements.

> By removing all margin and padding on all elements, you are later
> force to add them back almost everywhere (for almost all elements like
> p, li, headings, etc) instead of relying on browser default
> declarations.

I find with the layouts that I tend to do it's the opposite, I am always
turning margin and paddings *off* on multiple elements, and with the
universal selector I only end up turning them back on in a few places.

> Finally, regarding your question of disappearing list markers in MSIE
> 7, you need to increase the margin on the ol to at least 1.5em. I have
> created a reduced testcase showing this phenomenon, where the list
> markers disappear at around margin: 1.1em. IE has a particular way of
> displaying list markers..

Excellent, thank you very, very much!

> Regards and good luck,

Thanks again. I really appreciate you taking your time to discuss this with
me. It has been a pleasure, even if we disagree on some things!

[Back to original message]