CSS Forum

**Rusalka** · 06-22-2007, 11:45 AM

I'm fairly new at using CSS but I can see the usefulness of the code immediately after implementing it. There's one problem that I don't understand. Here is my code:

Code:

<style type="text/css">


A:link    {
        color: #24A604;
        text-decoration: none;
        }
A:visited    {
        color: #24A604;
        text-decoration: none;
        }
A:hover    {
        color: #0055DA;
        text-decoration: underline;
        }
A:active{
        color: #0055DA;
        text-decoration: underline;
        }
TABLE.center{        
        text-align: center;
        color: #FFFFFF
        }
TR.header{
        text-decoration: underline;
        color: #ffffff;
        font-size: large;
        }
        
TR.even{    background: #000B4C; color:ffffff;
        }

TR.odd{        background: #0E4900; color:ffffff;
        }


</style>

I linked all my pages to this code. However, the "A:link" color code doesn't always work on my links. It's very odd, but when I place the code directly into the htm code instead of linking to the css file, the code works perfectly. Why is this?

**Learning Newbie** · 06-22-2007, 12:22 PM

Show the head section of the page? If the css works in a style block but not as an external css file, the first thing that jumps to mind is I wonder if you're not calling the css, or have a bug some browsers can deal with and others can't?

I don't know what it is, but I'm pretty sure the link, visited, and so on need to come in a specific order. Someone who knows more should come along and clear things up.

**Rusalka** · 06-22-2007, 12:28 PM

Code:

<head>

<script language="javascript" type="text/javascript" src="javascript/FadingRollovers.js">
</script>
<script language="javascript" type="text/javascript">
<!--
***
//-->
</script>

<link rel="stylesheet" type="text/css" href="styles.css">

<title>***</title>

<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="generator" content="(X)HTML-Format">
</head>

That's the head of all of my pages as of right now.

I was having the same problem with my contact page when trying to assign the same style to mailto: links. It seemed to work in Firefox but not Explorer. But, when I placed the code directly to the html document, the code worked then too. So maybe it's unavoidable to place the css code directly in the document?

**karinne** · 06-22-2007, 12:50 PM

Hmmm ... do you have this online?! Could we get a link?

**Rusalka** · 12:56 PM

Yes, well sort of. It's a dummy site and will be launched in a different place once I've all the extras set up (shopping cart, login, etc.) but this is the place:

www.koidiet.com

The site is noobalicious, have fun!

**karinne** · 01:16 PM

1- In your .css you don't put

Code:

<style type="text/css"> ... </style>

2- You need a DOCTYPE - preferably HTML Strict

3- "Some" browsers have a some issues with certain orders of certain things in the <head> (I've had this problem before with IE6 so I know)

So usually you want

Code:

<head>
   <title>...</title>
   
   <meta....>

   <link rel="stylesheet">

   <script ....>
</head>

4- You are using deprecated elements and attributes. If you want your site to work in all browsers, get rid of them and get on the Web standards band-wagon

here are a few links I've gathered over the years on "How to use CSS for layouts". This list has links to information on "why" you should use DIV/CSS for layouts and "how" to use them with tutorials and code.

Why
A better way to build your website
Why tables for layout is stupid: problems defined, solutions offered
Ten ways to speed up the download time of your web pages
Nested Tables: About the (ab)use of tables as layout tools in webpages.
Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS
Why go table free?
Why avoiding tables (for layout) is important
Throwing Tables Out the Window
Integrated Web Design: The Meaning of Semantics (Take I)

How
BonRouge's layouts
pmob.co.uk layouts
newguyinennis layouts
The Noodle Incident: CSS Boxes
glish.com - CSS Layout technique
bluerobot.com - Layout Reservoir
Alistapart - In Search of the Holy Grail
Alistapart - Creating Liquid Layouts with Negative Margins
Alistapart - Faux Columns

Books
Designingwith Web Standards (2nd Edition) by Jeffrey Zeldman
Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm
Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS by Dan Cederholm
CSS Mastery: Advanced Web Standards Solutions by Andy Budd, Simon Collison, Cameron Moll

There's a good start.

**Rusalka** · 06-22-2007, 01:15 PM

Thanks for the help! I'll get started right away changing up the page.