Foros del Web » Creando para Internet » CSS »

Problemas con ie y mozilla

Estas en el tema de Problemas con ie y mozilla en el foro de CSS en Foros del Web. Hola amigos; tengo un problema con un diseño que vengo haciendo, el tema es que se ve distorsionado con Mozilla mientras que en IE8 se ...
  #1 (permalink)  
Antiguo 11/10/2010, 17:31
 
Fecha de Ingreso: mayo-2009
Mensajes: 13
Antigüedad: 8 años, 6 meses
Puntos: 0
Problemas con ie y mozilla

Hola amigos; tengo un problema con un diseño que vengo haciendo, el tema es que se ve distorsionado con Mozilla mientras que en IE8 se ve bien, la idea seria que no falle el diseño en ningun navegador, por favor si me pudieran ayudar, los codigos html y css son los siguientes

[URL="http://www.hosting-cusco.com/magic/mitest.html"]http://www.hosting-cusco.com/magic/mitest.html[/URL]

Por favor, espero me puedan ayudar a ver donde esta la falla en las hojas de estilo

este es el codigo de testbasic.css

html, body {
margin:0;
padding:0;
}
body{
text-align: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
background-color: #eee;
color: #444;
font-size: 75%;
}
a{
color: #FAD17F;
text-decoration: none;
}
a:focus, a:hover, a:active {
text-decoration: underline;
}
p, li {
line-height: 1.8em;
}
h1, h2 {
font-family: "Trebuchet MS", Verdana, sans-serif;
margin: 0 0 10px 0;
letter-spacing:-1px;
}
h1 {
padding: 0;
font-size: 2em;
color: #333;
}
h2 {
padding-top: 10px;
font-size:1.5em;
}
pre {
font-size: 0.6em;
line-height: 1.2em;
overflow-x: auto;
}
div#page {
width: 100%;
background-color: #000;
margin: 0 auto;
text-align: left;
/*border-color: #ddd;
border-style: none solid solid;
border-width: medium 1px 1px;*/
}
div#container {
padding: 20px;
}
div#ads {
clear: both;
padding: 12px 0 12px 66px;
}
div#footer {
clear: both;
color: #777;
margin: 0 auto;
padding: 20px 0 40px;
text-align: center;
font-size:0.8em;
}
.menu{
text-align:center;
color:#FFF;
background-color:#000;
font-size:12px;
padding:2em 1em 2em 1em;
}


Y este es el codigo de testweb.css

div.content {
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
display: none;
float: left;
width: 900px;
}
div.content a, div.navigation a {
text-decoration: none;
color: #FAD17F;
}
div.content a:focus, div.content a:hover, div.content a:active {
text-decoration: underline;
}
div.controls {
margin-top: 5px;
height: 23px;
}
div.controls a {
padding: 5px;
}
div.ss-controls {
float: left;
}
div.nav-controls {
float: right;
}
div.slideshow-container {
position: relative;
clear: both;
width: 840px;
height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
position: absolute;
top: 0;
left: 0;
background-image: url('loader.gif');
background-repeat: no-repeat;
background-position: center;
width: 840px;
height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {

}
div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
}
div.slideshow a.advance-link {
display: block;
width: 840px;
height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
line-height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.slideshow img {
vertical-align: middle;
border: 1px solid #FAD17F;
}
div.download {
float: right;
}
div.caption-container {
position: relative;
clear: left;
height: 75px;
}
span.image-caption {
display: block;
position: absolute;
width: 840px;
top: 0;
left: 0;
}
div.caption {
padding: 4px;
}
div.image-title {
font-weight: bold;
font-size: 1.4em;
}
div.image-desc {
line-height: 1.3em;
padding-top: 12px;
}
div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
clear: both;
margin: 0;
padding: 0 0 0 0;
}
ul.thumbs li {
float: left;
padding: 0;
margin: 5px 10px 5px 0;
list-style: none;
}
a.thumb {
padding: 2px;
display: block;
border: 1px solid #FAD17F;
}
ul.thumbs li.selected a.thumb {
background: #000;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
}
div.pagination {
clear: both;
}
div.navigation div.top {
margin-bottom: 12px;
height: 11px;
}
div.navigation div.bottom {
margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
display: block;
float: left;
margin-right: 2px;
padding: 4px 7px 2px 7px;
border: 1px solid #FAD17F;
}
div.pagination a:hover {
background-color: #000;
text-decoration: none;
}
div.pagination span.current {
font-weight: bold;
/*background-color: #000;
border-color: #000;
color: #fff;*/
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}


