Ayuda con diseño

[celineadiction]

Mi problema es este:





se pierde el diseño cuando usamos Internet Explorer.
Así que o lo hago para uno, o para el otro :S

Apreciaría que me dieran ideas de cómo solucionarlo

Gracias por su ayuda

[pitufoweb]

seria mas fácil ayudarte si nos da la URL de la pagina.




Saludos

[celineadiction]

Iniciado por pitufoweb

seria mas fácil ayudarte si nos da la URL de la pagina.




Saludos

puedo poner solamente el código, porque esas páginas estan solamente en mi ordenador

[pitufoweb]

Claro, también.




Saludos

[celineadiction]

Este es el código de la hoja de estilo

Código HTML:

#enc
{
    font-family:Tahoma;
    text-align:center;
}
 
table
{
    margin-left:auto;
    margin-right:auto;
}
 
th
{
    background-color:#CEF6F5;
    font-family:Verdana;
    font-size:12px;
}
 
.ver,.ver2,.io,.al
{
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    padding-right:5px;
}
 
.ver,.ver2,.io,.ed,.al,.m1
{
    font-size:12px;
    font-family:Tahoma;
}
 
.msg
{
    width:400px;
    height:150px;
    border-style:solid;
}
 
.m1
{
    text-align:center;
}
.ver1
{
    margin-left:auto;
    margin-right:auto;
    border-style:solid; 
}
.ver
{
    background-color:#CEF6F5;
}
 
.io
{
    background-color:#D0A9F5;
}
 
.ed
{
    text-align:center;
    background-color:#D0A9F5;
}
 
#Field2,#Datos,#cuerpo,#registrar,#enca,#encabe,#encabezado,#enc,#titulo
{
    margin-left:auto;
    margin-right:auto;
    
}
 
#Field1
{
    background-color:#610B0B;
    width:700px;
    float:left;
    height:50px;
    font-family:Tahoma;
    font-size:13px;
    text-align: center;
}
 
.ver2
{
    width:110px;
}
 
#leg
{
    color:#A4A4A4;
    font-family:Tahoma;
    font-weight:bold;
    font-size:14px;
}
 
#dato
{
    border-left-style:dotted;
}
#Datos
{
    border-left-style: dotted;
    border-right-style:dotted;
    border-bottom-style:dotted;
    border-top-style:dotted;
    border-color:green;
    width:400px;    
}
 
#cierra
{
    font-family:Tahoma;
    font-size:13px;
    font-weight:bold;
    background:transparent url(link1.png)  no-repeat;
    background-position:center;
    text-decoration:None;
    color:black;
    display:block;
    width:150px;
}
 
#cierra:hover
{
    font-family:Tahoma;
    font-size:13px;
    font-weight:bold;
    background:transparent url(link1.png)  no-repeat;
    background-position:center;
    Text-decoration:none;
    color:gray;
    display:block;
 
}
#cierra:active
{
    font-family:Tahoma;
    font-size:13px;
    font-weight:bold;
    background:transparent url(link2.png) 0 0 no-repeat;
    background-position:center;
    Text-decoration:none;
    color:blue;
    display:block;
    width:150px;
}
 
#encabezado
{
    border-bottom-style: double;
    background-color:#610B0B;
    width:1200px;
    height:50px;
    color:#D8D8D8;
}
 
#cuerpo
{
    width:600px;
    float:left;
}
 
.logi
{
    font-family:Tahoma;
    font-size:13px;
    color:#D8D8D8;
}
#encabe, #encabezado{
    width:1200px;
    background-color: #3b0b0b;
    border-bottom-style: solid;
    border-top-style: none;
    font-family: Tahoma;
    height: 80px;
}
 
#imagen
{
    width:300px;
    float:left;
    text-align:right;
    background-color:#3B0B0B;
}
 
#enca
{
    width:600px;
    font-family:Tahoma;
    text-align:center;
    border-bottom-style: double;
    color:white;
}
 
p
{
    text-align:center;
}
 
#Field2
{
    width:1200px;
    height:650px;
    background-image:url(gradiente-listo.jpg);
    background-repeat:repeat-x;
}
#cuervo 
{
    background-image: url(cuervo2.png);
    background-position: center;
    background-repeat: no-repeat;
    float:left;
}
 
#cuerpo,#cuervo
{
    width:600px;
    height:600px;
}
 
h2
{
    text-align:center;
    font-family: Tahoma;
    font-style: normal;
    font-weight: bold;
    background-color:red;
}
 
