problemas con div

std_alex · #1 (**permalink**) 20/03/2009, 12:01

Mediante un CSS, intento controlar la posicion de algunos <div>, el problema que tengo es que en algunos navegadores no se visualiza bien y se montan unos <div> sobre otros... el codigo que tengo en el CSS, es este:
div.menu
{
margin: 0;
font-size: 80% /*smaller*/;
font-weight: bold;
line-height: 1.1;
text-align:left;
position: absolute;
top: 8.5em;
left: auto;
width: 8.5em;
right: 37em;
}

div.info
{
margin: 0;
font-size: 80% /*smaller*/;
font-family:Arial;
line-height: 1.1;
text-align:left;
position: absolute;
top: 7.5em;
left: 35em;
width: 50em;
right: auto;
}

en algunos navegaores se menta el contenido de un <div> con el otro....
Alguien puede ayudarme....??

Gracias

DragonX · #2 (**permalink**) 20/03/2009, 12:08

Probá con esto:

Código HTML:

Ver original<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style>
.menu, .info{
margin:0;
font-size: 80%;
line-height: 1.1;
text-align:left;
border:1px solid #000; height:250px;
}
.menu{
font-weight: bold;
float:left;
width:20%;
}
 
.info{
font-family:Arial;
float:right;
width:75%;
}
    </style>
  </head>
  <body>
    <div class="menu"></div>
    <div class="info"></div>
  </body>
</html>

std_alex · #3 (**permalink**) 21/03/2009, 12:14

He estado haciendo alguna prueba y parece que funciona mejor que lo que yo tenia. Voy a introducir el codigo que me pasas dentro del css y modificar las caracteristicas de otros div que tengo, a ver como tira... Para que me entere un poco mas... la unica diferencia es que en tu codigo tienes porcentajes y px, mientras que trabajaba con 'em', tengo ahi el error, ¿verdad?

Gracias por tu ayuda

std_alex · #4 (**permalink**) 23/03/2009, 11:59

Veamos me parece que no me explique del todo bien. Aunque con IE 7 y firefox 3 la pagina se muestra correctamente pero en versiones inferiores a IE 7 se superponen algunos divs. Ademas a medida que ampliamos el zoom en firefox se van aproximando hasta que finalmente se superponen. Pueden hacer la prueba con Ctrl + +...la dreccion es (gravityweb punto es ) para que lo vean..

¿Alguien me puede ayudar?

ADJUNTO DE NUEVO EL CSS (Aunque unicamente hace referncia a la posicion div.logo, div.menu, div.info)
@charset "utf-8";
/* CSS Document */
.datos
{
font-size:9px;
color: #000000;
background-color:#eceded;
font-family:Arial;
}
div.logo
{
margin: 0;
font-size: 80% /*smaller*/;
font-weight: bold;
line-height: 1.1;
text-align:left;
position: absolute;
top: 2em;
left: auto;
width: 28em;
right: 37em;
}
div.menu
{
margin: 0;
font-size: 80% /*smaller*/;
font-weight: bold;
line-height: 1.1;
text-align:left;
position: absolute;
top: 8.5em;
left: auto;
width: 8.5em;
right: 37em;
}

div.info
{
margin: 0;
font-size: 80% /*smaller*/;
font-family:Arial;
line-height: 1.1;
text-align:left;
position: absolute;
top: 7.5em;
left: 35em;
width: 50em;
right: auto;
}div.info p
{
font-family:Arial;
font-size:14px;
text-align:justify;
}
div.info ul
{
font-family:Arial;
font-size:14px;
text-align:justify;
}
div.info table
{
font-family:Arial;
font-size:14px;
}
div.info blockquote
{
font-family:Arial;
font-size:14px;
}
/* Esto mantiene fijos los links */
a:hover,a:link,a:visited,a:active
{
/*font-size:9px;*/
color:EA9930;
text-decoration:none;
font-family:Arial;
font-style:italic;
}

h1
{
font-size:12px;
color: #000000;
font-family:Arial;
}
body
{
background-color:#eceded;
font-family:Arial;
font-size:12px;
}
table
{
background-color:#FFFFFF;
border-color:#000000;
font-family:Tahoma;
}
tr
{
border-style:none;
font-family:Arial;
}
td
{
border-style:none;
font-family:Arial;
}
img
{
border-style:none;
font-family:Arial;
}