Mi pagina no sé ve igual en Mozilla ni IE

Nuzloob · #1 (**permalink**) 13/07/2011, 02:53

Alguien me podria ayudar por favor. Mi pagina web : www.lavoignet.com se mira completamente bien en Safari y Chrome pero al momento de entrar en mozilla firefox e Internet Explorer se mira diferente , me Podrian ayudar a solucionar esté problema?

lktmaster · #2 (**permalink**) 13/07/2011, 03:20

Hasta ahora el navegador que mas correcto era para los estilos és el firefox, yo de ti empezava de nuevo partiendo del firefox.

Ya que por lo que veo tienes una caja que lo enmarca todo de height:250px +o- el chrome y safari van con webkit así que tienen el mismo comportamiento o muy similar, y en en tu pagina hacen caso omiso a esa medida, firefox la acepta y da ese problema.

Tedel · #3 (**permalink**) 13/07/2011, 11:50

Bueno, lo que comentas no es novedad. Todas las webs se ven diferentes en los 5 navegadores principales: Explorer, Firefox, Safari, Opera y Chrome. Un diseñador debe verificar que la web se vea bien en todas antes de publicar.

Para tu caso, el problema es que tienes tu web en una caja (¿un div?) con un código que le limita la altura. Quita el límite de altura y deberías poder resolver tu problema.

Espero ayude.

Nuzloob · #4 (**permalink**) 13/07/2011, 13:16

Cita:

Iniciado por Tedel

Bueno, lo que comentas no es novedad. Todas las webs se ven diferentes en los 5 navegadores principales: Explorer, Firefox, Safari, Opera y Chrome. Un diseñador debe verificar que la web se vea bien en todas antes de publicar.

Para tu caso, el problema es que tienes tu web en una caja (¿un div?) con un código que le limita la altura. Quita el límite de altura y deberías poder resolver tu problema.

Espero ayude.

Perdon la molestia pero ese codigo cual seria?

ArturoGallegos · #5 (**permalink**) 13/07/2011, 13:54

mas bien le sobra y le falta codigo, principalmente le falta....

tu problema es que estas metiendo tu pagina dentro de un iframe y a este le das un alto del 100% pero no has agregado en el body la altura al 100% por lo cual no funciona

para que el height 100% funcione debes agregar en el css (de la pagina donde esta el iframe)

Código CSS:

Ver originalhtml,body{height:100%;}

por otro lado tu estas especificando un doctype xhtml 1 stric cuando en realidad estas usando html4

en stric no se permite el uso de iframe y todas las propiedades deben ir en minusculas y cerradas correctamente

Nuzloob · #6 (**permalink**) 14/07/2011, 01:47

He hecho lo que me sugeriste y sigue sin funcionar, Si me pudieras ayudar amigo sería super! Me das tu Email o Algun Facebook o Twitter para estár en contacto :)

ArturoGallegos · #7 (**permalink**) 14/07/2011, 10:03

amigo @Nuzloob toda la ayuda se proporciona atravez del foro, no se debe y no esta permitido proporcionar ayuda personalizada (mensaje privado, email, msn, etc etc) salvo cuando se contrata un servisio y obviamente hay una remuneracion economica....

acabo de ingresar a su pagina y no ha realizado ningun cambio le sugiero lo vuelva a realizar, que seguro se equivoco de archivo al momento de editar...

falconmasters · #8 (**permalink**) 15/07/2011, 15:59

Para que se vea lo mas similar en todos los navegadores te recomiendo usar algun"reset css", que lo que hace es tratar de igualar los estilos entre los diferentes navegadores.

En google encuentras fácil algunos, el mas famoso es el de Erick Meyer, ademas de que solo los importas y ya esta te lo reomiendo :)

Nuzloob · #9 (**permalink**) 18/07/2011, 01:42

Sigo sin poder arreglar mi pagina web aqui les tengo mi codigo HTML de la pagina y el CSS si me pueden decir que tengo mal Porfavor . :)

