[SOLUCIONADO] CSS para firefox

[lktmaster]

Hola,

Ya se que este tema està más que remojado, lo siento por volverlo a sacar pero no encuentro justo lo que busco.

Hestoy haciendo una web, la he hecho comprobandola en chrome, terminada he mirado el resto de navegadores y cada cual salia diferente.

Al cabo de probar hacks y cosas, se ve bien en safari, chrome y explorer, pero no se como hacerle hacks para el firefox y opera, que no he encontrado. Como lo solucionais?

[lktmaster]

Opera solucionado

noindex:-o-prefocus, #tipetext {
margin-left:40px;
}

Me falta firefox... alguna alma caritativa

[lktmaster]

Firefox solucionado

#tipetext, x:-moz-any-link {
margin-left:25px;
}

Ahora solo queria saver si alguien save si me aceptan estos codigos las versiones anteriores de los navegadores. muchas gracias

Y disculpen las molestias

[BloodShadow]

Mira según lo que leo... has de tener desastroso tu html+css por que el firefox es uno de los mejores navegadores que sigue los estándares web de la w3c... no se por que tienes tantos problemas con el firefox... En lo personal, maqueto en mozilla y solo reviso en opera por que las ultimas versiones están algo tediosas.. y en el ie... pero los demás son de los que mas siguen los estándares y si el firefox se ve bien, se te vera bien en los demás...

[jomaruro]

Iniciado por lktmaster

Hestoy haciendo una web, la he hecho comprobandola en chrome, terminada he mirado el resto de navegadores y cada cual salia diferente.

¡¡Ahhh, mis ojos!!

[BloodShadow]

hahaha no me fije... quizás quiso decir "jestoy"

[jomaruro]

Más bien querría decir Estoy ¿no?

Saludos.

[BloodShadow]

Iniciado por jomaruro

Más bien querría decir Estoy ¿no?

Saludos.

si eso quería decir... y tu que querías decir ahí? xD

[ArturoGallegos]

Iniciado por lktmaster

Firefox solucionado

#tipetext, x:-moz-any-link {
margin-left:25px;
}

Ahora solo queria saver si alguien save si me aceptan estos codigos las versiones anteriores de los navegadores. muchas gracias

Y disculpen las molestias

que versiones de navegadores estas utilizando? para que te cause tantos problemas debes de tener una computadora demaciado precaria... la propiedad -moz-any-link tengo entendido es para Firefox 2.0 y anteriores... imagínate ya vamos en la versión 4.x

o tienes navegadores de maciado viejos o como dice el compañero @BloodShadow tienes tu codigo hecho un desastre pero enorme...

seria conveniente mostraras tu código o tu web quizás podríamos dar mejores soluciones a las ya encontradas

[ArturoGallegos]

Iniciado por BloodShadow

si eso quería decir... y tu que querías decir ahí? xD

Querría es una variante de la palabra querer, se utiliza en ocasiones (en mi rancho no se el de ustedes) para denotar empatía sobre el deseo de la otra persona...

Más bien querría decir Estoy ¿no? ->>>> Más bien el quiso decir Estoy ¿no? ->>>> Más bien el quería decir Estoy ¿no?


compañero BloodShadow el idioma español es muy amplio ¿no lo cree?

[jomaruro]

Conjugación del verbo querer.

Saludos.

[BloodShadow]

jajaja ok... ya no desvirtuemos mas el tema que parece ser que el dueño del post ni dio mas señales de vida :p...

PD: los extranjeros dicen que el idioma mas difícil de aprender es el español... al parecer es cierto por que ni nosotros mismo lo conocemos a la perfección xD

[lktmaster]

Perdón por las faltas de ortografia, pero es que estoy un poco ofuscado ultimamente.

Hos dejo aqui mi css, la el problema no era que no se viera bién, sino que los tamaños de los pixeles no me los hacen igual.

Y tengo las ultimas versiones de estos navegadores, aunque en el html he escrito un codigo para que me lo lea como explorer 7 si és ie8.

Código HTML:

