propiedad min-height

[subirol]

hola, a tod@s tengo un problemilla con la propiedad min-heiht, segun el navegador que utilizo, IE me lo toma como height y firefox como min-height, lo que ocasiona unos problemillas de visualizacion ya que en IE no me estira los laterales de mas alla del min-heeight que le pongo, no se si me explico, pongo la classe en la que lo utilizo es para hacer un borde de una capa con una imagen, y que se estiere segun su contenido.

Código:

.lateral_tiendas{
	 background:url(gfx/lateral.png) repeat;
	 margin:0;
	 width:2px;
	 height:2px;
	 float:left;
	 min-height:60px;
	}

Gracias.

[gazpachoymochil]

¿Has probado a definir un min-height: 60px y un height: auto? Prueba a ver que tal...

Código:

.lateral_tiendas{
	 background:url(gfx/lateral.png) repeat;
	 margin:0;
	 width:2px;
	 min-height:60px;
        height: auto:
	 float:left;
}

[Mikmoro]

Hazlo así:

.lateral_tiendas {background:url(gfx/lateral.png) repeat;
margin:0;
width:2px;
min-height:60px;
height: auto!important;
height: 60px;
float:left;
}

Así sí deberá funcionar el height: 60px como min-height para IE y estirarse.

[subirol]

Gracias gazpachoymochil, pero no me funciona con eso estamos igual.

[subirol]

Sigue sin funcionar

[Mikmoro]

Ni siquiera sabemos a qué estás aplicando eso, ni si corresponde la clase, dentro de qué está, etc.
Lo sorprendente hubiera sido que hubiera funcionado a la primera sin más información

[subirol]

Hola, mikmoro, no te entiendo si se a quese corresponde lo que no se es pq no funciona bien.
este es el codigo CSS

Código:

.tiendas{
	margin:0 auto;
	padding:0;
	float:left;
	width:210px;
	
}
.top_tiendas{
	 background:url(gfx/top_tienda.png) center top no-repeat;
	 margin:0 auto;
	 width:200px;
	 height:7px;
	}
.centro_tiendas{
	 min-height:60px;
	 width:198px;
	}	
.pie_tiendas {
	 background:url(gfx/pie_tienda.png) center bottom no-repeat;
	 margin:0 auto;
	 width:200px;
	 height:7px;

	}	
.lateral_tiendas {
	background:url(gfx/lateral.png) repeat;
	margin:0;
	width:2px;
	min-height:60px;
	height: auto!important;
	height: 60px;
	float:left;
}
.dir_tienda{
	 width:194px;
	 float:left;
	}	
.tiendas a{
	font-size:8pt;
	}
.tiendas p{
	font-size:8pt;
	}

.texto {
	font-family:Verdana,Geneva,sans-serif;
	font-size:8pt;
	margin-top:1px;
}

el html

Código HTML:

 <!--tienda1-->
                    <div class="tiendas">
                        <div class="top_tiendas"></div>	
                        <div class="centro_tiendas">
                             <div class="lateral_tiendas"></div>
                             <div class="dir_tienda"><p>Puerta del Sol, 4 <br />36201 Vigo - Pontevedra <br />Tel/Fax:[phone]<br /><a href="javascript:ventanaSecundaria('mapas/vigo_puerta_sol.htm')" title="mapa Blucom - Puerta del Sol, 4 - Vigo">Ver mapa</a></p></div>
                             <div class="lateral_tiendas"></div>
                        </div>
                        <div class="pie_tiendas"></div>	
                    </div>
                    <!--/tienda1-->

bueno el codigo se repite para cada uno de los recudros.

y este el resultado


Lo que yo quiere es que si altero el interior del recuadro o sea el tamaño que lo laterales se sigan cerrando tanto en IE como en Firefox.

Gracias

[Mikmoro]

Iniciado por subirol

no te entiendo si se a quese corresponde lo que no se es pq no funciona bien.

Sí, imagino que tú si lo sabes, pero se te ha olvidado que no hemos visto tu código y nadie más sabe a qué corresponde cada cosa

Le echo un vistazo.

[Mikmoro]

Según tu código:

<div class="lateral_tiendas"></div>
<div class="dir_tienda"><p>Puerta del Sol, 4 <br />36201 Vigo - Pontevedra <br />Tel/Fax:[phone]<br /><a href="javascript:ventanaSecundaria('mapas/vigo_puerta_sol.htm')" title="mapa Blucom - Puerta del Sol, 4 - Vigo">Ver mapa</a></p></div>
<div class="lateral_tiendas"></div>

.lateral_tiendas {
background:url(gfx/lateral.png) repeat;
margin:0;
width:2px;
min-height:60px;
height: auto!important;
height: 60px;
float:left;
}

entiendo que lo que quieres hacer que crezca es <div class="lateral_tiendas">.

Y entonces: ¿por qué habrían de crecer, si no contienen nada dentro? Claro que no funciona, lógicamente.

[subirol]

Gracias, Mikmoro.

Código:

                    <div class="tiendas">
                        <div class="top_tiendas"><em>texto</em></div>	
                        <div class="centro_tiendas">
                             <div class="lateral_tiendas"><em>texto</em></div>
                             <div class="dir_tienda">
                    	<p>Avda. Julio Rodríguez Soto,3<br />32500O Carballiño - Ourense <br />Tel/Fax:[phone]<br /><a href="javascript:ventanaSecundaria('mapas/carballino.htm')" title="mapa Blucom - Avda. Julio Rodríguez Soto, 3 bajo - O Carballiño">Ver mapa</a></p>
                             </div>
                             <div class="lateral_tiendas"><em>texto</em></div>
                        </div>
                        <div class="pie_tiendas"><em>texto</em></div>	
                    </div>

que puedo poner hay, por que si meto un texto que no se muestre no me funciona, sigue sin crecer.
Gracias.

[Mikmoro]

Quería decir: si lo que quieres es que crezca según crezca el contenido de la caja, no puedes poner así los laterales; tendrás que hacer que el contenido esté dentro de ellos, si no, no podrán crecer. No porque pongas algo dentro de ellos crecerán cuando lo haga el contenido. ¿Me explico?

A ver si este ejemplo te da una idea de cómo hacerlo para que crezcan los laterales cuando crezca el contenido de la caja.

[subirol]

gracias, voi a intentar aplicarlo a mi web.

Gracias de nuevo.

[Flora]

Prueba esto, a mi me ha funcionado:
_height:60px;
min-height:60px;

pponiendo delante un guión bajo el explorer cogerá esta altura, e ignorará el min height.

Espero k te sirva :)