scriptygoddess

1 | Lynda

May 1st, 2002 at 9:46 am

Awesome article Kristine!

2 | Christine

May 1st, 2002 at 12:09 pm

Thank you from the CSS clueless peanut gallery!

3 | sasha

May 1st, 2002 at 2:57 pm

this would be more efficient:

.nav { background-color:black; color:white; padding: 10px; border: solid 1px white; text-align:center;}

.nav a, a:link { color:#FF9999; border:none;}
.nav a:visited { color : #990000;}
.nav a:hover, a:active { background-color: #990000; color: black;}

and then your html looks like this:
<div class="nav">
<a href="twinkle.html">twinkle </a>
<a href="star.html">star </a>
<a href="moon.html">moon </a>
</div>

in opera 6, your css doesn't display properly because the links are getting the nav class applied twice to them, giving them an extra 10px padding. this causes your black/red bg from the links to overlap the white border along the bottom. the css I wrote does not do this.

4 | kristine

May 1st, 2002 at 8:06 pm

Although I don't have opera 6 to test this, the effect I was going for doesn't work with the alternate coding that you showed, Sasha – only the words change color, not the whole bar behind it. Which is probably why I've always done it with the class in both places.

It would sure be nice if all browsers rended the same way! I'm seeing what I was wanting to see in both IE 6 and N6, as well as Opera 5.

5 | sasha

May 1st, 2002 at 9:46 pm

never mind the fact that Opera 6 is one of the most standards complaint browser…

if you use this class, it gets rid of the overlapping black at the bottom on the links:

.nav a, a:link { color:#FF9999; border:none; padding: 10px }

it still leaves the bg color overlapping.

6 | kristine

May 1st, 2002 at 9:54 pm

Not to be argumentative, but I thought I'd try one more time to explain myself….
Once everyone who is designing uses Opera 6 as their testing browser, it would make sense to change the coding in my tutorial to match it. Since IE 6, Netscape 6, and Opera 5 together make up almost the entire browser share (for me personally its 99%), and this code works there, I still abide by the code because it works in most browsers. Sorry, next time I'll put a disclaimer.

7 | Lynda

May 1st, 2002 at 10:44 pm

I hadn't really looked at the tutorial much before (heh) but, um…

well, we all know how I feel about standards compliance. And I don't really feel that workarounds are ever good and especially bad coding practices aren't good either.

I'd think a true designer would be in a constant struggle between getting something to function right on the majority of browsers (which may include a SLEW of bad code) and becoming standards compliant so maybe one day they no longer have to think about workarounds

It seems to me, when TEACHING others to code, it would be as standards compliant and correct as possible.

Unless you're like me, someone who doesn't know what she's doing with PHP trying to spit off code to something. hehe.

I always tend to code for the latest versions of IE, Netscape (thank God for v.6!) and Opera. One can't possibly code for all versions of everything, so it's best to code for the most recent.

I don't mean AT ALL to come off snotty. I'm tired and I might be coming off as cranky.

I think my point is just that – with SO MANY freaking browsers out there, it's impossible to please everyone and EACH designer has to set his/her own priorities.

8 | kristine

May 1st, 2002 at 11:10 pm

But, I don't think I am being uncompliant. I'm nesting some navigation elements inside of a div. And then giving them a class that's different from that of the rest of the page.

9 | Lynda

May 2nd, 2002 at 7:14 am

Kristine,

I'm not positive adding the classes to nav is uncompliant, I don't think it is, but I know it's not a good practice, especially when they're already technically under the nav tag.

In the latest version of CSS at least, the only a tags that are supported are "a" and "a:hover" and trying to apply properties to anything else will not validate.

I'm just curious, have you ever tried running your css through a validator? The purpose of validators are not to thwart your efforts, but to make it so your site IS viewable to the most amount of people with compliant (or semi-compliant) browsers.

10 | Christine

May 3rd, 2002 at 11:34 pm

Kristine-y! Thank you for sharing that! It helped me out from getting a perspective on tag order – I'm still *very* CSS clueless. It took me a weekend and a migraine to skin my site and get the CSS in there, and even now my head starts to throb when I think about doing things like that nav!

11 | Gaile

May 4th, 2002 at 2:26 am

Out of curiousity (after reading all the comments) I ran the page in question thru the W3C CSS Validator and it does validate. Ironically the HTML doesn't (no document type declaration).

It is impossible to please everyone, but I think Kristine's article was very nicely written and will help anyone new to CSS or possibly those who are hesitant to give it a try. This type of tutorial-like article is not the easiest thing to write, but Kristine has done a good job of writing something that is clearly laid out and easily understood.

Congratulations, Kristine!

12 | Lynda

May 4th, 2002 at 7:46 am

I think Kristine did a great job on it. God only knows I suck at writing tutorials.

I was just feeling ultra argumentative the other day – hey kristine, I apologize for that.

I don't know where I came up with only a and a:hover being valid. I know I've come across it before, but God only knows where or why.

This ALL being said – I make sure my html is valid but only go through my CSS once in a blue moon to make sure it's valid. I have run into cases where invalid CSS does pretty darn freaky things.

So – I'm eating my words (won't be the first time. hehe)

13 | kristine

May 4th, 2002 at 12:44 pm

Thanks Christine and Gaile I'm really glad you got something out of the article – I was really honored to be able to write for this newsletter, and about something I love so much?!

Lynda, apology accepted. I think sometimes just agreeing to disagree will make for more fun over here!