Este es el Html de la pagina. :

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

<link rel="stylesheet" href="reset.css" type="text/css" /> 
<!--[if IE]> <link rel="stylesheet" type="text/css" href="reset.css" />
 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="description" content="Your description goes here" />
	<meta name="keywords" content="your,keywords,goes,here" />
	<meta name="author" content="Your Name" />
	<link rel="stylesheet" type="text/css" href="variant-stream.css" title="Variant Stream" media="screen,projection" />
	<title>Lavoignet Services</title>
	<style type="text/css">
.auto-style3 {
	color: #0775F5;
	font-size: 1.4em;
	margin: 0 0 15px 10px;
	padding: 0;
}
	.auto-style4 {
		color: #0C4ADC;
	}
	.auto-style5 {
		color: #00B903;
	}
	.auto-style6 {
	color: #E5E205;
	font-size: x-large;
}
.auto-style7 {
	color: #D50D31;
	font-size: x-large;
}
	</style>
</head>

<body style="height: 232px">
<div id="wrap" style="height: 202px">

	<div id="header">
		<div id="topmenu">
			<p>
			<strong class="hide">Main menu:</strong>&nbsp;
			</p>
			<p>
			&nbsp;</p>
		</div>
		
		<div id="title">
			<h1 class="auto-style4"><span lang="es-mx">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; La<span class="auto-style5">V</span>oi<span class="auto-style5">g</span>net 
			Services</span></h1>
			<p class="auto-style3"><span lang="es-mx">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; PRICE &amp; SERVICE QUALITY</span></p>
		</div>
	</div>
		
	<div id="sidebar" class="centered" style="width: 977px; height: 263px">
		<span class="auto-style6" lang="es-mx"><strong><br />
		WELCOME TO LAVOIGNET SERVICES <br />
		</span><span class="auto-style7" lang="es-mx">Please select your 
		lenguage</span><span class="auto-style6" lang="es-mx"><br />
		<br />
		<a href="index.html">
		<img height="160" src="images/bandera-estados-unidos.jpg" width="242" /></a><br />
		<br />
&nbsp;BIENVENIDO A LAVOIGNET SERVICES<br />
		</span><span class="auto-style7" lang="es-mx">Por favor seleccione su 
		idioma</span><span class="auto-style6" lang="es-mx"><br />
		<br />
		</span></strong>
		<img height="161" src="images/bandera.jpg" width="242" />
	
</body>
</html>

Esté es el Css de la Pagina :

Código:

/* Main containers */

