No carga el archivo .css

juanplayer · #1 (**permalink**) 06/02/2011, 19:59

Buenas a todos!

Estoy creando una web en html y css, de momento, pues bien es la primera vez que voy a utilizar un archivo .css externo y me parece que no lo voy a hacer...

A ver, yo llamo a mi archivo .css en mi index.htm dentro de la etiqueta <head>:

<link href='contenidos/css/styles.css' rel='stylesheet' type='txt/css' media='screen'/>

El .css está dónde dice el enlace, en una carpeta llamada contenidos, dentro de otra llamada css y contiene lo siguiente:

body
{
background-color: #000000;
}

a
{
font-family: verdana;
color: #c69e80;

}

.pie
{
font-family: verdana;
color: #c69e43;
font-size:9px;
}

Bien, pues Google Chrome es el único navegador que muestra los estilos, Mozilla e IExplore (no he probado mas) no muestran ninguno y no se por qué puede ser, le he dado muchas vueltas y no tengo ni idea de que puede ser.

Necesito ayuda por favor!

Muchas gracias de antemano.

sanxuan · #2 (**permalink**) 06/02/2011, 21:27

Deberías encerrar el valor de los atributos de las etiquetas entre comillas dobles:
<link href="contenidos/css/styles.css" rel="stylesheet" type="txt/css" media="screen"/>

Si aún no te fuciona, prueba a validar tu código en http://validator.w3.org

juanplayer · #3 (**permalink**) 07/02/2011, 09:12

Ya he corregido lo de las comillas y lo he pasado por el validator, me ha dado algunos errores que he corregido pero que no tenian nada que ver y el problema continúa, los navegadores siguen haciendo caso omiso del archivo .css

Gracias de todas maneras Sanxuan.

A ver si alguien sabe que puede ser.

sanxuan · #4 (**permalink**) 07/02/2011, 09:50

Entonces sólo puede ser un problema con la ruta. Asegúrate de tener en la misma carpeta que tu index.htm otra carpeta que se llame contenidos. Si usas mayúsculas en el nombre de la carpeta debes incluirlas también en el enlace.
Dentro del directorio contenidos debes tener otra carpeta que se llame css, y en ésta un archivo que se llame style.css y que contenga tu CSS.
No hay posibilidad de equivocación. Yo he cometido muchos errores al comienzo por incluir espacios en el nombre de archivo, por no coincidir las mayúsculas del archivo con las del enlace... etc.
Dudo que estés usando un navegador que no permita el uso de CSS.
Comprueba también que estés declarando el tipo de documento HTML mediante <!DOCTYPE>.
Si nada de esto funciona, coloca en tu comentario el HTML y el CSS completos y dinos qué navegador y qué versión usas. Sin eso no podemos comprobar tu código y encontrar los posibles errores.
Saludos.

C2am · #5 (**permalink**) 07/02/2011, 11:19

Publica un link a tu web así vemos cual es el problema.
Saludos

juanplayer · #6 (**permalink**) 07/02/2011, 20:15

El archivo esta en la ruta a la que hago referencia en href: contenidos-->css-->aquí esta styles.css, pero bueno lo he puesto en la raíz, donde está index.htm y sigue haciendo lo mismo.

Pego aquí todo el código de mi index.htm, porque no tengo alojada la web todavía:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Enigma. Peluquería y Estética</title>
<link href="styles.css" rel="stylesheet" type="txt/css" media="screen"/>
</head>

<body>

 
<table style="width: 500px" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="left">
<img width="300" src="contenidos/img/logo.jpg" border="0" alt=""/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="center">
<img height="20" src="contenidos/img/inicio2.jpg" border="0" alt=""/>
</td>
<td align="center">
<a href="contenidos/servicios.htm">
<img height="20" src="contenidos/img/servicios.jpg" border="0" onmouseover="this.src='contenidos/img/servicios2.jpg'" onmouseout="this.src='contenidos/img/servicios.jpg'" alt=""/>
</a>
</td>
<td align="center">
<a href="contenidos/trabajos.htm">
<img height="20" src="contenidos/img/trabajos.jpg" border="0" onmouseover="this.src='contenidos/img/trabajos2.jpg'" onmouseout="this.src='contenidos/img/trabajos.jpg'" alt=""/>
</a>
</td>
<td align="center">
<a href="contenidos/productos.htm">
<img height="20" src="contenidos/img/productos.jpg" border="0" onmouseover="this.src='contenidos/img/productos2.jpg'" onmouseout="this.src='contenidos/img/productos.jpg'" alt=""/>
</a>
</td>
<td align="center">
<a href="contenidos/contacto.htm">
<img height="20" src="contenidos/img/contacto.jpg" border="0" onmouseover="this.src='contenidos/img/contacto2.jpg'" onmouseout="this.src='contenidos/img/contacto.jpg'" alt=""/>
</a>
</td>
</tr>
</table>

 

*Web optimizada para una resolución de 1024x768 px en Mozilla Firefox o Google Chrome, si no la ves <a target="_blank" href="http://www.google.com/chrome?hl=es">pulsa aquí</a>


</body>

</html>

Y el código de styles.css que esta en la misma carpeta que index.htm es el que posteé en mi primer comentario del tema.
Con Google Chrome 7.0.517.44 me funciona perfectamente, pero con Firefox 3.6.13 e IExplore 8 no funciona.

Muchas gracias por la ayuda prestada hasta el momento.

GAST0N · #7 (**permalink**) 07/02/2011, 20:27

Mira la primer linea de codigo que dejaste fue esta:

<link href='contenidos/css/styles.css' rel='stylesheet' type='txt/css' media='screen'/>

y cuando dejaste el codio completo dejaste asi:

<link href="styles.css" rel="stylesheet" type="txt/css" media="screen"/>

Mira la ruta de el archivo css... son distintas

juanplayer · #8 (**permalink**) 08/02/2011, 05:23

Si Gaston, es que he sacado el .css a la raíz, donde está index.htm, para ver si el problema tenía que ver con la ruta del archivo pero no es así.
Muchas gracias de todas formas.

GAST0N · #9 (**permalink**) 08/02/2011, 11:12

fijate si el nombre del archivo es styles o style quizas este mal escrito

juanplayer · #10 (**permalink**) 08/02/2011, 11:41

Por fin he encontrado mi pequeño gran fallo!
Mirad:
<link href="styles.css" rel="stylesheet" type="txt/css" media="screen"/>

No es txt/css es text/css:
<link href="styles.css" rel="stylesheet" type="text/css" media="screen"/></link>

Sabía que era algún fallo tontísimo, siento haberos dado el follón por tal tontería.

Muchas gracias a todos.