h1
{
    text-align:center;
    font-family:Tahoma;
    font-weight:bold;
    line-height:50px;
    width:1200px;
}
 
#pie
{
    text-align:right;
    font-family: Tahoma;
    font-size:12px;
    width:1200px;
    height:50px;
    line-height:100px;
}
 
.alu
{
    width:1200px;
}
 
#leyendaBien
{
    font-family:Teen Light;
    font-weight:bold;
    font-size:30px;
    text-align:center;
    height:100px;
    line-height:50px;
}
 
#titulo
{
    
    line-height:70px;
    color:white;
    text-align:center;
    Font-family:Tahoma;
    font-size:40px;
    width:1200px;
    background-color: #3b0b0b;
    border-bottom-style:double;
}
 

[celineadiction]

Este es el de la pantalla que ven en las imágenes

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
    <link rel="shorcut icon" href="editar.png">
    <link href="estilo.css" rel="stylesheet" type="text/css" media=screen>
<title>Alta de usuario</title>
</head>
<body>
       <?php 
 
    mysql_connect("localhost","root","admin");
    mysql_select_db("alumnos");
       ?>
    <div id="encabe">
    <div id="imagen"><img src="itnl.jpg"></div>
    <fieldset id="Field1">
     <legend id="leg"> Iniciar Sesi&oacute;n</legend>
        <div id='LogIn'>
         <form action='valida.php' method='post'>
          <table class='log'>
            <tr>
            <td class="logi">Usuario: <input type='text' name='nombreUsuario' size='30'></td>
            <td class="logi"> Contrase&ntilde;a: <input type='password' name='clave' size='30'></td>
            <td valign='bottom' align='center' colspan='2'><input type='submit' value='Entrar'></td>
            </tr>
          </table>
         </form>
        </div>
        </div>
            </fieldset>
    
    <div id="Field2">
    
    <div id="cuervo">
 
    </div>
    
    <div id="cuerpo">
    <div id ="registrar">
        <h1 id="enca"> Reg&iacute;strate</h1>
    </div>
    
    <div id="dato">
    <fieldset id="Datos"><legend id="leg">Datos de la cuenta</legend>
    <form action="guardar.php" method="post">
    <table>
        <tr><td class="ver2">No Control: </td><td><input type="text" name="NC" size='30'></td></tr>
        <tr><td class="ver2">Nombre de usuario</td><td><input type="text" name="username" size="30"></td></tr>
        <tr><td class="ver2">Contraseña</td><td><input type="password" name="pw" size="30"></td></tr>
    </table></fieldset>
    
    <fieldset id="Datos"><legend id="leg">Datos Personales</legend>
    <table>
        <tr><td class="ver2">Nombre: </td><td><input type="text" name="Nombre" size='30'></td></tr>
        <tr><td class="ver2">Apellido: </td><td><input type="text" name="Apellido" size='30'></td></tr>
        <tr><td class="ver2" valign="top">Direccion:</td><td><textarea name="Direccion" cols="24" rows="4"></textarea></td></tr>
    </table></fieldset>
    <fieldset id="Datos"><legend id="leg">Información Adicional</legend>
    <table>
        <tr><td class="ver2">Email: </td><td><input type="text" name="Email" size='30'></td></tr>
        <tr><td class="ver2">Edad: </td><td><input type="text" name="Edad" size='30'></td></tr>
        <tr><td colspan="2" class="al" align="center"><input type="submit" value="Guardar"></td></tr>
    </table></fieldset>
    </form>
    </div>  
    </div>
 
    <div id="pie">
    Creado por Emma Gabriela Colorado Mac&iacute;as
    </div>
    </div>
</body>
</html>
 

[pitufoweb]

ok, espera un momento.




Saludos

[pitufoweb]

hay varios errores en el HTML, primero corrige esos errores. Pasa el validador del W3C.



Saludos

[celineadiction]

Iniciado por pitufoweb

hay varios errores en el HTML, primero corrige esos errores. Pasa el validador del W3C.



Saludos

en la hoja de estilo o en el archivo de alta?

[pitufoweb]

En el HTML.




Saludos

[Anonimo12]

Al haber errores en las etiquetas, algunos navegadores los interpretan como espacios en blanco (o al menos eso me sucedía en una de mis páginas), creo que eso es lo que hace que se desplazan las tablas hacia la derecha.

Saludos =)

[Efe_P]

Hola, generalmente esas diferencias entre navegadores se dan porque no están especificadas las medidas exactas de todos los elementos. ¿Que significa esto? A veces, los valores por defecto son interpretados de diferentes formas por cada navegador, sobre todo los margins y paddings.

