My website - facelift

Mr Joshua

Mr Joshua

Mr Joshua

Soldato
Joined
18 Oct 2002
Posts
4,281
I've been trying to make my site html 4.01 compliant (with success!) and here is the test page - http://www.bobsnbits.34sp.com

I know this page looks ok in both IE6 and FF but haven't tested it with other browsers.

Do you think the CSS looks alright or is it clumsy?

Code: 
a:link 
{
		color: #111111;
		text-decoration: none
}

a:visited 
{
		color: #111111;
		text-decoration: none
}

a:hover
{
		color: #ff0000;
		text-decoration: none
}

a:active 
{
		color: #ff0000;
		text-decoration: none
}

a.nav:link
{
		color: #ffffff;
		text-decoration: none
}

a.nav:visited 
{
		color: #ffffff;
		text-decoration: none
}

a.nav:hover 
{
		color: #111111;
		text-decoration: none
}

a.nav:active
{
		color: #111111;
		text-decoration: none
}

TABLE
{
		border-collapse: collapse;
		border-color: #111;
		border-width: 1px;
		border-style: solid
}

#content 
{
		border: 0
}

td.main
{
		border-color: #111;
		border-width: 1px ;
		border-style: solid
}

p.big
{
		font-family: verdana;
		font-size: 10pt
}

p
{
		font-family: verdana;
		font-size: 8pt
}

Cheers for any help.
 
Last edited:
You can consolidate a lot of that code...

Code: 
a:link, a:visited, a:hover {
  text-decoration: none;
}

a:link, a:visited {
  color: #111;
}

a:active, a:hover {
  color: #ff0000;
}

a.nav:link, a.nav:visited { /* This line may need some jiggery-pokery, I can't remember the conventions for this */
  color: #fff;
}

a.nav:active, a.nav:hover { /* Same goes for this line */
  color: #111;
}

table, td.main {
  border: 1px solid #111;
}

#content {
  border: 0;
}

p {
  font-family: verdana;
  font-size: 8pt;
}

p.big {
  font-size: 10pt
}
It could be consolidated further, but I think that is a good compromise between making it easy to keep track of and making sure you're not repeating yourself.

Disclaimer: Pardon me if the above code is a bit wha-whacked out, I'm not in my CSS ninja mindset at the moment ;)
 
joeyjojo said:
I don't get that at all :confused:
Click to expand...
It's an easy way to remember how the order of the cascade affects certain pseudo-classes.

"Lord Vader, Former Handle Anakin"
Click to expand...
Reminds us that pseudo-class rules should always be written in the order:
Code: 
a:[B]l[/B]ink {..}
a:[B]v[/B]isited {..}
a:[B]f[/B]ocus {..}
a:[B]h[/B]over {..}
a:[B]a[/B]ctive {..}

As pseudo-classes all have the same specifity, they must be ordered correctly so that one rule doesn't override the other when two pseudo-classes clash. Prime example - :hovering over a :visited link.

If :visited appears after :hover, then the :visited rule takes precedence and the :hover rule would be ignored. :)
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom