div encima de img internet explorer

vahn · #1 (**permalink**) 18/08/2009, 00:25

ya bueno ojala me ayuden tengo esto

Código PHP:

  <div id="container"> 
<img id="imagenPosicionCanal" class="imagenPosicionCanal" src="images/B3.png"  /> 
</div> 
<div id="resizeMe"> 
    <div id="resizeSE"></div> 
    <div id="resizeE"></div> 
    <div id="resizeNE"></div> 
    <div id="resizeN"></div> 
    <div id="resizeNW"></div> 
    <div id="resizeW"></div> 
    <div id="resizeSW"></div> 
    <div id="resizeS"></div> 
</div>

con css

Código PHP:

  #resizeMe 
{ 
    float:none; 
    cursor: move; 
    background-color:#000000; 
    border-width: 2px; 
    border-style: outset; 
    border-color: #CCCCCC; 
     
} 
#container img 
{ 
    float:left; 
    top: 50px; 
    left: 50px; 
    width: 650px; 
    height: 450px; 
 
}

el problema que en firefox y chrome funciona y me coloca el div encima de la imagen pero en internet explorer me lo coloca abajo la imagen , ya he cambiado varias veces las propiedaddes de posicion y float y no me a funcionado , alguna idea para dejarlo funcionando bien en firefox y IE ( colocar el cuadro negro encima de lo azul).

Imagen como se me ve h t t p : //img37.imageshack.us/img37/8769/sinttulo1dhv.jpg

emiliodeg · #2 (**permalink**) 18/08/2009, 06:18

pq no usas posicionamiento absluto en vez de flotar?

Código html:

Ver original<div id="container">
<img id="imagenPosicionCanal" class="imagenPosicionCanal" src="images/B3.png"  />
 
<div id="resizeMe">
    <div id="resizeSE"></div>
    <div id="resizeE"></div>
    <div id="resizeNE"></div>
    <div id="resizeN"></div>
    <div id="resizeNW"></div>
    <div id="resizeW"></div>
    <div id="resizeSW"></div>
    <div id="resizeS"></div>
</div>  
 
</div>

Código css:

Ver original#conteiner{position:relative}
#resizeSE{position:absolute;bottom:0;right:0}
#resizeE{position:absolute;bottom:50&#37;;right:0}
#resizeNE{position:absolute;top:0;right:0}
#resizeN{position:absolute;top:0;right:50%}
....

espero te sirva de ayuda

goyo_ · #3 (**permalink**) 18/08/2009, 13:49

Marranisimo tu codigo, lo limpie un poco:

Código:

#resizeMe
{
    cursor: move;
    background: #000;
    border: 2px outset #CCC;
}
#container
{
	width: 650px;
	height: 450px;
	background: url(images/B3.png) no-repeat;
}  
</style>

<div id="container">
        <div id="resizeMe">
                <div id="resizeSE"></div>
                <div id="resizeE"></div>
                <div id="resizeNE"></div>
                <div id="resizeN"></div>
                <div id="resizeNW"></div>
                <div id="resizeW"></div>
                <div id="resizeSW"></div>
                <div id="resizeS"></div>
        </div>   
</div>

Me imagino que el divites tambien puede ser reducido.

vahn · #4 (**permalink**) 18/08/2009, 13:50

up se me olvido que los div interior estan bien posicionados los resizes, resizeW( esoso no los pegue en el codigo pq es mucho css siendo que en ellos no tengo el problema) el problema es con el div de img y el resizeMe , los demas van bien posicionados con respecto al div padre ( problema en IE).

kseso? · #5 (**permalink**) 18/08/2009, 14:05

Otra forma de hacerlo:

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>kseso? jugando con css</title>
<style type="text/css">
* {margin: 0; padding: 0; border: 0; position: relative;}
html, body {
background-color: #cdcdcd;
}
#container {
/* si necesitas...*/
}
#container img {position: absolute; left: 0; top: 0;}
 
.resizeMe {
background-color: rgba(0,0,0,0.5); /* utilizar opacity y su equivalencia para ie si fuese necesario*/
height:100px;
left:190px;
top:114px;
width:100px;
}
</style>
</head>
<body>
  
<div id="container">
<img src="http://share.skype.com/sites/es/skype/skype32ready.jpg" />
<div class="resizeMe">
</div>
</div>
</body>
</html>

Omito los #resizeXXX.
Sólo es cuestión de adaptar el código anterior a tus particularidades.

Un saludo

vahn · #6 (**permalink**) 18/08/2009, 16:33

gracias ya lo solucione dejando el primer div en absolut y el segundo relativo , ademas de no borrar los temprales

(error mio).