Foros del Web » Creando para Internet » HTML »

Error en css o Link a css?

Estas en el tema de Error en css o Link a css? en el foro de HTML en Foros del Web. Hola buenas, quería explicaros mi problema. Soy principiante en esto de webs, pero me encuentro en que tengo una página que voy a comenzar, y ...
  #1 (permalink)  
Antiguo 07/01/2012, 05:09
 
Fecha de Ingreso: enero-2012
Ubicación: Segovia
Mensajes: 8
Antigüedad: 12 años, 6 meses
Puntos: 1
Error en css o Link a css?

Hola buenas, quería explicaros mi problema.
Soy principiante en esto de webs, pero me encuentro en que tengo una página que voy a comenzar, y mi sorpresa es que tengo algún error o fallo en el css, porque solo chrome me lo reconoce y el resto nada ni ff ni ie.
Pongo aquí los trozos de código por si alguien me sabe decir donde esta fallando.
La página basicamente tiene unas capas de posicionamiento, para luego rellenarlas y un menu tipo acordion.
Decir que en chrome se ven los colores de las capas, las posiciones, y el menú funciona perfecto. Es en el resto que no se ve nada de los estilos.

Código:
<!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=utf-8" />
<title>Documento sin título</title>
<link href="./css/estilo1.css" rel="stylesheet" type="text/javascript" />
<link href="./css/menu.css" rel="stylesheet" type="text/javascript" />
<script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery.accordion.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
                $(function(){
                $('#menu').accordion();
                });
            </script>
</head>
<body>
<div id="total">
	<div id="cabecera">cabecera</div>
        <div id="menulateral">
            	<ul id="menu">
                    <li><a href="#">Catálogo</a>
                        <ul>
                            <li><a href="#">Añadir</a></li>
                            <li><a href="#">Buscar -></a>
                                <ul>
                                    <li><a href="#">Subsubmenu 1</a></li>
                                    <li><a href="#">Subsubmenu 2</a></li>
                                    <li><a href="#">Subsubmenu 3</a></li>
                                    <li><a href="#">Subsubmenu 4</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Submenu 3</a></li>
                            <li><a href="#">Submenu 4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 2</a>
                        <ul id="open">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                            <li><a href="#">Submenu 4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 3</a>
                        <ul>
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                            <li><a href="#">Submenu 4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu sin submenu</a></li>
                 </ul>
        </div>
    		<div id="contenido">contenido
            </div><br />
   				 <div id="pie">pie
                 </div>
</div>
</body>
</html>
Estilo1.css:
Código:
@charset "utf-8";

/* Capas */
#total{
	float:left;
	position:relative;	
	height:100%;
	width:100%;	
	background-color:#000;
	min-height:100%;
}
#cabecera{
	position:relative;		
	margin-left:auto;
	margin-right:auto;
	width: 900px;
	height:100px;
	background-color:#0F0;
}
#menulateral{
	float:left;
	position:relative;
	width:auto;
	height:auto;
	margin-left:200px;
	background-color:#00F
}
#contenido{
	float:left;
	position:relative;		
	height:auto;
	width:1050px;
	padding-right:300;
	background-color:#F00;
}
#pie{
	position:relative;	
	height:85px;
	width:900px;	
	background-color:#FF0;
	margin-left:auto;
	margin-right:auto;
}
Menu.css:
Código:
@charset "utf-8";
/* CSS Document */
		
		p a:hover{ color: #2961A9;}
		#menu{
			-moz-border-radius:5px;
			-webkit-border-radius:5px;
			border-radius:5px;
			-webkit-box-shadow:1px 1px 3px #888;
			-moz-box-shadow:1px 1px 3px #888;
		}
		#menu li{border-bottom:1px solid #FFF;}
		#menu ul li, #menu li:last-child{border:none}
		#menu ul li li{padding-left: 10px;}
		a{
			display:block;
			color:#FFF;
			text-decoration:none;
			font-family:'Helvetica', Arial, sans-serif;
			font-size:13px;
			padding:3px 5px;
			text-shadow:1px 1px 1px #325179;
		}
		#menu a:hover{
			color:#F9B855;
			-webkit-transition: color 0.2s linear;
		}
		#menu ul a{background-color:#6594D1;}
		#menu ul a:hover{
			background-color:#FFF;
			color:#2961A9;
			text-shadow:none;
			-webkit-transition: color, background-color 0.2s linear;
		}
		ul{
			display:block;
			background-color:#2961A9;
			margin:0;
			padding:0;
			width:130px;
			list-style:none;
		}
		#menu ul{background-color:#6594D1;}
		#menu li ul {display:none;}
  #2 (permalink)  
Antiguo 07/01/2012, 05:34
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 1 mes
Puntos: 539
Respuesta: Error en css o Link a css?

Erróneo:
Cita:
<link href="./css/estilo1.css" rel="stylesheet" type="text/javascript" />
correcto
Cita:
<link href="./css/estilo1.css" rel="stylesheet" type="text/css" />
Tampoco es necesario/obligatorio que encabece sus hojas de estilo declarando el charset y/o tipo de documento (ya se que esto va a suscitar discrepancias).
  #3 (permalink)  