html {height: 100%;}
body {padding:0; margin:0; font:92% Georgia,Times New Roman,serif; background:#eee url(background.gif) top left repeat; color:#222; text-align:center; height: 100%; }
#wrap {width:980px; text-align:left; margin:0 auto;}



/* Header */
#header {height:230px; margin:0 0 10px 0;}
#title {padding:20px 0 20px 120px; background:transparent url(logo.jpg) top left no-repeat;}
h1 {margin:0 auto 15px auto; padding:0; font-size:3.6em; font-weight:400;color:#eee; letter-spacing:-1px; line-height:1.2em;}
h1 a {color:#eee; font-weight:400; text-decoration:none;}
h1 a:hover {color:#fff; text-decoration:none;}
.slogan {color:#eee; font-size:1.4em; margin:0 0 15px 10px; padding:0;}

/* HTML Tags */
a {text-decoration:none; font-weight:400; color:#2a5a9a;}
a:hover {text-decoration:underline;}
a img {border:0;}
h2 {margin:0 0 18px 0; padding:0 0 7px; color:#2a5a9a; font-size:1.6em; font-weight:400; border-bottom:1px solid #aaa;}
h2 a {font-weight:400;}
h3 {font-size:1.6em; font-weight:400; margin:0 0 10px 0; padding:2px 0; color:#2a5a9a; font-size:1.2em; font-weight:400; border-bottom:1px solid #aaa;}
p {margin:0 0 18px 0;}
ul {margin:0 0 18px 20px; padding:0;}
li {margin:0; padding:0 0 0 5px;}

/* Top menu */
#topmenu {text-align:right;margin:-3px 0 5px 0;}
#topmenu p {font-size:1.3em; line-height:1.9em; color:#aaa; margin-bottom:5px;}
#topmenu a {padding:6px 8px 5px 8px; font-weight:400; margin:0 0 0 2px; color:#aaa;}
#topmenu a:hover {color:#fff; text-decoration:none;}
#topmenu a.active {color:#fff; border:1px solid #aaa;}
#topmenu a.active:hover {color:#fff; padding:6px 8px 5px 8px;}

/* Sidebar */
#sidebar {width:200px; float:left; margin:0; padding:0; color:#444;}
#sidebar h2 {font-size:1.3em; padding-bottom:3px; border-bottom:1px solid #aaa; margin-bottom:5px;}
#sidebar ul {list-style:none; margin:0 0 15px 0;}
#sidebar li {padding:0; margin:0;}
#sidebar ul.sidemenu {width:200px; padding:0; margin:0 0 20px 0;}
#sidebar ul.sidemenu li a {color:#333; display:block; padding:5px 0; margin:0; font-size:1.3em;}
#sidebar ul.sidemenu li a:hover {color:#2a5a9a; text-decoration:none;}
#sidebar ul.sidemenu li a.active {color:#2a5a9a;}
#sidebar ul.sidemenu ul {width:180px; padding:0; margin:0 0 0 20px;}
#sidebar ul.sidemenu ul li a {padding:2px 0; margin:0; font-size:1em;}

/* Content area */
#content {text-align:left; padding:5px 0; margin:0 0 15px 220px; width:750px;}
#content img {margin:5px 0;}
#feature {margin:0 0 20px 0;}
.post {margin:0 0 20px 0; padding:15px 15px 0 15px; background-color:#fff;}
.postintro {width:70px; padding:4px; background-color:#eee; text-align:center; color:#444; font-size:1.1em; float:right; border:1px solid #aaa; margin:0 15px 10px 15px;}
.postmeta {text-align:right; color:#666; padding:10px 0; border-top: 1px solid #aaa; font-size:0.9em;}

/*footer*/
#footer { background:url(images/logo.gif) repeat-x top; color:#000000; font-size:0.6875em; font-weight:bold}
#footer .indent{padding:8px 0px 0 10px}
#footer span {color:#5f9420;}  
#footer a {color:#5f9420; text-decoration:none}  
#footer a:hover { text-decoration:underline}

input{
   background:#fcfe8b;
   border:2px solid #5f9420;
   margin-bottom:3px;
   width:178px; height:24px;
   font-size:1em
   }
textarea{
   background:#fcfe8b;
   border:2px solid #5f9420;
   margin-bottom:10px;
   font-size:1em;
   width:178px; height:117px;
   overflow:auto}
   
/* Various classes */
.centered {text-align:center;}
.hide {display:none;}
.clear {clear:both; visibility:hidden;}

Silkon · #10 (**permalink**) 18/07/2011, 08:26

Parece que la gente aun no le da importancia, pero hay que cumplir los estándares de la W3C. Que precisamente evita estos problemas.

http://validator.w3.org/check?uri=ht...Inline&group=0

En el enlace te muestra los errores de código que tienes, arreglándolos se vera en todos los navegadores bien.

Un Saludo

tonydx16 · #11 (**permalink**) 18/07/2011, 09:33

Simplemente coloca propiedad sólo para IE

//propiedad

por ejemplo:

<style ...>

.texto {
font-size: 12px;
//font-size: 30px;

</style>

<span class="texto">texto de prueba</span>

Con esto haces que en todos los navegadores se muestre el tamaño de 12px y sólo en I.E lee 30px.

Ahora ten instalado I.E para verificar, así puedes hacer con todas las propiedades...

(// debe ir antes del principal, como en el ejemplo alla arriba)