Mal en navegador, bien en dreamweaver

[jotirp]

Hola, tengo un problema en mi pagina web que estoy haciendo. Y es que tengo una galeria de fotos en las que las fotos se ven en un cuadrado pequeño y al pulsarlo se ve en otro cuadrado grante y mi problema esta en que en el cuadrado pequeño se ve la imagen super aumentada y en el cuadrado grande se ve como quiero que se vea ajustada al cuadrado. Pero por mucho que ajuste el cuadrado pequeño la foto se ve aumentada, pero lo que mas me mosquea es que "en vivo" de Dreamweaver se ve bien ajustada por el estilo que le he dado pero luego al abrirla en los navegadores se ve aumentada y nose porque.

En los dos cuadrados tengo puesto: "style="width: 100%;height: 100%" para que se ajusten pero solo me lo hace el grande el pequeño se ve la foto aumentada.
Las fotos tienen una resolucion bastante grande pero si en el cuadrado grande se me ve bien porque en el cuadrado pequeño se ve aumentado y no entra y en dreamweaver si se ve bien.

[martinmiranda90]

Hola. Podrías poner el codigo completo de como tienes estructuradas las imagenes?. También ayudaria saber el código css.
Un saludo amigo!.

[jotirp]

Las imagenes estan asi:

<div class="faded">
<ul class="big-image">
<li><img src="images/slide1-1big.jpg"" style="height: 100%"></li>
<li><img src="images/slide1-2big.jpg"" style="height: 100%"></li>
<li><img src="images/slide1-3big.jpg"" style="height: 100%"></li>
</ul>
<ul class="paginacion">
<li><a href="#" rel="0"><img src="images/slide1-1big.jpg""style="width: 100%;height: 100%"></a></li>
<li><a href="#" rel="1"><img src="images/slide1-2big.jpg""style="width: 100%;height: 100%"></a></li>
<li><a href="#" rel="2"><img src="images/slide1-3big.jpg""style="width: 100%;height: 100%"></a></li>
</ul>
</div>
y el css:
.faded { width:888px;height:341px;margin:0 auto;position:relative}
.faded ul.big-image {text-align:center; list-style:none;padding:0;margin:0;width:653px;height:3 41px;float:right;background:url(../images/img-wrapper-big.png) no-repeat left top}
.faded ul.big-image li {padding:9px 0 0 9px;width:635px;height:323px}
ul.paginacion {z-index:1;text-align:center;list-style:none; padding:360px 25px ;margin:0 auto;width:1000px;height:auto;position:absolute;}
ul.paginacion li {width: 144px; height:74px; margin: 10px 0 0 17px; padding: 0; overflow: hidden;
float: left; padding: 1px; margin: 0 5px; border: 2px solid #7abbb5; cursor: pointer; border-radius: 5px;}
ul.paginacion li a {padding:0 0 0 0;display:block}
ul.paginacion li.current a {}a {outline:0;border:0}


Asi es como se me ve en el navegador:
http://gyazo.com/635c04335f5f38e2c0fab77c8e9fed53

Y asi en dreamweaver:
http://gyazo.com/e85a01cc9c6862cd5048ee2afc4ee234

[martinmiranda90]

Hola de nuevo. Lo que te esta restringiendo que no coja el tamaño completo del div padre, es este atributo:

Código:

ul.paginacion li a{
display:block;
...
}

Al ponerle display:block se comporta como tal y no hace caso del height. Prueba con eso y ya dirás si te funciona.
Un saludo!

[jotirp]

Nada no es eso, en el navegador sigue viendose la imagen aumentada cambie y borre lineas de css sigue viendose asi. Y en el dreamweaver se vea bien, no se si es que hay alguna linea que los navegadores no la coja bien y se ve asi.

[pzin]

El problema no es que se deformen las imágenes, sino que salen con su tamaño original debido a que tienes un error en el código HTML, falta un espacio por ahí. Ocurre que no lo ves porque tienes el contenido que sobresale oculto. Solucionando esa falta de espacio debería de verse como en el Dreamweaver (aunque cabe decir que el error es del visor de Dreamweaver, ya que eso así está mal y por eso en un navegador de verdad no se ve así).

Adicionalmente no estaría de más que para otra vez publicaras un código ordenado y también hicieras uso de la opción highlight. Es para ayudar a quien te ayuda.

Lo de quitar el display: block; aparte de ser una chorrada no tienen ninguna validez técnica.

[martinmiranda90]

Yo he dicho lo del display:block porque he estado mirando en jsfiddle y solucionaba el problema,las imágenes quedaban dentro de su contenedor.
Luego en las etiquetas img tienes una comilla de más por ahi en todas,pero tampoco creo que sea ese el problema.
Un saludo y siento que no te haya servido.

[jotirp]

Y como soluciono ese espacio, he estado probando y no consigo hacerlo.

edito: Vale ya lo consegui solucionar, gracias por la idea que me diste Pzin, con eso de quitar el espacio sobrante me dio la idea de poner en "paginacion li a" el tamaño de como queria la foto y en html poner un "height=100%" y ya se ve como quiero que se vea.

Pueden poner como solucionado el tema.