Centrar pagina asp.net con css en IE8

Question

Hola a todos una pregunta me surgio a la hora de realizar mi proyecto asp.net, tengo una hoja de estilos vinculada a mi master page, y quiero que la pagina quede centrada, con firefox todo queda al 100, pero el problema surge al abrir la pagina con Internet Explorer 8, pues la pagina se me va a la izquierda y no centrada, en el codigo css e utilizado el margin:0 auto; para centrar la pagina.

Agradeceria mucho si me pudiran dar un consejo de como solucionar esto.

Aqui mi codigo css

 /*Imagen de fondo y propiedades tipograficas*/
body {
background: white url(fondo.jpg);
font-family:Verdana,Arial;
font-size:13px;
margin:0 auto;
padding:0;
}

p
{
    margin:0px 0 5px 0;
    }
    
/*para limpiar los elementos flotantes*/
.limpiar:after
{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
   
.limpiar
    {
        display:inline-block;
        }
       
.limpiar
    {
        display:block;
        }
       
* html.limpiar
     {
         height:1px;
            }
            
div#Contenido
{
  margin: 0 auto;
  width:75.250em;
  background-color:#EFE6D6;
  border: 4px solid #FFFFFF;
  margin-bottom:10px;
   } 
  
div#Contenido1
{
   float:left;
   margin-left:0.625em; /*10px*/
   width:62.500em;/*1000px*/
   margin-top:10px;
   margin-bottom:10px;
    }
             
/*Estilos de Cabecera, link a pagina principal invisible.*/

#header {
    background: url('cabecera.png') no-repeat left top;
    width: 77.8em; /*1014px*/
    height: 17em; /*272px*/
    margin-top:-0.312em;/*-5px -14px; Quitar margen superior*/
    padding: 0.000em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

#lbSingOut /*Boton de cerrar Sesion*/
{
    color:White;
    margin-left:730px;
    font-family:Tahoma;
    font-weight:bold;
    letter-spacing:1.42;
    text-decoration:none;
    font-size:17px;
    text-align: left;
    border:0;
    }
  
   a#lbSingOut:hover {   /*Color al pasar el cursor*/
letter-spacing:1.42;
font-weight:bold;
color:#80FFD5;
}


.style2   /*Tabla del Menu de cabecera*/
{
   margin-top:122px;
   margin-left:200px;
   width:637px;
}
 

/*Menu de Cabecera*/

.WhiteLink
{
font-family:Tahoma;
font-weight:bold;
letter-spacing:1.42;
color:#FFFFFF;
font-size:22px;
text-decoration: none;
font-weight:bold;
text-align: left;
}


.WhiteLink:hover
{
background:#E6E6E6;
color:#80FFD5;
text-decoration:none;
}


/*#header h1 {
margin-top: 0.000em;
}

#header a span {
visibility: hidden;
}

a:focus {
width:0.000em;height:0.000em;outline:0.000em;
}


#header a {
    width: 17.6em; /*555px
    height: 4.4em; /*145px
    display: block;
    text-decoration: none;
    top: 1px;
    left: 10px;
}*/

/*Pie de Pagina*/
#pie {
    background: url(pie.png) left no-repeat;
    width: 1001px; /*1001px*/
    height: 142px; /*142*/
    padding: 0.000em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}


/*Menu Pie*/

.style1   /*Tabla*/
{
   margin-top:65px;
   margin-left:200px;
   width:637px;
}
/*Estilos Menu Pie*/
.WhiteLinkp
{
font-family:Tahoma;
font-weight:bold;
letter-spacing:1.42;
color:#000000;
font-size:14px;
text-decoration: none;
text-align: left;
}


.WhiteLinkp:hover
{
color:#4BDDFD;
text-decoration:none;
}

/*Estilos de los demas Menus*/
.WhiteLinkm
{
font-family:Tahoma;
font-weight:bold;
letter-spacing:1.42;
color:#000000;
font-size:15px;
text-decoration: none;
font-weight:bold;
text-align: center;
}