Te recomiendo bajar el firebug, e inspeccionar los elementos para ver cual es el que te esta moviendo todo a la derecha, o simplemente especificar margenes y anchos de los que formen parte de esa linea.

También asegurate de que el html valide, como te dijeron mas arriba, ya que va a ahorrar muchos dolores de cabeza.

Saludos y espero que te sirva.
Facu.

-------------------------------------
[URL="http://www.cooperativaelmate.com.ar"]http://www.cooperativaelmate.com.ar[/URL]

[celineadiction]

Muchisimas gracias por recomendarme ese validador!!!!
me ha servido de maravilla, ahora estoy en proceso de corregir esos errores


mchisimas gracias

[emprear]

celineadiction:

Primero, tenes que recordar que el atributo ID debe de tener un valor único.
P ej:

id="leg"
id="leg"

para varios tags, está mal

debería ser

id="leg1"
id="leg2"

Etc.

Segundo:

Si vás a incluir en tu doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

entonces tus input e img deben estar debidamente cerrados, tenés completamente mal anidados los divs, forms, fieldset y legend...
Corrigiendo esto, se corrige el diseño del form en ie, pero se desacomoda la tabla superior, te recomiendo que rehagas todo cuidadosamente, por lo pronto tu html para body correcto sería

Código HTML:

<body>
<div id="encabe">
<div id="imagen">
<img src="itnl.jpg" alt="" />
</div>
<fieldset id="Field1">
<legend id="leg0">Iniciar Sesión</legend>
<div id='LogIn'>
<form action='valida.php' method='post'>
<table class='log'>
<tr>
<td class="logi">
Usuario: <input type='text' name='nombreUsuario' size='30' />
</td>
<td class="logi">
Contraseña: <input type='password' name='clave' size='30' />
</td>
<td valign='bottom' align='center' colspan='2'>
<input type='submit' value='Entrar' />
</td>
</tr>
</table>
</form>
</div>
</fieldset>
</div>
<div id="Field2">
<div id="cuervo"></div>
<div id="cuerpo">
<div id="registrar">
<h1 id="enca">
Regístrate
</h1>
</div>
<div id="dato">
<form action="guardar.php" method="post">
<fieldset id="Datos1">
<legend id="leg1">Datos de la cuenta</legend>
<table>
<tr>
<td class="ver2">
No Control:
</td>
<td>
<input type="text" name="NC" size='30' />
</td>
</tr>
<tr>
<td class="ver2">
Nombre de usuario
</td>
<td>
<input type="text" name="username" size="30" />
</td>
</tr>
<tr>
<td class="ver2">
Contraseña
</td>
<td>
<input type="password" name="pw" size="30" />
</td>
</tr>
</table>
</fieldset>
<fieldset id="Datos2">
<legend id="leg2">Datos Personales</legend>
<table>
<tr>
<td class="ver2">
Nombre:
</td>
<td>
<input type="text" name="Nombre" size='30' />
</td>
</tr>
<tr>
<td class="ver2">
Apellido:
</td>
<td>
<input type="text" name="Apellido" size='30' />
</td>
</tr>
<tr>
<td class="ver2" valign="top">
Direccion:
</td>
<td>
<textarea name="Direccion" cols="24" rows="4">
</textarea>
</td>
</tr>
</table>
</fieldset>
<fieldset id="Datos3">
 
<legend id="leg3">Información Adicional</legend>
<table>
<tr>
<td class="ver2">
Email:
</td>
<td>
<input type="text" name="Email" size='30' />
</td>
</tr>
<tr>
<td class="ver2">
Edad:
</td>
<td>
<input type="text" name="Edad" size='30' />
</td>
</tr>
<tr>
<td colspan="2" class="al" align="center">
<input type="submit" value="Guardar" />
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
<div id="pie">
Creado por Emma Gabriela Colorado Macías
</div>
</div>
</body>
 

el css, no lo toque ni revisé, pero, no garantizo nada porque si corregí los id repetidos de algunos elementos.


Saludos

[celineadiction]

si, eso ya lo revisé muchisimas gracias n_n
ahora solamente me keda corregir el Field1 que ese por mas que le muevo no logro que se mire igual en IE que en google chrome, en google chrome se mira muy bien, pero en IE se corre el color hacia arriba

[Anonimo12]

Puedes probar a definir las medidas de los elementos con los que tienes problemas.

Saludos.