#tot    { 
	position:absolute; 
	top:50%; 
	left:50%; 
	margin-left:-350px;
	margin-top:-250px;
	width: 700px;
    height: 500px;
    background: transparent 8px 8px no-repeat ;
    font-family: Futura, Helvetica, Arial, Sans-serif;
    border-radius: 0.5em;
    -o-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    box-shadow: 0 0 10px rgb(0,0,0);
    -o-box-shadow: 0 0 10px rgb(0,0,0);
    -moz-box-shadow: 0 0 10px rgb(0,0,0);
    -webkit-box-shadow: 0 0 10px rgb(0,0,0);
}
#fondoverd    {
	border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em; 
	background: url('../images/background.png') bottom left repeat-x; 				
	background-color: rgb(3, 212, 0); 
	width: 700px; 
	height: 500px
}
#fondoblau    {
	border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em; 
	background: url('../images/background.png') bottom left repeat-x; 				
	background-color: rgb(0, 153, 255); 
	width: 700px; 
	height: 500px
}
#fondogroc    {
	border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em; 
	background: url('../images/background.png') bottom left repeat-x; 				
	background-color: rgb(255, 204, 51); 
	width: 700px; 
	height: 500px
}
#fondotronja    {
	border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em; 
	background: url('../images/background.png') bottom left repeat-x; 				
	background-color: rgb(255, 97, 0); 
	width: 700px; 
	height: 500px
} 
#nom    {
 	position: absolute;
    text-align: center;
    top: 28px;
    left: 40px;
	font-weight: bold;
	font-size: 3em;
    width: 700px;
    height: 100px;
	color: white;
}
#elementverd    {
 	border-radius: 0.5em;
    -o-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em; 
	background: url('../images/background2.png') 0px 0px repeat-x;
 	background-color: rgb(3, 212, 0);
    box-shadow: 0 0 10px rgb(0,0,0);
    -o-box-shadow: 0 0 10px rgb(0,0,0);
    -moz-box-shadow: 0 0 10px rgb(0,0,0);
    -webkit-box-shadow: 0 0 10px rgb(0,0,0);
    width: 120px;
	height: 120px;
	position: absolute;
	top: 25px;
	left: 25px;
	*top: 10px;
 	*left: 10px; 
	z-index:100;
}
#elementblau    {
 	border-radius: 0.5em;
    -o-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em; 
	background: url('../images/background2.png') bottom left repeat-x;
 	background-color: rgb(0, 153, 255);
    box-shadow: 0 0 10px rgb(0,0,0);
    -o-box-shadow: 0 0 10px rgb(0,0,0);
    -moz-box-shadow: 0 0 10px rgb(0,0,0);
    -webkit-box-shadow: 0 0 10px rgb(0,0,0);
    width: 120px;
	height: 120px;
	position: absolute;
	top: 25px;
	left: 25px;
	*top: 10px;
 	*left: 10px; 
	z-index:100;
} 
#elementgroc    {
 	border-radius: 0.5em;
    -o-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em; 
	background: url('../images/background2.png') bottom left repeat-x;
 	background-color: rgb(255, 204, 51);
    box-shadow: 0 0 10px rgb(0,0,0);
    -o-box-shadow: 0 0 10px rgb(0,0,0);
    -moz-box-shadow: 0 0 10px rgb(0,0,0);
    -webkit-box-shadow: 0 0 10px rgb(0,0,0);
    width: 120px;
	height: 120px;
	position: absolute;
	top: 25px;
	left: 25px;
	*top: 10px;
 	*left: 10px; 
	z-index:100;
}	
#elementtronja    {
	border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em; 
	background: url('../images/background2.png') bottom left repeat-x;
	background-color: rgb(255, 97, 0);
	box-shadow: 0 0 10px rgb(0,0,0);
	-o-box-shadow: 0 0 10px rgb(0,0,0);
    -moz-box-shadow: 0 0 10px rgb(0,0,0);
	-webkit-box-shadow: 0 0 10px rgb(0,0,0);
	width: 120px;
	height: 120px;
	position: absolute;
 	top: 25px;
 	left: 25px; 
 	*top: 10px;
 	*left: 10px;
 	z-index:100;
}
#abrebiacio    {
 	position: absolute;
	text-align: center;
	top: 26px;
	left: 0px;
	width: 120px;
	height: 120px;
	font-weight: bold;
	font-family: Helvetica, Arial, Sans-serif;
	font-size: 4em;
	color: white;
}
noindex:-o-prefocus, #abrebiacio    {
 	position: absolute;
	text-align: center;
	top: 33px;
	left: 0px;
	width: 120px;
	height: 120px;
	font-weight: bold;
	font-family: Helvetica, Arial, Sans-serif;
	font-size: 4em;
	color: white;
}
#abrebiacio, x:-moz-any-link    {
 	position: absolute;
	text-align: center;
	top: 35px;
	left: 0px;
	width: 120px;
	height: 120px;
	font-weight: bold;
	font-family: Helvetica, Arial, Sans-serif;
	font-size: 4em;
	color: white;
	*top: 26px;
}
#blanc    {
 	border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em; 
	background-color: #f2f2f2;
	width: 565px;
	height: 371px;
	position: absolute;
	top: 100px;
	left: 110px; 
	z-index:50;
} 
#info    {
	position: absolute;
	margin-top:12px;
	text-align: left;
	line-height: 41px;  
	top: 0px;
	font-size: 2em;
	width: 565px;
	height: 317px;
	opacity: 0.5;
	color : a0a0a0;
} 
#tipetext    {
	margin-left:40px;
	font-size: 0.8em;
	line-height: 36px;
	*color:rgb(115,115,115);
}
noindex:-o-prefocus, #tipetext    {
	margin-left:40px;
	font-size: 0.8em;
	line-height: 30px;
}
#tipetext, x:-moz-any-link    {
	margin-left:40px;
	font-size: 0.8em;
	line-height: 35px;
} 

