Foros del Web » Creando para Internet » CSS »

Web se ve desplazada en Google Chrome

Estas en el tema de Web se ve desplazada en Google Chrome en el foro de CSS en Foros del Web. Pués vereis, resulta que he hecho una maqueta web y en Firefox se ve estupenda, en IE8 aceptable y en Google Chrome se ve desplazada, ...
  #1 (permalink)  
Antiguo 03/03/2011, 11:59
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Web se ve desplazada en Google Chrome

Pués vereis, resulta que he hecho una maqueta web y en Firefox se ve estupenda, en IE8 aceptable y en Google Chrome se ve desplazada, como si en con el Firefox disminuyeras el tamaño de la web, pero ya eso creo que es un error en algún código o algo, si no no me lo explico. Os dejo el código:

CSS:
Cita:
@charset "utf-8";
body {
margin-top: 0px;
margin-bottom: 0px;
background-image: url(../images/bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}

#contenedor {
width: 960px;
margin-right: auto;
margin-left: auto;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: dotted;
border-left-style: dotted;
border-right-color: #999;
border-left-color: #999;
overflow: hidden;
background-color: #FFF;
}
#header {
width: 960px;
background-image: url(../images/bg_header.png);
overflow: hidden;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00711D;
}
#logo {
height: 160px;
width: 450px;
float: left;
background-image: url(../images/logo.png);
}
#form_pass {
width: 510px;
float: right;
height: 179px;
background-image: url(../images/anm_form_bg.png);
background-repeat: no-repeat;
background-position: 200px;
}
#form_key {
width: 500px;
height: 124px;
padding-top: 55px;
}
#form1 {
width: 300px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
input.areatxt {
background-color: #CCC;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin-bottom: 3px;
opacity: 0.6;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
text-decoration: none;
}
input.button1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333;
text-decoration: none;
background-image: url(../images/button_bg_hover.png);
border: 1px dashed #333;
opacity:0.6;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 4px;
padding-left: 4px;
}
input.very {
opacity:0.7;
}
#contenedor_botones {
width: 440px;
float: left;
clear: left;
margin-left: 10px;
}
.buttons {
float: left;
padding-bottom: 3px;
}
.buttons a {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 6px;
padding-left: 6px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFF;
text-decoration: none;
text-shadow: 0.1em 0.1em #333;
background-image: url(../images/button_bg.png);
margin-right: 5px;
}
.buttons a:hover {
background-image: url(../images/button_bg_hover.png);
}
#contenedor_cuerpo {
width: 740px;
float: left;
}
.cuerpo_noticias {
width: 700px;
margin-right: auto;
margin-left: auto;
border: 1px dotted #999;
margin-top: 15px;
background-color: #E2E2E2;
text-indent: 2px;
}
.cuerpo_noticias3 {
width: 680px;
margin-right: auto;
margin-left: auto;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #333;
font-weight: bold;
}
.cuerpo_noticias2 {
width: 680px;
margin-right: auto;
margin-left: auto;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #999;
border-right-color: #999;
border-bottom-color: #999;
border-left-color: #999;
padding-top: 3px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 9px;
font-weight: normal;
padding-bottom: 5px;
}
#contenedor_menu2 {
float: right;
width: 220px;
}
#menu_right {
width: 203px;
background-image: url(../images/bg_menu.png);
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-top: 15px;
height: 30px;
}
#icon_gb {
height: 25px;
width: 203px;
background-image: url(../images/icon_bg.png);
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFF;
text-shadow: 0.1em 0.1em #333;
text-align: center;
padding-top: 5px;
background-repeat: no-repeat;
background-position: 2px -13px;
}
#menu_right_contenido {
width: 193px;
background-color: #E2E2E2;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
color: #333;
text-decoration: none;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-top: 5px;
}
#footer_n {
width: 960px;
background-image: url(../images/footer.png);
height: 90px;
float: left;
margin-top: 20px;
}
Saludos y gracias de antemano!
  #2 (permalink)  
Antiguo 03/03/2011, 12:44
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 14 años, 9 meses
Puntos: 137
Respuesta: Web se ve desplazada en Google Chrome

y si mejor pones la URL del sitio en cuestion?.. por que ni HTML brindas para un "copy&paste" para tener siquiera un aproximado de lo que tu estas viendo
__________________
Toroflix - movies.
  #3 (permalink)  
Antiguo 03/03/2011, 12:49
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Web se ve desplazada en Google Chrome

Ups, perdona, el sitio no está subido y no puse hltm porque superaba los carácteres permitidos por el foro:

Cita:
<!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" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Website 2.0</title>
</head>

<body>
<div id="contenedor">
<div id="header">
<div id="logo"></div>
<div id="form_pass">
<div id="form_key">
<form id="form1" name="form1" method="post" action="">
<label for="areatxt"></label>
<input type="text" name="areatxt" id="areatxt" class="areatxt" />
<label for="areatxt2"></label>
<input type="password" name="areatxt2" id="areatxt2" class="areatxt" />
<input type="submit" name="button1" id="button1" value="Iniciar Sesión" class="button1" />
<input type="submit" name="button2" id="button2" value="Registrarse" class="button1" />
<input type="checkbox" name="very" id="very" class="very" />
<label for="very"></label>
</form>
</div>
</div>
<div id="contenedor_botones">
<div class="buttons"><a href="#">Noticias</a></div>
<div class="buttons"><a href="#">Descargas</a></div>
<div class="buttons"><a href="#">Comunidad</a></div>
<div class="buttons"><a href="#">Chat IRC</a></div>
<div class="buttons"><a href="#">Quiénes somos</a></div>
</div>
</div>
<div id="contenedor_cuerpo">
<div class="cuerpo_noticias">
<div class="cuerpo_noticias3">Noticia Nº1 - Lorem Ipsum By Khrysten</div>
<div class="cuerpo_noticias2">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</div>
</div>
<div class="cuerpo_noticias">
<div class="cuerpo_noticias3">Noticia Nº1 - Lorem Ipsum By Khrysten</div>
<div class="cuerpo_noticias2">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</div>
</div>
<div class="cuerpo_noticias">
<div class="cuerpo_noticias3">Noticia Nº1 - Lorem Ipsum By Khrysten</div>
<div class="cuerpo_noticias2">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</div>
</div>
</div>
<div id="contenedor_menu2">
<div id="menu_right">
<div id="icon_gb">Estadísticas</div>
</div>
<div id="menu_right_contenido">· Estadísticas de usuario<br />
· Estadísticas del foro<br />
· Estadísticas generales<br />
· Visitas<br />
· Afiliados
</div>
</div>
<div id="footer_n"></div>
</div>
</body>
</html>
  #4 (permalink)  
Antiguo 03/03/2011, 12:54
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 14 años, 9 meses
Puntos: 137
Respuesta: Web se ve desplazada en Google Chrome

pues yo lo veo todo bien... al menos el codigo que pegas valida, pero igual el que tienes generado o nose pues talvez no... compruebalo... por que ta bien
__________________
Toroflix - movies.
  #5 (permalink)  
Antiguo 03/03/2011, 12:57
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Web se ve desplazada en Google Chrome

Es que es eso, el código está perfecto, pero en el Chrome la página se ve desplazada del propio fondo, hacia la derecha en concreto, como si fondo y web estuviese separados :S
  #6 (permalink)  
Antiguo 03/03/2011, 14:36
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Web se ve desplazada en Google Chrome

¿Entonces? ¿Qué puede ser? :s

Etiquetas: chrome, google
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 15:11.