Problema con posicionamiento de capa en IE7
21 views
Skip to first unread message
Alfonso
Jun 3, 2008, 5:32:07 PM6/3/08
to Ajax-es
hola:
Tengo la siguiente pagina:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<script>
function Cargado(){
// crea una capa com DOM
div = document.createElement("div");
div.setAttribute('position', 'absolute');
div.setAttribute("id", "capa2");
div.style.width='20'//width:20px;
div.style.height='20' //height:20px;
div.style.left='312';
div.style.top='89';
div.style.backgroundImage='url(marcador1.gif)' //background-image:
url(marcador1.gif)
div.setAttribute((document.all ? 'className' : 'class'),
"arrastrarIMG");
document.getElementById("mapa").appendChild(div);
}
window.onload=Cargado</script>
<STYLE type="text/css">
#.arrastrarIMG
{
position:relative;
}
body {
margin-left: 0px;
margin-top: 0px;
}
</STYLE>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<div id="mapa" style="
position:absolute;
width:800px; height:795px;
z-index:1; border: 1px none #000000;
background-image: url(imagenes/PM021421-1.jpg); layer-background-
image: url( imagenes/PM021421.jpg);
left: 0px; top: 0px;" >
<div id="CELDA1" style="
position:absolute;
left:106px; top:68px;
width:20px; height:20px;
clip:rect(2,2,2,2);
background-image: url(marcador1.gif);repeat:no;"
class="arrastrarIMG">
</div>
</div>
</body>
</html>
lo que quiero es que una vez cargada la pagina se ejecute la funcion
Cargado la cual crea una capa mediente Javascript y la coloque como
una hija de la capa mapa en una posicion concreta (por ejemplo
div.style.left='312'; div.style.top='89'.
Pues bien esto lo realiza bien si el navegador es el IE6 pero si es
IE7 crea la capa pero la coloca en la coordenada 0,0
sabeis como se puede solucionar?
Gracias
Alfonso
Tengo la siguiente pagina:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<script>
function Cargado(){
// crea una capa com DOM
div = document.createElement("div");
div.setAttribute('position', 'absolute');
div.setAttribute("id", "capa2");
div.style.width='20'//width:20px;
div.style.height='20' //height:20px;
div.style.left='312';
div.style.top='89';
div.style.backgroundImage='url(marcador1.gif)' //background-image:
url(marcador1.gif)
div.setAttribute((document.all ? 'className' : 'class'),
"arrastrarIMG");
document.getElementById("mapa").appendChild(div);
}
window.onload=Cargado</script>
<STYLE type="text/css">
#.arrastrarIMG
{
position:relative;
}
body {
margin-left: 0px;
margin-top: 0px;
}
</STYLE>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<div id="mapa" style="
position:absolute;
width:800px; height:795px;
z-index:1; border: 1px none #000000;
background-image: url(imagenes/PM021421-1.jpg); layer-background-
image: url( imagenes/PM021421.jpg);
left: 0px; top: 0px;" >
<div id="CELDA1" style="
position:absolute;
left:106px; top:68px;
width:20px; height:20px;
clip:rect(2,2,2,2);
background-image: url(marcador1.gif);repeat:no;"
class="arrastrarIMG">
</div>
</div>
</body>
</html>
lo que quiero es que una vez cargada la pagina se ejecute la funcion
Cargado la cual crea una capa mediente Javascript y la coloque como
una hija de la capa mapa en una posicion concreta (por ejemplo
div.style.left='312'; div.style.top='89'.
Pues bien esto lo realiza bien si el navegador es el IE6 pero si es
IE7 crea la capa pero la coloca en la coordenada 0,0
sabeis como se puede solucionar?
Gracias
Alfonso
ayaxrojo
Jun 4, 2008, 7:48:48 PM6/4/08
to Ajax-es
Hola que tal Alfonso, tengo malas noticias para Usted, no importa la
posición que declares via CSS, ya que esta depende de la resolución
del monitor. Esto es básico, en la web encontraras bastante
información al respecto.
Bien, lo que yo haría en tu caso (nunca lo he intentado), pero
encontre un ejemplo que te puede ser útil
http://www.plus2net.com/php_tutorial/php_image_coordinates.php
Suerte!
posición que declares via CSS, ya que esta depende de la resolución
del monitor. Esto es básico, en la web encontraras bastante
información al respecto.
Bien, lo que yo haría en tu caso (nunca lo he intentado), pero
encontre un ejemplo que te puede ser útil
http://www.plus2net.com/php_tutorial/php_image_coordinates.php
Suerte!
xelA
Jun 11, 2008, 12:43:54 PM6/11/08
to Ajax-es
bueno tengo que decir que esto es un tema mas relacionado a CSS y el
mal comportamiento de IE7 con esta tecnología, es un tema muuyyyyy
tocado en la comunidad de CSS y hay varias formas de resolverlo,
tambien te recomendaria que comiences a usar css por aparte, como un
archivo externo para que lo puedas reutilizar en otros proyectos o
paginas del mismo, entonces tu codigo quedaria algo asi,
quitas el codigo siguiente:
<STYLE type="text/css"> </style>
colocas en su lugar el siguiente:
<link rel="stylesheet" type="text/css" href="miarchivo.css" />
adentro del "miarchivo.css" tendiras que colocar toda tu codigo que
tenias en etiqueta de style
y en tu codigo tendrias algo como
<div id="mapa" class="cuadro"></div>
a parte de eso te recomiendo que veas esta pagina
http://www.positioniseverything.net/articles/poll/star-html.php
explica como usar los * para usar el css en algunas versiones del ie7
o ie6.
Saludos,
Alejandro Rigalt
mal comportamiento de IE7 con esta tecnología, es un tema muuyyyyy
tocado en la comunidad de CSS y hay varias formas de resolverlo,
tambien te recomendaria que comiences a usar css por aparte, como un
archivo externo para que lo puedas reutilizar en otros proyectos o
paginas del mismo, entonces tu codigo quedaria algo asi,
quitas el codigo siguiente:
<STYLE type="text/css"> </style>
colocas en su lugar el siguiente:
<link rel="stylesheet" type="text/css" href="miarchivo.css" />
adentro del "miarchivo.css" tendiras que colocar toda tu codigo que
tenias en etiqueta de style
y en tu codigo tendrias algo como
<div id="mapa" class="cuadro"></div>
a parte de eso te recomiendo que veas esta pagina
http://www.positioniseverything.net/articles/poll/star-html.php
explica como usar los * para usar el css en algunas versiones del ie7
o ie6.
Saludos,
Alejandro Rigalt
Reply all
Reply to author
Forward
0 new messages