#bold {
	font-weight:bold;
} 
#mes    {
	position:absolute; 
	width:30px; 
	height:30px; 
	top:15px; 
	right:15px;
	display: none;
}
#sombraexplorer    {
	*background: url('../images/sombraexplorer.png') bottom left repeat-x;
        *width: 140px;
	*height: 140px;
	*position: absolute;
	*top: 20px;
	*left: 20px; 
	*z-index:90;
}
hr {
	color: #000000;
	*color: #a0a0a09;
	font-size: 15px;
	*font-size: 5px9;
}
html { overflow-y:hidden; }

Si para entenderlo mejor necesitais el html me avisais.

Muchas gracias por todo

[BloodShadow]

mira hermano forero, creo que tienes que leer y practicar mas css y html por que la verdad que esa hoja de estilo esta muy mal hecha... yo en lo personal con la basta experiencia que tengo no necesito el uso de hack... pero te repito, eso lo ganas con la experiencia, hasta llegar a un punto de que no es necesario revisar en los navegadores por que estas seguro que se vera bien y si lo revisas ya lo haces por ética... Así que mejor sigue practicando y vuelve a hacer esa hoja de estilos...

Por que esto no es correcto :(

Código CSS:

#sombraexplorer    {
    *background: url('../images/sombraexplorer.png') bottom left repeat-x;
        *width: 140px;
    *height: 140px;
    *position: absolute;
    *top: 20px;
    *left: 20px; 
    *z-index:90;
}
 

No es ofensa ni discriminación... solo es un consejo como pana :)

[ArturoGallegos]

por como esta tu código css me da la impresión de que no has declarado un doctype valido por lo que los exploradores tienen que trabajar en modo quirs... de igual forma te caería muy bien un reset CSS...

y como ya ha dicho el compañero @BloodShadow hay que repasar un poco mas de CSS, aparte de que usas mucho hack para ie (demasiado diría yo) también te has olvidado del orden de las propiedades....


por ejemplo tu has declarado

Código CSS:

#tot    {
    border-radius: 0.5em;
    -o-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    box-shadow: 0 0 10px rgb(0,0,0);
    -o-box-shadow: 0 0 10px rgb(0,0,0);
    -moz-box-shadow: 0 0 10px rgb(0,0,0);
    -webkit-box-shadow: 0 0 10px rgb(0,0,0);
}
 

cuando debe de ser

Código CSS:

#tot    {
-webkit-border-radius:  0.5em;
-moz-border-radius:  0.5em;
border-radius:  0.5em;/*esta regla debe estar despues de las etiquetas propias de cada navegador y no antes como la has colocado*/
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow:  0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);/*esta regla debe estar despues de las etiquetas propias de cada navegador y no antes como la has colocado*/
}
 

sumado a esto utilizas como sistema de medida em y px opta por usar solo un tipo de medida para que no te compliques tanto... y si optas por los em recuerda que este es un sistema de medida variable

La unidad em es igual a la altura (font-size) de la letra del elemento en el que se usa. Por ejemplo si para un párrafo especificamos un indentado de 2em, el largo de la sangría será igual a dos veces el tamaño de la letra de ese párrafo. Cuando empleamos la unidad de medida 'em' para especificar el tamaño de la letra (font-size) entonces el valor de 'em' viene dado por el tamaño de la fuente del elemento padre.

p { font-size:11px;text-indent: 2em; }

Este ejemplo equivale a un indentado de 22 px para el párrafo a que se aplica

texto sacado de ->> clic aquí

[lktmaster]

Muchas gracias a todos,

Ya se que realmente soy bastante pesimo en esto, llevo 6 meses des de que he empezado a tocar algo de codigo, html y 3 semanas en css, no he estudiado nada de esto y lo estoy haciendo en el curro y como no tengo tiempo voy buscando por ahi como solucionar cada problema, así que entiendo que esté fatal.

Aparte de eso daros las gracias por vuestra paciencia, si por casualidad vais biendo mas errores (que seguro) y teneis tiempo estaré encantado de solucionarlos y de recibir las criticas y aprender, que en eso estoy.

Si saveis de algun libro, foro, o lo que sea que hable de codigo en general, css javascript que sea conciso(sobretodo por falta de tiempo) y que esté realmente actualizado me iria muy bién.

[BloodShadow]

http://www.forosdelweb.com/wiki/CSS acá esta lo que buscas... Y vuelve a hacer esa hoja de estilos sin ni un hack... solo así aprenderás el verdaderos CSS y lo lindo que es cuando se sabe usar :)

[lktmaster]

Muchas Gracias,

En ello estoy!!