what does this do in a css file

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I am beginning to use css for my pages. Always only used simple html.

Now, when studying a css file from a homepage, I read:

"all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: bold 12px
arial; color: white; cursor: hand; z-index:100}"

What does this line do in a css file?

Any tips for a good tutorial on css online? Tips for beginners and advanced
are welcome.


Re: what does this do in a css file

Quoted text here. Click to load it

Simple HTML and CSS go together like coffee and pie. You'll enjoy it.

Quoted text here. Click to load it

It applies the properties within the brackets to any element with a
class of "clsMenuItemIE" and any element with a class of
"clsMenuItemNS". I am unsure if that is correct though, because
technically one rule is being applied to any element of "all" that has a
class of "clsMenuItemNS". In HTML, there is no element "all".

If one wants to apply the style to any element with a class of
"clsMenuItemNS", then the following is enough:

.clsMenuItemNS { ... }

So, what else is wrong with the above example.
- Font size specified in pixels; this will leave IE users out in the
cold who want to change a website's font size to their preference.
Better to specify in relative units (%, ems, keywords) or not specify
font size at all.
- When specifying color, also specify background color. Authors cannot
know what colors the visitors has by default (or set up himself, in a
User Stylesheet). And there is inheritance of CSS properties to keep in
mind as well. In a worst case scenario, the site ends up with white text
on a white background.
- Messing around with browser UI is not wise. Better to leave the mouse
pointer alone. It's not the author's, it's the visitor's.
- Specifying z-index only has effect when also setting the position
property to "absolute". That, however, may have been done in another CSS
rule, that you didn't quote here.

The quoted CSS suggests that the original author tries to hack around
different browsers, ignoring the fact that there are more than Netscape
and IE. Better not to hack, but to stick with webstandards (and some
trial and error practice with IE); the only thing close to a guarantee
of crossbrowser compatibility.


Re: what does this do in a css file

On Tue, 17 Aug 2004 18:50:52 +0200, Kris

Quoted text here. Click to load it

After having done this for the past few weeks (newbie opinion here), I
would have to say "a hell of a lot of trial and error with IE,
especially if testing more than one flavour of the POS". I have wasted
days just getting around IE-specific problems.

It seems half the things I want to implement don't work (or don't work
properly) on IE because of its broken or non-existent CSS support.
Mozilla and Opera give me a glimpse of how much faster web development
could be if the standards are followed, and I have a new-found
appreciation for them at a webmaster-level, aside from the better
browsing experience they offer.

I'm preparing "boycott IE" buttons to be placed on every page I slave
on as we speak.

Not really.
But I am very tempted at this stage...

Re: what does this do in a css file

Quoted text here. Click to load it

Only days? You must be new at this ;)

Seriously, I advise anyone new at CSS to use Mozilla or Opera to
experiment at first. 99% or so of the time, if it does something different
in IE than in Opera or Moz, it's IE's fault. However, we learn to do
things eventually in a way that avoids IE's hangups or can be backfitted
to allow lame little IE to limp through it in an acceptable fashion.

Quoted text here. Click to load it

Yee-hah! A few million more of you, we're all set.

Re: what does this do in a css file

Quoted text here. Click to load it

Yep. I always make sure I do the testing in Mozilla and Opera first.
If both those work and IE doesn't (which often happens), I can be
pretty sure my code is right. Or if both those show similar errors and
IE doesn't, it's most likely my faulty code.

Especially after discovering the Web Developer Toolbar extension for
http://www.chrispederick.com/work/firefox/webdeveloper /

Handy tool...

Site Timeline