.WhiteLinkm:hover
{
color:#4BDDFD;
text-decoration:none;
}
   
    /*GridView Style*/
.Grid

   
    /*GridView Style*/
.Grid
{
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse: collapse;
}
lid 1px #c1c1c1;
color: #717171;
}
.Grid th
{
padding: 4px 2px;
color: #fff;
background: #424242 url(estilo/grd_head.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.Grid .alt
{
background: #fcfcfc url(estilo/grd_alt.png) repeat-x top;
}
.Grid .pgr
{
background: #424242 url(estilo/grd_pgr.png) repeat-x top;
}
.Grid .pgr table
{
margin: 5px 0;
}
.Grid .pgr td
{
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.Grid .pgr a
{
color: #666;
text-decoration: none;
}
.Grid .pgr a:hover
{
color: #000;
text-decoration: none;
}

 

 

Answer 1

 

lo has probado en IE 9 ?

 

o en IE8 en modo de compatibilidad ?

---

Leandro Tuttini

Blog
Buenos Aires
Argentina

Answer 2

Quítale el margin al body. Comúnmente, lo que se hace es dejar el body con margin:0, paddind:0 y se crea una capa "wrapper" que es la que tiene las propiedades margin:0 auto; width:1000px para centrar el resto de contenidos.

Answer 3

Hola Olilgd.

Muy sencillo. No hacía falta que copiaras toda la CSS.

si tienes esta estructura

<body>
    <div id="divQueQuieresCentrar">
    </div>
</body>

sólo tendrás que tener esta CSS

#divQueQuieresCentrar
{
    margin: 0 auto;
}

Por lo que puedo entender de la CSS que pusiste, el div que quieres centrar es el que tiene por id "Contenido" y que lo tienes puesto correctamente (IE8 acepta bien el margin: auto) pero veo que tienes dentro otro div "Contenido1" que... podría provocarte problemas con ese float...

De todas formas, podría ser que tu IE8 no esté actualizado o que esté en modo compatibilidad con IE7 que reconocía la propiedad margin: auto; para centrar los elementos web que funcionan como bloques. En este caso, la solución sería, en el elemento antecesor, aplicar la propiedad text-align: center;

De esta forma, tu CSS quedaría así

body
{
    text-align: center; /* Para IE7 e IE6 */
}

#divQueQuieresCentrar
{
    margin: 0 auto;  /* Resto de navegadores actuales */
    text-align: left;
}

 

---

"En los momentos de crisis, sólo la imaginación es más importante que el conocimiento"

Blog en Geeks

Answer 4

Gracias Santiago, hice lo que mencionas y al final me quedo centrada la pàgina en ambos exploradores, pero ahora, me surge el problema de mi menu, pues lo hice dentro de una tabla, puesto si le quito el margin-left queda perfectamente centrado en explorer, pero en Firefox no, y en cambio si quito el text-align queda centrado en firefox y en explorer no, y si dejo los dos pues hace caso del margin-left y no del text-align, quedadndo centrado solo en firefox, como podria hacer para que quedara centrado en los dos, agradezo mucho tu ayuda.

.style2

 

/*Tabla del Menu de cabecera*/

{

 

margin-top:122px

;

 

text-align:center

;

 

margin-left:190px

;

 

width:637px

;

}



Answer 5

En este caso deberías hacer lo mismo

Poner la tabla dentro de un contenedor, es decir:

<div id="divMenu">
    <table id="tblMenu"></table>
</div>

Y entonces la CSS debería ser algo así

#divMenu
{
    text-align: center;
}

#tblMenu
{
    margin: auto;
    text-align: left;
}

No obstante, te recomiendo que uses listas <ul> para los menús.

 

---

"En los momentos de crisis, sólo la imaginación es más importante que el conocimiento"

Blog en Geeks

Answer 6

Muchas gracias, santiago al fin me a quedado todo centrado, hize lo que me comentas y quedo al 100, es un poco lioso cuando no se conoce mucho de css.