hola tengo una web que me corre super bien en mozilla, definitivamente no he podido arreglar lo del posicionamiento de los elementos en la pagina para los diferentes navegadores, adjunto imagenes y codigo fuente.
nota: ya probe con absolute y relative, actualmente esta relative, tambien coloque un
<center>todo el contenido</center> a manera de que se centrara en todos los monitores.
en mozilla:
en explorer:
con crhome:
codigo css:
Código:
div#cabezera{
position:relative;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #5D5C5C;
width: 800px;
height: 30px;
}
div#princip{
position:relative;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
/*overflow:scroll;*/
border: 1px solid #5D5C5C;
margin-top:+0px;
width: 800px;
height: 600px;
}
div#submenu{
position:relative;
-moz-box-shadow: 0px 0px 0px #5D5C5C;
-webkit-box-shadow: 0px 0px 0px #5D5C5C;
box-shadow: 0px 0px 0px #5D5C5C;
background-image:url(images/fsubmenu.gif);
border: 0px solid #5D5C5C;
margin-top:+0px;
margin-left:-610px;
width: 115px;
height: 600px;
}
div#ejecuta{
position:relative;
background-image:url(images/fprincip.gif);
margin-top:-600px;
margin-left:+103px;
width: 600px;
height: 600px;
}
div#compras{
position:relative;
margin-left:+0px;
margin-top:-550px;
width: 132px;
height: 76px;
}
div#ventas{
position:relative;
margin-left:+350px;
margin-top:-30px;
width: 132px;
height: 76px;
}
div#usuarios{
margin-left:+480px;
margin-top:+100px;
width: 132px;
height: 76px;
}
div#bodega{
position:relative;
margin-left:+430px;
margin-top:+80px;
width: 132px;
height: 76px;
}
div#stecnico{
position:relative;
margin-left:-25px;
margin-top:-10px;
width: 132px;
height: 76px;
}
div#proveedores{
position:relative;
margin-left:-420px;
margin-top:-100px;
width: 132px;
height: 76px;
}
div#crm{
position:relative;
margin-left:-500px;
margin-top:-250px;
width: 132px;
height: 76px;
}
div#reportes{
position:relative;
margin-left:-400px;
margin-top:-240px;
width: 132px;
height: 76px;
}
.bordeizquierdo{
position:relative;
margin-left:-4px;
background-color: #8D8C5C;
border: 1px solid #5D5C5C;
width: 100px;
height: 30px;
}
.bordeizquierdoa{
position:relative;
margin-left:+0px;
background-color: #8D8C5C;
border: 1px solid #5D5C5C;
width: 100px;
height: 30px;
}
.derecha{
position:relative;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #5D5C5C;
-webkit-box-shadow: 0px 5px 0px #5D5C5C;
box-shadow: 0px 0px 5px #5D5C5C;
margin-left:-40px;
background-color: #8D8C5C;
border: 1px solid #5D5C5C;
width: 150px;
height: 20px;
}
.derechaLogo{
position:relative;
margin-left:-80px;
}
.prueba{
position:relative;
width: 100px;
height: 200px;
margin-left:+700px;
margin-top:-625px;
background-color: #8D8C5C;
visibility: hidden;
-moz-box-shadow: 0px 0px 6px #5D5C6C;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 6px #5D5C5C;
}
.bordeRedondoMed{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0px 0px 6px #5D6C5C;
width: 80px;
height: 20px;
background-color: #FFFFFF;
border: 1px solid #5D5C5C;
}
/*estilo de la pagina de inscripcion de empresas importado de hoteles*/
div#hcubi{
position:relative;
-moz-box-shadow: 0px 0px 10px #4D5C5C;
-webkit-box-shadow: 0px 0px 10px #4D5C5C;
box-shadow: 0px 0px 10px #4D5C5C;
-moz-border-radius: 3px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 6px #5D6C5C;
background-color: #8D8C5C;
border: 0px solid #5D5C5C;
width: 120px;
height: 40px;
margin-left:-450px;
margin-top:+0px;
}
div#hrubi{
position:relative;
-moz-box-shadow: 0px 0px 10px #4D5C5C;
-webkit-box-shadow: 0px 0px 10px #4D5C5C;
box-shadow: 0px 0px 10px #4D5C5C;
-moz-border-radius: 3px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 6px #5D6C5C;
background-color: #8D8C5C;
border: 0px solid #5D5C5C;
width: 120px;
height: 40px;
margin-left:-200px;
margin-top:-40px;
}
div#hpubi{
position:relative;
-moz-box-shadow: 0px 0px 10px #4D5C5C;
-webkit-box-shadow: 0px 0px 10px #4D5C5C;
box-shadow: 0px 0px 10px #4D5C5C;
-moz-border-radius: 3px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 6px #5D6C5C;
background-color: #8D8C5C;
border: 0px solid #5D5C5C;
width: 120px;
height: 40px;
margin-left:+50px;
margin-top:-40px;
}
div#hcbi{
position:relative;
-moz-box-shadow: 0px 0px 10px #4D5C5C;
-webkit-box-shadow: 0px 0px 10px #4D5C5C;
box-shadow: 0px 0px 10px #4D5C5C;
-moz-border-radius: 3px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 6px #5D6C5C;
background-color: #8D8C5C;
border: 0px solid #5D5C5C;
width: 120px;
height: 40px;
margin-left:+300px;
margin-top:-40px;
}
div#hncbi{
position:relative;
-moz-box-shadow: 0px 0px 10px #4D5C5C;
-webkit-box-shadow: 0px 0px 10px #4D5C5C;
box-shadow: 0px 0px 10px #4D5C5C;
-moz-border-radius: 3px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 6px #5D6C5C;
background-color: #8D8C5C;
border: 0px solid #5D5C5C;
width: 120px;
height: 40px;
margin-left:+515px;
margin-top:-40px;
}
.ubic{
position:relative;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0px 0px 6px #5D6C5C;
background-color: #ffffff;
border: 0px solid #5D5C5C;
width: 115px;
height: 17px;
}
.ubicb{
position:relative;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0px 0px 6px #5D6C5C;
background-color: #FFFFFF;
border: 1px solid #8D8C5C;
width: 200px;
height: 20px;
}
div#otrainfo{
position:relative;
width:120px;
height:120px;
margin-left:-40px;
margin-top:+410px;
}
si necesitan el codigo fuente:
http://cccloud.herobo.com/celutronik%20ajax/
muchas gracias por la ayuda creo que esta como muy
feo
mi codigo css. si no es eso no se que sera.
uso prototype para el ajax por si algo.
como ya comente ya intente con absolute y relative, actualmente esta relative,