Antiguo 07/01/2012, 05:42
 
Fecha de Ingreso: enero-2012
Ubicación: Segovia
Mensajes: 8
Antigüedad: 12 años, 6 meses
Puntos: 1
Respuesta: Error en css o Link a css?

EDITO: Ya lei que es en hojas de estilo, entonces es mejor borrar eso y no poner nada no?
  #4 (permalink)  
Antiguo 07/01/2012, 05:48
 
Fecha de Ingreso: diciembre-2011
Mensajes: 14
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Error en css o Link a css?

En HTML5, tanto en la etiqueta <script> como en <link>, el atributo type es totalmente innecesario aunque si no me equivoco, creo que tampoco lo es en anteriores versiones de HTML.

Saludos.
  #5 (permalink)  
Antiguo 07/01/2012, 05:59
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 1 mes
Puntos: 539
Respuesta: Error en css o Link a css?

Cita:
Iniciado por amgc Ver Mensaje
En HTML5, tanto en la etiqueta <script> como en <link>, el atributo type es totalmente innecesario aunque si no me equivoco, creo que tampoco lo es en anteriores versiones de HTML.

Saludos.
Dóblemente erróneo.
En html5 (el Sibilino) es como el gato de Schrödinge. Puede que sí, puede que no, pero lo más seguro es que quién sabe.
Relativo a anteriores especificaciones de html (incluido el xhtml) haga la prueba y valide el documento.

Lo que sí que no puede hacer, por lógica, es decirle al navegador que un tipo de documento, ya sea css o script, es lo que no es. No puede ser nada bueno andar engañando a los navegadores. Lo mismo alguno se mosquea y decide engañarle también. Ya sabe. Amor con amor se paga.
  #6 (permalink)  
Antiguo 07/01/2012, 10:47
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 15 años, 10 meses
Puntos: 187
Respuesta: Error en css o Link a css?

Vamos por parte, HTML 4.01

Tag Script, el type es obligatorio, ver en: http://www.w3.org/TR/html401/interac....html#h-18.2.1
Cita:
<!ELEMENT SCRIPT - - %Script; -- script statements -->
<!ATTLIST SCRIPT
charset %Charset; #IMPLIED -- char encoding of linked resource --
type %ContentType; #REQUIRED -- content type of script language --
src %URI; #IMPLIED -- URI for an external script --
defer (defer) #IMPLIED -- UA may defer execution of script --
>

Tag Link, el type es no obligatorio, ver en: http://www.w3.org/TR/html401/struct/links.html#h-12.3
Cita:
<!ELEMENT LINK - O EMPTY -- a media-independent link -->
<!ATTLIST LINK
%attrs; -- %coreattrs, %i18n, %events --
charset %Charset; #IMPLIED -- char encoding of linked resource --
href %URI; #IMPLIED -- URI for linked resource --
hreflang %LanguageCode; #IMPLIED -- language code --
type %ContentType; #IMPLIED -- advisory content type --
rel %LinkTypes; #IMPLIED -- forward link types --
rev %LinkTypes; #IMPLIED -- reverse link types --
media %MediaDesc; #IMPLIED -- for rendering on these media --
>
En cambio en HMTL 5:

Tag Script,el type es no obligatorio, si el script que se agrega es javascript, en cualquier otro caso se convierte en obligatorio ver en: http://www.w3.org/TR/html5/scripting-1.html#script
Cita:
When used to include dynamic scripts, the scripts may either be embedded inline or may be imported from an external file using the src attribute. If the language is not that described by "text/javascript", then the type attribute must be present, as described below. Whatever language is used, the contents of the script element must conform with the requirements of that language's specification.

[...]

The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is "text/javascript".
Tag Link, el type es no obligatorio ver en: http://www.w3.org/TR/html5/semantics...e-link-element
Cita:
The type attribute gives the MIME type of the linked resource. It is purely advisory. The value must be a valid MIME type.

For external resource links, the type attribute is used as a hint to user agents so that they can avoid fetching resources they do not support. If the attribute is present, then the user agent must assume that the resource is of the given type (even if that is not a valid MIME type, e.g. the empty string). If the attribute is omitted, but the external resource link type has a default type defined, then the user agent must assume that the resource is of that type. If the UA does not support the given MIME type for the given link relationship, then the UA should not obtain the resource; if the UA does support the given MIME type for the given link relationship, then the UA should obtain the resource at the appropriate time as specified for the external resource link's particular type. If the attribute is omitted, and the external resource link type does not have a default type defined, but the user agent would obtain the resource if the type was known and supported, then the user agent should obtain the resource under the assumption that it will be supported.

User agents must not consider the type attribute authoritative — upon fetching the resource, user agents must not use the type attribute to determine its actual type. Only the actual type (as defined in the next paragraph) is used to determine whether to apply the resource, not the aforementioned assumed type.
Como siempre, en caso de dudas, hay que recurrir a la especificacion

Etiquetas: css, link
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 13:14.