Problemas con ejemplo divs CCTW

IMPORTANTE:Solo pasa en google chrome y en mozila firefox.

Hola todos, tengo el siguiente problema.
la dirección de la pagina del problema es la siguiente : ( http://chichichistes.comocreartuweb.es/plantilla.html)

Y miarchivo de estilos llamado "estilo-general.css" contiene las siguientes lineas de codigos.

1-* {text-indent:0px ; margin:0px ; padding:0px ; border:0px }
2-p {text-align:justify;}
3-h1 {font-size:1.2em; color:blue; font-weight:bold; text-decoration:underline; text-align:center;}
4-h2 {font-size:1.1em; color:blue; font-weight:bold; text-decoration:none; text-align:center;}
5-body {text-align:center;}
6-#global {width:800px; margin:4px auto;}
7-#curva-superior {background-image:url(objetos/curva-superior.gif);
8-background-repeat:no-repeat; width:800px; height:8px; overflow:hidden;}
9-#cabecera {background-color:white; border-left:black 1px solid;
10-border-right:black 1px solid; height:80px;}
11-#logotipo {width:280px; float:left;}
12-#publicidad {background-color:white; width:518px; float:right; margin-top:25px;}
13-#navegacion {background-color:gray; border: black 1px solid; height:20px;}
14-#navegacion li {float:left; list-style:none; margin:0px 20px 0px 20px;}
15-#navegacion ul{margin-left:180px}
16-#contenido {background-color:orange; border-left:black 1px solid; border-right:black 1px solid;}
17-#contenido p {padding:5px 10px 5px 10px; text-indent:15px;}
18-#menu {width:150px; float:left; text-align:left; margin:3px 10px 3px 3px; background-image: url(objetos/menu-parte-inferior.gif); background-
19-position:bottom; padding-bottom:5px;}
20-#menu li{list-style:none; margin:4px 20px 4px 6px;}
21-#menu h1{text-decoration:none; font-size:12px; background-image: url(objetos/menu-parte-superior.gif);}
22-#pie {background-color:white; border-left: black 1px solid ; border-right: black 1px solid;
23-border-top: black 1px solid; height: 65px ;}
24-#pie li {list-style:none; font-size: 12px;}
25-#pieuno {float:left; width:150px;}
26-#piedos {float:left; width:498px;}
27-#pietres {float:left; width:150px;}
28-#curva-inferior {background-image:url(objetos/curva-inferior.gif); background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;)
29-a {color: brown ; text-decoration: none ; display:block;}
30-a:link {}
31-a:visited {}
32-a:hover {color: red ; text-decoration:underline ; background-color: silver;}
33-a:active {}
34-#pie a {color: blue; text-decoration:none ; display: block }
35-#pie a:link {}
36-#pie a:visited {}
37-#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
38-#pie a:active {color:black}
39-#logotipo a {}
40-#logotipo a:link {}
41-#logotipo a:visited {}
42-#logotipo a:hover {background-color: white }
43-#logotipo a:active {}

CODIGO HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif" width="270"
height="80"alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li><li><a href="#">Sección 2</a></li><li><a href="#">Sección 3</a></li><li><a href="#">Sección 4</a></li>
</ul>
</div>
<div id="contenido">
<div id="menu">
<h1>Título de Sección 1</h1>
<ul>
<li><a href="#">Elemento de lista, 1</a></li><li><a href="#">Elemento de lista, 2</a></li><li><a href="#">Elemento de lista, 3</a></li><li><a href="#">Elemento de lista, 4</a></li>
</ul>
</div>
<h1>Esta será la zona principal de la web</h1>
<p>En esta zona de mi web debop escribir muchos parrafos para que sobrepase el menu.</p>
<h2>Aparte de todo</h2><p>tengo que aprender a ponerles margenes y algo que se llama sangia que no se para que sirve.</p>
<p>Bueno,parece que ya lo estoy logrando, me pondre manos a la obra con los nuevos temas.</p>
<p>Al parecer me hizo falta mas texto, por eso escribo esto que realmente no dice nada
que nos pueda servir a ti o a mi pero me sirve para llenar espacio :)</p>
</div>
<div id="pie">
<div id="pieuno">
<ul>
<li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos Enlazan</a></li>
</ul>
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li>
</ul>
</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>


Mis problemas son estos:

-En el menu lateral segun los codigos de "ejemplo con divs" de estados de los enlaces, de el archivo de estilos (lineas 29-33) , deberian ponerse grises los enlaces al ponerles el mouse ensima, cosa que ocurre en html-kit
pero no en internet, y ya he subido todos los achivos al hosting.
-Lo mismo sucede con los enlaces de el pie de pagina, que tienen tambien codigos de estados de los enlaces en el archivo de estilos(lineas 34-38)
-Por ultimo, en el programa html-kit, donde si aparecen los colores de los enlaces, solo se "colorea " hasta la parte escrita de el enlace, problema que CCTW decia solucionar aumentando el valor de el margin derecho, tal como lo hice en la linea 20. pero no funciona, quisiera saver por que no me funciona y que puedo hacer para mejorarlo.


MUCHISISISISISISISISIMAS gracias a todo los que me ayuden.
No creo que esto sea lo mas adecuado, ya que lo tendrias que poner en todas tus paginas que quieras que tengan el mismo efecto, pero pon el siguiente codigo entre las etiquetas <head> </head>:

<style type="text/css">
a { display: block;
}
a:hover { background-color: rgb(128, 128, 128);
}
#pie a:hover {color:black ;
text-decoration:underline ;
background-color: rgb(225, 225, 225);
}
</style>

Por alguna razon que desconozco, solo funciona en esa parte, no en la hoja de estilos.

Tal vez alguien mas sepa la forma correcta de arreglarlo.

Suerte!
no funciona, ya cambie el código y sigue pasando lo mismo en chrome y mozila ... alguien tiene la respuesta?????
hola
pega aqui todo el contenido de html
ya que veo que te faltan precisamente esa etiqueta
el abre de html

otra cosa
mira en en css

#curva-inferior {background-image:url(objetos/curva-inferior.gif); background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;)

esa etiqueta es el error que te da dolores de cabeza
deberia ser

}

saludos
ya subi todo el codigo html, y en la tarde voy a corregir lo de el corchete ... cualquier ayuda te la recivo ... gracias
Y a tengo la solución, borre todos los espacios en la definición de las características de los enlaces, lo cual fe la solución a mis problemas, gracias a los que se tomaron el tiempo de buscar una solución.
Entre en tu pagina y te falta ponerle titulo.
entre <tittle> y </tittle> tienes puesto page tittle que es lo que viene predeterminado, pon otra cosa.

Lo digo por si no lo sabias o no te habias dao cuenta