more valid than the "shadows" created by fancy, which have no su

mmi — Sat, 29 Dec 2001 12:25:07 +0000

hey Mark - from downtown

Quote: * In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]).

from the blooberry patch

Quote: * Netscape 4.x and Opera 3.5+ do not allow CLASS or ID attributes to contain underscore characters ("_".) Underscores are legal in HTML atributes according to the HTML standards but not according to the CSS standard.

The Webmistress — Sat, 29 Dec 2001 10:04:13 +0000

Thanks Suzanne, I might get it all straight in my head one of these days!!

Another Q for the Queen of CSS

Mark Hensler — Sat, 29 Dec 2001 07:15:02 +0000

What characters are valid for class and id names?

I think I ran into a problem using the underscore (or maybe it was the dash)... So I try to stick to alpha characters.

Suzanne — Fri, 28 Dec 2001 21:24:47 +0000

link (underlined all the time & bold)

.bu {
font-weight: bold;
text-decoration: underline;
}

text description (normal text as per css above)

add td to your list of items:

p, td {
color: blue;
font-family: verdana, geneva, sans-serif;
font-size: 12px;
}

link (not underlined & not bold)

.nochange {
font-weight: normal;
text-decoration: none;
}

~~bold underlined link~~ and some regular text and another link.

Suzanne

The Webmistress — Fri, 28 Dec 2001 18:23:50 +0000

Ok, next question!

I want to have the following in a cell of a table which has the text set via css to be blue, veranda, 12pixels.

link (underlined all the time & bold)
text description (normal text as per css above)
link (not underlined & not bold)

How can I accomplish this using css? I'm getting very tied up in knots trying to get my head around this one!

mairving — Wed, 12 Dec 2001 20:01:00 +0000

Suzanne, I knew that you would have to get in on this. Seeing as how you are the Queen of CSS.

Take a morning off and look what happens!

Suzanne — Wed, 12 Dec 2001 19:13:03 +0000

You all go and discuss some of my favourite topics!

The first two methods that Mark and Megan demonstrated work cross-browser, the but the explicit a.class:pseudoclass is preferred because of inheritance issues with Netscape 4.x.

.class a:pseudoclass requires that the browser understand parent/child distinctions and it's better safe than sorry with Netscape 4.x...

I think this question (how to have links different in different places on the page) is THE most asked question for CSS.

Suzanne

mairving — Wed, 12 Dec 2001 16:47:42 +0000

According to proper CSS via here , the proper anchor pseudo-class would be:

<?php
A.external:visited { color: blue }

  <A CLASS=external HREF=\"http://out.side/\">external link</A>
?>

Now I suspect that some of the other variations would work but not cross browser. I generally do mine like so:

<?php
.nav     {
    text-decoration:none;
    font-weight: 900;
    font-size : 10px;
    color:#000099;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
.nav:active {
    text-decoration:none;
    font-weight: 900;
    font-size : 10px;
    color:#000099;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
.nav:link {
    text-decoration:none;
    font-weight: 900;
    color:#000099;
    font-size: 10px;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
.nav:visited {
    text-decoration:none;
    font-weight: 900;
    color:#000099;
    font-size: 10px;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    }                 
.nav:hover {
    text-decoration:none;
    font-weight: 900;
    color:#990000;
    font-size : 10px;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
        }
?>

The Webmistress — Wed, 12 Dec 2001 16:29:29 +0000

Yeah I did actualy realise I had spelt the bottom bottom wrong but at that point it still was working even when I changed it!!

Thanks for all your help

Megan — Wed, 12 Dec 2001 16:24:50 +0000

Hmmm... interesting... three different ways to do it here:

.bottom a:hover
a.bottom:hover
a:hover.bottom

Which is the correct way? Or does it matter? I use the second method.

Quote: That didn't work, well sort of did - changed the colour of the link but not the hover part! Here's my style sheet any way :

table { font-family: Verdana; font-size: 12px; color: #000066}
a { color: #6666CC; text-decoration: none}
a:active { color: #000066; text-decoration: underline}
a:hover { color: #99CCCC; text-decoration: underline}
li { list-style-image: url(1bullet.gif)}
.headers { font-family: Verdana; font-size: 12px; font-weight: bold; color: #FFFFFF}
a.bottom { font-size: 10px; font-weight: bold; color: #99CCCC; text-decoration: none}
a:active.bottom { color: #000066; text-decoration: underline}
a:hover.botton {color: #6666CC; text-decoration: underline}

When in doubt, check your spelling