Agradezco de antemano vuestro apoyo, muy agradecido
  #2 (permalink)  
Antiguo 12/10/2010, 02:57
 
Fecha de Ingreso: octubre-2010
Mensajes: 1
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: Problemas con ie y mozilla

proba arreglando estos dos errores que aparecen... otra cosa me parece que tu galleria esta con display: block cuando tendria que estar display : inline


_______________________________________
[URL="http://www.onyxsolution.com"]Hawaii Web Design[/URL]
  #3 (permalink)  
Antiguo 12/10/2010, 04:19
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problemas con ie y mozilla

Hola:

El problema lo tienes en la distintas formas que tienen Firefox e IE de actuar ante el diseño normal de los divs.

Para Firefox el ancho de un div es margin + border + padding + width + padding + border + margin y para IE es margin + width + margin, es decir el width incluye al border + padding.

Por eso tu página se descompone con las imagenes grandes, se van hacia abajo porque no caben en el hueco que les queda.

Un consejo cuando maquetes una página hazlo para Firefox y después arregla los desperfecto del IE, te será más fácil que hacerlo al revés.

Cita:
Iniciado por onyx808 Ver Mensaje
proba arreglando estos dos errores que aparecen...
¿Qué dos errores?

Saludos.
  #4 (permalink)  
Antiguo 12/10/2010, 09:12
 
Fecha de Ingreso: mayo-2009
Mensajes: 13
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Problemas con ie y mozilla

Hola Onyx, no indicaste cuales eran los errores a corregir, por favor si pudieras enviar un nuevo mensaje, te lo agradeceré.

Jomaruro, gracias por tus sugerencias lo tomare muy en cuenta para la proxima oportunidad, me podrias aclarar con un ejemplo la explicación que hiciste sobre los divs para Firefox por favor ???

Gracias a ambos por vuestra colaboración
  #5 (permalink)  
Antiguo 12/10/2010, 09:50
 
Fecha de Ingreso: mayo-2009
Mensajes: 13
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Problemas con ie y mozilla

Hola Jomaruro:

podrias ayudarme a revisar el codigo a ver que es lo que esta fallando, necesito avanzar con el diseño, y si pudieras buenamente ayudarme te agradecere.

Saludos
  #6 (permalink)  
Antiguo 12/10/2010, 11:49
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problemas con ie y mozilla

Hola:

Léete este capítulo sobre Módelo de cajas..

O si lo prefieres, aunque está en inglés, la propia explicación del w3c sobre box model.

Saludos.



P.D.: La solución a tu problema puede bastar con reducir un poco el tamaño de las imágenes grandes.
  #7 (permalink)  
Antiguo 12/10/2010, 15:00
 
Fecha de Ingreso: mayo-2009
Mensajes: 13
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Problemas con ie y mozilla

Hola amigo:

Ya probé con reducir el tamaño de las imágenes pero no se ha solucionado, de hecho tambien me gustaría poder tener las imágenes grandes, por eso que hice lo que me indicas, pero no parece ser la solución, y lo que no me explico es como en IE si se ven bien...

Por favor, si pudieras ayudarme.....

Saludos cordiales.....

Etiquetas: mozilla
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




La zona horaria es GMT -6. Ahora son las 03:53.