Problema de centrado en CSS con Internet Explorer

  • Autor Autor ChronoMX
  • Fecha de inicio Fecha de inicio
C

ChronoMX

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Recientemente reestructure el codigo de la pagina de uno de mis clientes, pero hoy me acabo de dar cuenta que en Internet Explorer, no me respeta la propiedad margin: 0 auto la cual es para centrar la pagina, en Firefox (el navegador que uso) si me muestra todo bien, incluso un aviso flotante con boton para cerrarlo, pero en internet explorer no, todo se junta a la izquierda, el aviso no es flotante, y no me respeta los espacios que debe de haber entre el contenido y la sidebar los cuales tienen propiedades de float left y right...

El css es el siguiente:
Insertar CODE, HTML o PHP: 
body {padding: 0;margin: 0;font: 0.7em Tahoma, sans-serif;line-height: 1.5em;background: [B]Enlace eliminado[/B]color: [B]Enlace eliminado[/B]}
a{color:[B]Enlace eliminado[/B]background:inherit;}
a:hover { color: [B]Enlace eliminado[/B] background: inherit; }
h1 { font: normal 2.1em Arial, Sans-Serif; letter-spacing: -1px; padding: 7px 0 0 8px; margin: 0; }
.dark  { color: [B]Enlace eliminado[/B] background: inherit; font-weight: bold; }
h1 a, h2 a { text-decoration: none; }
h1 a:hover, h2 a:hover { color: [B]Enlace eliminado[/B] background: inherit; }
h2 { margin: 0; padding: 0; font: bold 1.7em Arial, Sans-Serif; letter-spacing: -1px; }
h2 { font-size: 1.5em; margin-bottom: 5px; color: [B]Enlace eliminado[/B] background: inherit; }
p {	margin: 0 0 5px 0; }
ul { margin: 0; padding : 0; list-style : none; }
form { 	margin: 0; }
input.search {width: 292px;border: 0;background: #FFF url(input.gif) no-repeat;padding: 4px;color: [B]Enlace eliminado[/B]font-weight: bold;}
input.submit {background: #E0691A url(submit.gif) no-repeat;border: 0;padding: 4px 0;width: 65px;margin: 0 15px 1px 0;color: [B]Enlace eliminado[/B]font: bold 1em Arial, Sans-Serif;}
input.login { width: 150px;border: none; padding: 4px; }
/* layout ------ */
.content {margin: 0 auto;width: 780px;padding: 10px;}
.header { height: 55px;background: [B]Enlace eliminado[/B]color: [B]Enlace eliminado[/B]margin: 3px 0;padding: 10px 0 0 0;border-bottom: 1px solid [B]Enlace eliminado[/B]}
.top_info {float: right;width: 555px;padding: 5px 0 4px 0;border-bottom: 1px solid [B]Enlace eliminado[/B]background: [B]Enlace eliminado[/B]color: [B]Enlace eliminado[/B]}
.top_info_left {width: 200px;float: left;}
.top_info_right {float: right;width: 290px;padding: 0 0 0 35px;border-left: 1px solid [B]Enlace eliminado[/B]}
.browse_category  {font-size: 0.9em;width: 190px;color: [B]Enlace eliminado[/B]background: inherit;}
.bar { clear: both;font-size: 1.1em;height: 30px; color: [B]Enlace eliminado[/B]margin: 0 0 0 0px; background: [B]Enlace eliminado[/B]}
.bar li { margin: 0; padding: 7px 12px 5px 12px;color: [B]Enlace eliminado[/B]background: [B]Enlace eliminado[/B]float: left; }
.bar li.active { background: #E0691A url(bar.gif) no-repeat center top; color: [B]Enlace eliminado[/B]font-weight: bold; padding: 7px 10px 6px 10px;}
.bar li a { font-weight: bold;color: [B]Enlace eliminado[/B] background: inherit;text-decoration: none;} 
.bar li a:hover { color: [B]Enlace eliminado[/B] background: inherit;} 
.search_field { background: #fff url(searchbg.gif) no-repeat right; color: [B]Enlace eliminado[/B]clear: both;font-weight: bold;padding: 7px 25px 10px 10px;margin: 5px 0;}
.grey {color: [B]Enlace eliminado[/B]background: inherit;font-weight: normal;}
.search_form { float: right; }
.subheader {margin: 0px 0 10px 0;border-bottom: 1px solid [B]Enlace eliminado[/B]padding: 5px 0 5px 0;background: [B]Enlace eliminado[/B]color: [B]Enlace eliminado[/B]}
/* left side --------- */
.left {float: left;width: 65%;margin: 0 0 10px 0;}
.left h3 {clear:both;background: #A9C0CE url(corner.gif) no-repeat top right;color: [B]Enlace eliminado[/B]padding: 7px 0 7px 5px;font: bold 1em Tahoma, Arial, Sans-Serif;margin: 0 0 0px 0;}
.left_side {float: left;width: 180px;padding: 0 0 0 10px;margin: 10px 0;}
.left_side a, .right_side a { color: [B]Enlace eliminado[/B] background: [B]Enlace eliminado[/B] }
.right_side {float: right;width: 220px;background: #FFF url(dotted.gif) repeat-y;color: [B]Enlace eliminado[/B]padding: 0 0 0 40px;margin: 10px 0;}
.left_box { margin: 0 0 10px 0; color: [B]Enlace eliminado[/B] background: [B]Enlace eliminado[/B] padding: 3px 0; } 
/* right side ---------- */
.right {float: right;width: 34.6%;margin: 0 0 10px 0;}
.right h3 {background: #6C757A  url(corner.gif) no-repeat top right;color: [B]Enlace eliminado[/B]padding: 7px 0 7px 5px;font: bold 1em Tahoma, Arial, Sans-Serif;margin: 0 0 3px 0;}
.right_articles {background: [B]Enlace eliminado[/B]color: [B]Enlace eliminado[/B]padding: 8px;margin: 0 0 3px 0;}
.right_articles a:link {color:[B]Enlace eliminado[/B]text-decoration:none;}
.right_articles a:visited {color:[B]Enlace eliminado[/B]text-decoration:none;}
.right_articles a:hover {color:[B]Enlace eliminado[/B]text-decoration:none;}
.right_articles a:active {color:[B]Enlace eliminado[/B]text-decoration:none;}


.image {float: left;margin: 0 9px 3px 0;}
/* footer ------ */
.footer { width: 780px;clear: both;text-align: center;padding: 10px 0 10px 0;margin: 0;border-top: 1px solid [B]Enlace eliminado[/B]line-height: 1.8em;}
.footer a { color: [B]Enlace eliminado[/B] background: [B]Enlace eliminado[/B] }

y mi header, el que aplica la estructura al sitio es el siguiente:

PHP: 
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" href="images/style.css" type="text/css" />
<link rel="stylesheet" href="lytebox/lytebox.css" type="text/css" media="screen" />
<title>Mi sitio Web</title>
</head>

<body>
<div class="content">
<div class="header">
<div class="logo">

<div align="center">
	<table border="0" width="98%" id="table1" cellspacing="0" cellpadding="0" height="29">
		<tr>
			<td width="546" valign="middle"><span class="dark">
			<font style="font-size: 20pt; text-decoration: none">Mi sitio Web</font></span></td>
			<td valign="bottom">
			</td>
		</tr>
	</table>

</div>
</div>
</div>

<div class="bar">
	<ul>
		<li class="browse_category">Menú:</li>
		<li><a href="index.php" accesskey="s">Inicio</li>
		<li><a href="productos.php" accesskey="p">Productos</a></li>
		<li><a href="servicios.php" accesskey="s">Servicios</a></li>
		<li><a href="galeriaph.php" accesskey="s">Galeria de Fotos</a></li>
		<li><a href="oficinas.php" accesskey="o">Oficinas</a></li>
	</ul>
</div>

<br>

<div class="left">

Este es el codigo del aviso, el cual en IE tambien me lo muestra a la izquierda fijo, cuando deberia de ir a la derecha flotando

PHP: 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>jQuery(document).ready(function($){$(".notification-close-info").click(function(){$(".notification-box-info").fadeOut("slow");return false;});$(".notification-close-warning").click(function(){$(".notification-box-warning").fadeOut("slow");return false;});});</script>
<style>
.notification-box {position: relative;margin-bottom: 20px;border-radius: 3px;	padding: 10px 10px 10px 32px;background-repeat:no-repeat;background-position: 10px 11px;border: 1px solid;color:#444;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255,255,255,0.4) inset;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255,255,255,0.4) inset;}
a.notification-close {position: absolute;right: 5px;top: 5px;	color: #666 !important;text-decoration: none !important;font-weight: bold;font-size: 14px;padding: 5px;line-height: normal;}
.notification-box p {margin-bottom: 0;margin-top: 20px;}
.notification-box > p:first-child {margin: 0;}
.notification-box-warning {background-color: [B]Enlace eliminado[/B]background-image: url(images/warning.png);border-color: [B]Enlace eliminado[/B]position: fixed;top: 20px;right: 20px;width: 410px;}
</style>
	<div class="notification-box notification-box-warning">
    <p><b><a href="contacto.php">Click Aqui Para Obtener Su Cotizacion En Linea En Menos De 5 Minutos</a></b></p>
    <a href="#" class="notification-close notification-close-warning">x</a>
  </div>

Podrian auxiliarme para ver que estoy haciendo mal, por lo cual IE no me respeta ciertas propiedades del css en IE?
 
Para centrar correctamente se debe usar:
margin:0 auto;
padding:0 auto;
 
Fabián Rodríguez dijo:
Para centrar correctamente se debe usar:
margin:0 auto;
padding:0 auto;
Hacer clic para expandir...

Recién intente implementar el padding como me lo mostraste en "content" sin lograr cambio alguno, he estado buscando posibles soluciones por internet pero no veo cambios
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Digitalplus
Problemas para reproducir videos en mi página
Respuestas
10
Visitas
428
enmanuel0309
enmanuel0309
E
problema con position:fixed
Respuestas
3
Visitas
341
eic2010
E
S
Problema de centrado de botones en versión móvil y escritorio
Respuestas
4
Visitas
302
SNPB
S
K
Posiciones de DIV: Cómo mover la PUBLICIDAD debajo de BUSCAR en HTML y CSS
Respuestas
10
Visitas
758
Kratz
K
A
Problema con Plugin de Amazon en Plantilla de CSS
Respuestas
2
Visitas
207
Alexsevilla
A
Atrás
Arriba