problemas con overflow en ie7

usuaria · #1 (**permalink**) 10/06/2009, 23:34

Queria saber porque no me esta tomando el overflow:hidden

Código:

<div class="mostrarMapa" style="height:150px;overflow:hidden;display:block">
<div class="animacion" style="height: 300px; width:600px; margin:0 auto;" id="map_canvasRestaurantes"></div>
</div>

esto anda bien en FF. (adentro del div con class animacion se carga un google map)

grx!

hades87 · #2 (**permalink**) 11/06/2009, 00:31

No habrá algo en la class mostrarMapa que contradiga al hidden?

usuaria · #3 (**permalink**) 13/06/2009, 09:56

no, no tiene nada que lo contradiga :(

kseso? · #4 (**permalink**) 13/06/2009, 10:17

Hola Usuaria

En este caso, tanto ie7 como FF funcionan a la perfección. El overflow lo aplican correctamente.

Claro, en donde tienen que hacerlo: en la vertical. Porque en la horizontal, al no tener marcada anchura a ".mostrarMapa"... ¡ah, se siente!

Solución: añade una anchura a ".mostrarMapa".

Un saludo

P.D.: añado de propina, ¿cuál es tu intención con "margin: 0 auto" ?

usuaria · #5 (**permalink**) 13/06/2009, 10:52

Lo he solucionado con algo que lei por internet poniendole positon:relative a esa clase.

lo de margin 0 auto es para centarme el div.

grx!

kseso? · #6 (**permalink**) 13/06/2009, 11:51

Como no dices cuál es el problema, supongo que te refieres (según el comportamiento del código que pusiste), a que "animacion" se ve entero, dentro de "mostrarMapa" y este a su vez, ocupa toda la pantalla (a lo ancho)

Si lo que quieres lograr es que "animacion" se recorte, debes darle una anchura a "mostrarMapa" (que es el que tiene overflow).

Puedes pobrar este código en tu navegador (FF e IE7)

Código html:

Ver original<!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" xml:lang="es" lang="es-es">
<head>
<title>play sobre imagen</title>
<style type="text/css">
* {margin:0; padding:0;}
</style>
</head>
<body>
<div class="mostrarMapa" style="background:#cdcdcd; height:150px;overflow:hidden;">
<div class="animacion" style="background: #c00; height: 300px; width:600px; margin:0 auto;" id="map_canvasRestaurantes"></div>
</div>
</body>
</html>

Añade ahora "position:relative" a los dos div y verás que no hay cambio. Pero si le añades un ancho a "mostrarMapa" de menos de 600px (que mide el otro div) verás cómo sí funciona el overflow.

A menos que no sea eso lo que buscabas.

Mikmoro · #7 (**permalink**) 13/06/2009, 16:12

En vista de que dice haberlo solucionado de una manera que sería imposible en caso de que fuera ese el problema, parece que no, que debía ser otro al que imaginábamos.