Compañeros, yo nuevamente con este tema, ya hemos hablado sobre lo del margin: auto; que se supone que en IE funciona correctamente.
En este momento les voy a pegar TODO el poco código que tengo que me esta funcionando mal (no centra).
La única manera que puedo lograr centrar en IE es con text align.
HTML:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?=getTitle()?>
<?=getTag('description')?>
<?=getTag('basehref')?>
<?=getMonitorHeader()?>
<style type="text/css" media="all">@import "<?=$tpl_path?>/css/estilos.css";</style>
<style type="text/css" media="all">@import "<?=$tpl_path?>/css/estilos_slide.css";</style>
<script type="text/javascript" src="<?=$tpl_path?>/js/script.js"></script>
<script src="<?=$tpl_path?>/js/s3Slider.js" type="text/javascript"></script>
<link href="<?=$tpl_path?>/font/century_gothic.ttf" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<script type="text/javascript" src="<?=$tpl_path?>/js/carousel.js"></script>
<!--SCRIPT CARUSEL-->
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'carousel', //ID del div que contiene el carrusel
beltclass: 'belt', //Clase del primer div dentro del carrusel, que contiene al resto de divs
panelclass: 'panel', //Clase de cada panel individual
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:1000, wraparound:true, persist:true},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
</head>
<body>
<div id="contenedor_total">
<div id="cont_main_head">
<div id="main_head"></div>
</div>
<div id="cont_head">
<div id="head"></div>
</div>
<div id="cont_medio">
<div id="medio"></div>
</div>
<div id="cont_contenido">
<div id="contenido"></div>
</div>
<div id="cont_foot">
<div id="foot"></div>
</div>
</div>
</body>
</html> bien, ahora el CSS:
Código HTML:
*
{
margin: 0px;
padding: 0px;
}
body
{
}
#contenedor_total
{
}
#cont_main_head
{
display: block;
height: 40px;
border-bottom: solid 1px #333;
}
#cont_main_head #main_head
{
margin: auto;
text-align: left;
width: 990px;
height: 100%;
background: ${navigation_bg};
}
#cont_head
{
display: block;
height: 120px;
border-top: solid 1px #ccc;
border-bottom: solid 1px #333;
background: ${navigation_bg};
}
#cont_head #head
{
margin: auto;
text-align: left;
width: 990px;
height: 100%;
}
#cont_medio
{
display: block;
height: 120px;
border-top: solid 1px #ccc;
border-bottom: solid 1px #333;
background: ${second_bg};
}
#cont_medio #medio
{
margin: auto;
text-align: left;
width: 990px;
height: 100%;
}
leerlo bien porque esto no puede estar pasando (a veces me funciona otras veces no) y la programación en general no funciona de esa manera.
Abraso!