Se ve bien mal en IE pero bien en Firefox

[CrepitantE]

Recién estoy aprendiendo css, tengo un problema me muestra las paginas con errores en Internet Explorer pero en firefox me salen perfecto.

¿¿Hay algo extra en internet explorer??




Acá están las imagenes
-----------------------------------------------------------------------------------------------
Internet explorer:

************************************************** **********
Firefox;

************************************************** **********

Estructura que uso:
Las lineas de rojo representan cada tabla creada, la azul representa la division entre dos columnas.

************************************************** **********
************************************************** **********
************************************************** **********

Este es el codigo html donde está el problema

Código:

<table cellspacing=0 class="tabla_main">
<tr>

<td style="background-color: #142140;  width: 209px;" valign="top">

<div id="menu01"><img src="imagenex/jaime3_menu1.gif" alt="Menu Principal" align="left"><img src="imagenex/jaime3_menu3.gif" align="right"></div> 
<div id="textoloco1">Menú</div>

<table id="tabla04" cellspacing=0 cellpadding=0><tr>

<td bgColor="#8b9fb8" height="24" onMouseOver="this.className='d2_2'" onMouseOut="this.className='d1_1'"><div id="menu02"> - Home</div></td></tr><tr>

<td bgColor="#b6c2d1" height="25" style="border-top: 1px solid #355074" onMouseOver="this.className='d2_2'" onMouseOut="this.className='d2_1'"><div id="menu02"> - Fotos</div></td></tr><tr>

<td bgColor="#8b9fb8" height="25" onMouseOver="this.className='d2_2'" onMouseOut="this.className='d1_1'" style="border-top: 1px solid #355074"><div id="menu02"> - Tutoriales</div></td></tr><tr>

<td bgColor="#b6c2d1" onMouseOver="this.className='d2_2'" onMouseOut="this.className='d2_1'" height="25" style="border-top: 1px solid #355074; border-bottom: 1px solid #bedaff"><div id="menu02"> - Textos</div></td></tr><tr>

<td bgColor="#8b9fb8" height="25" onMouseOver="this.className='d2_2'" onMouseOut="this.className='d1_1'" style="border-top: 1px solid #355074"><div id="menu02"> - Comentarios</div></td></tr><tr>

<td bgColor="#b6c2d1" onMouseOver="this.className='d2_2'" onMouseOut="this.className='d2_1'" height="25" style="border-top: 1px solid #355074; border-bottom: 1px solid #bedaff"><div id="menu02"> - Sobre mi</div></td></tr><tr>

</table>

y este es el css:

Código:

body 
{
background-color: #c2cde0;
margin: 0;
padding: 0;
}

.tabla_main {
padding: 0px;
margin: 0px;
border: 0px;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
h1 {
font-family: verdana;
color: #9dff77;
font-size: 18pt;
}

h2 {
font-family: verdana;
color: #98add3;
font-size: 13px;

}


.main1 {
background-image: url("imagenex/jaime3_02.gif");
width: 768px;
height: 130px;


}
.tabla_1_2 {
background-image: url("imagenex/barra1_01.png");
width: 48px;
height: 34px;
border-left: 1px solid #FFFFFF;
}

.tabla_1_3 {
background-image: url("imagenex/barra1_02.png");
background-repeat: repeat-x;
width: 709px;
height: 34px;
}
.tabla_1_4 {
background-image: url("imagenex/barra1_03.png");
width: 13px;
height: 34px;
border-right: 1px solid #FFFFFF;
}

.principal1  {
width: 538px;
background-color: #142140;
color: #00FF00;
text-align: justify;
height: 250px;
text-indent: 19px;
padding-right: 20px;
}

.principal2  {
width: 40px
}

.tabla2_1 {
}

#menu01{
margin: 42px 15px;
background:url(imagenex/jaime3_menu2.gif);
background-repeat: repeat-x;
position: absolute;
width: 178px;
}


#textoloco1{
color: white;
margin: 48px 45px;
font-family: verdana,arial,tahoma;
font-weight: bolder;
font-size: 14px;
position: absolute;

}

#copyright{
font-family: arial; 
font-size: 8.5pt;
text-align: center;
}

#menu02{
font-family: tahoma;
font-size: 10pt;
padding: 0px 20px;
font-weight: bold;
color: #0d2039;
}

.menu03 a {
font-family: tahoma; 
font-size: 10pt;
padding: 0px 20px;
}

#tabla04 {
margin: 70px 15px; 
border-left: 1px solid #bedaff;
border-right: 1px solid #bedaff; 
border-top: 1px solid #bedaff; 
width: 178px;
}

Necesito ayuda, sugerencias para solucionar este problema, hay algo que pase en internet explorer, alguna sugerencia con el código???....Se los agradeceria mucho

[hades87]

yo te aconsejaria que lo de fotos y todo eso lo hicieras con una lista no numerada o sea con ul y li.

Tutorial para hacer menuús con css y listas no numeradas

PD: además e aconsejo de que no maquetees con tablas, y aprendas con css ^^

[CrepitantE]

El problema (si mal no estoy) es que no me reconoce la etiqueta margin Internet Explorer...

[hades87]

pues esas etiquetas ie si que las ha de reconocer, de todas formas trada de hacer el menu con listas y asi te olvidas de tantas complicaciones :D

[CrepitantE]

display: inline;

Le agregué esta etiqueta y sirve en el internet explorer pero se daña en el firefox.

EDITO: YA LO SOLUCIONÉ!!!

La solución es:
le agrego: _display:inline; y funciona perfectamente

De todas modos agradezco bastante tu colaboración y buena intención.

[hades87]

jeje de nada, de todas formas te aconsejo encarecidamente que te mires ese tutorial, ya que con listas los menús son simplismos de hacer y te dan gran cantidad de juego ^^

[CrepitantE]

Me voy a leer los documentos, he visto muchas paginas donde no usan tablas (como la de w3), solo voy a colocar la página para tener algo terminado. Hay otros proyectos en mente, para esto si pienso aprender mas sobre CSS ya que me ahorraría gran cantidad de trabajo.

[hades87]

ya, yo antes también maquetaba con tablas, pero ahora estoy traspasando lo que estaba hecho con tablas a css, ya que te da infinidad de juego y mucha versatilidad ^^.

Y lo del menú con listas es algo muy fácil y con lo que los menús loas haras muy rápido y muy fáciles de personalizar ^^