CharlieMC (charliemc) wrote,
CharlieMC
charliemc

  • Mood:

Good Old CSS!!! (Cascading Style Sheets, that is)


I admit it. I'm still frequently confused by CSS...

But I just 'solved' a problem I was having at my website -- thankfully! And here's what it involved.

But first, if you've never visited the W3C website, you really should. So fascinating! (Clicking the banner below will take you there in a new window...)

W3C -- World Wide Web Consortium

Note to self: In linking, 'title' is the link equivalent of 'alt' -- it only works for text links, in other words, and not for image links! (duh)

A lot of boring FASCINATING code to follow, under the cut!

If you're writing the code to define font -- which is what the W3C describes as: 15.2.5 Shorthand font property: the 'font' property, then there's a certain order to the way you need to put everything. (duh)

But, seriously, you can't screw it up -- or your CSS won't validate.

Meaning it's bad code, plain and simple.

(And I could go into a long discussion about how much bad code is out there, but I won't bother -- considering a ton of it is mine! Ha, ha, ha... Yeah, the laugh is on me!)

For example, I had the following code in my style sheet:

body {
background: white;
color: #000000;
font: 13pt "arial", "helvetica", sans-serif;
margin: 0;
}
p { font: 13pt "arial", "helvetica", sans-serif; }
a:link {
text-decoration: none;
background: none;
color: #000000;
}
a:active {
text-decoration: none;
background: none;
color: #000000;
font: "arial", "helvetica", sans-serif;
}
a:hover {
text-decoration : none;
background : #90ee90;
color: #000000;
font: "arial", "helvetica", sans-serif;
}
a:visited {
text-decoration: none;
background: none;
color: #000000;
font: "arial", "helvetica", sans-serif;
}
a:hover {
text-decoration: none;
background: #90ee90;
color: #000000;
font: "arial", "helvetica", sans-serif;
}

I'm sure that those of you who are saavy with CSS will spot my error in a flash. But for those who -- like me -- are a little less knowledgeable concerning CSS, I'll gladly explain!

font: "arial", "helvetica", sans-serif;

The line above is missing the size property -- which means when you validate it you'll be told:
Value Error : font "arial" is not a font-size value : "arial","helvetica", sans-serif

And rightly so!

But here's what had me tearing my hair out...

I have various links on every page. And some of them are deliberately smaller than the average text on the page! So I was really confused. When I set the font size for my links to the default font size, then (obviously) the second you hovered any links that were smaller, they were all messed up!

So what the hell was the solution?

Well, I finally discovered it today. And it would never have occurred to me, even though it's fairly obvious, actually!

body {
background: white;
color: #000000;
font: 13pt "arial", "helvetica", sans-serif;
margin: 0;
}
p { font: 13pt "arial", "helvetica", sans-serif; }
a:link {
text-decoration: none;
background: none;
color: #000000;
}
a:active {
text-decoration: none;
background: none;
color: #000000;
font: 100% "arial", "helvetica", sans-serif;
}
a:hover {
text-decoration : none;
background : #90ee90;
color: #000000;
font: 100% "arial", "helvetica", sans-serif;
}
a:visited {
text-decoration: none;
background: none;
color: #000000;
font: 100% "arial", "helvetica", sans-serif;
}
a:hover {
text-decoration: none;
background: #90ee90;
color: #000000;
font: "arial", "helvetica", sans-serif;
}

You simply set the font size to 100%. Now that shows you how stupid I am, I guess!

I really (really, really) need to take a course on CSS. Frankly, I'm entirely self-taught -- which I realize isn't a bad thing. But I do struggle like mad over small things -- and I have to assume I'd do this less if I took an actual class...

I've considered it several times, but it's not really a convenient thing for me to do. And while I'm not down on online college courses, I have found them to be a bit out-dated, if I'm being honest... (Or, in other words, don't get me started about the HTML course I took years back!)

In other news, I do find I understand CSS well enough to do the design at MySpace just fine. Of course, I'm not trying anything too fancy there, to be honest. (smile)

So you want to go check out my MySpace account? Okay! Here 'tis: _charliemc

I was pleased to move the music player to the top/center (clever code, I think). I had it set to auto-play when someone came to the page, but I personally found that so damn annoying that I changed it back again. (If you're going back and forth to change your code -- or opening the page on a computer somewhere that you need quiet -- then that auto-play thing is maddening... Just my opinion, of course!)

And I'm kind of pleased with the way I've set up my 'Who I'd like to meet' section, too. In an ideal world, I'd be able to transport myself back in time to meet people who are now dead! And further, I'd be able to transport myself into fictional worlds where I could meet my fave fictional characters! (heh) Okay, that might not ever happen -- REALLY??? -- but I can dream, can't I?

(smile)

On that note, I need to get some actual work done, I imagine...

OH! And we're still having dreadful wintery weather here. Portland schools opened two hours early today, as a result. (Which did mean Marilyn mistressmarilyn got to go in late to work, so that was nice, anyway!)

Brrrrrrrrrr!

(Yes. I know we're spoiled by our mild weather here in Portland. But what the hell -- that's why we live here!!!)
Tags: 2007, css, february-2007, myspace.com
Subscribe

  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments