AYUDA! se me va todo hacia la izquierda en IE

Italico76 · #1 (**permalink**) 20/12/2010, 14:01

AMIGOS....HOLA!

Estoy volviendome loco......con unos CSS que se ven PERFECTOS en FF, Chrome, Opera y Safari.......pero HORRIBLES en IE (todas las versiones)

Mi web es minicio.net y.. sucede que como pueden ver si entran a IE, que el left_sidebar es como si no existiese! lo intenté colorear pero no se porque......tampoco me coje color.

A ver si alguien se da idea de donde esta mi confusion

MIL GRACIAS !!!!!

PD: version sin iframes aca y pasteo a continuacion la plantilla que creé y los css

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD -//W3C//DTD HTML 4.01//EN//EN">
<html>
<head>
<? $tpl = Tpl::singleton(); ?>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><?= $tpl->get('title'); ?> </title>
<meta name="description" content="<?= $tpl->get('description'); ?> "/>
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />
<link rel="shortcut icon" href="web/img/favicon.ico" /> 

<script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js"> /* http://www.dynamicdrive.com/ */
</script>

<link rel="stylesheet" type="text/css" href="web/css/dropdowntabfiles/bluetabs.css" />
<link rel="stylesheet"type="text/css" href="web/css/tutto.css" />
<script type="text/JavaScript" src="./Pagina de Incio_files/jquery-1.2.6.js"></script>

</head>
<body>
<div id="container">
<div id="header">
<a href="/">
<img src="web/img/<?= $tpl->get('logo'); ?>" border="0" id="logo" />
</a>
</div>
<p/>

<div id="left_sidebar">
<?= $tpl->get('left'); ?>
</div>

<div id="right_sidebar">
<?= $tpl->get('right'); ?>
</div>

<div id="main_content">

<div>
<?
require('tpl/sub/menu.php');
require('tpl/sub/cse_form.php');
require('tpl/sub/desplegable.php');
?>
</div>
<p/><br/>
<?= $tpl->get('content'); ?>

<div id="inner_footer">
<? include "tpl/sub/icon_access.php"; ?>
</div>

</div>

<div id="footer">
<?= $tpl->get('footer'); ?>
</div>

</div>
</body>
</html>

tutto.css

Cita:

body {
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
}

h1 {}
h2 {}
h3 {}
a {}
a:visited {}
a:hover {}
p {}

/** CUSTOM CLASSES **/
#container {
width: 100%;
margin-left:0;}

#header {
text-align: center;
background-color: #FFFFFF;
}

#left {
float: left;
width: auto;
font-size: 12px;
text-align: left;
background-color: #F0B555;
}

#right{
float: right;
width: auto;
font-size: 12px;
color: #000000;
text-align: center;
background-color: #F0B555;
}

#main_content {
font-size: 12px;
color: #000000;
text-align: left;
width: 575px;
margin-right: auto;
margin-left: auto;
min-height:600px;
background-color: #F0B555;
}

#inner_footer {
text-align: left;
background-color: #c5ff0a;
}

#footer {
text-align: center;
/* background-color: #c5ff0a; */
}

@namespace url(http://www.w3.org/1999/xhtml);#gbarl{ border-top: 1px solid #666; }

.bz_rr div{
background-color: #333;
}

.bz_rbbb{
color: #FFF;
}

.bz_mestri, .bz_mestri_on, .bz_mestri_over, .bz_mesfb, .bz_meff, .bz_mept{
background-color: #333;
border: 1px solid #666;
}

.bz_mec1, .bz_mec2, .bz_mec3{
background-color: #000;
}

/* Dock */
#bar {
background:#444;
position:fixed;
bottom:0px; left:0px;
width:100%;
height:25px;
z-index:0;
}

#icon_access {
position:fixed;
bottom:45px;
left:50%;
margin-left:-290px;
}

Italico76 · #2 (**permalink**) 21/12/2010, 06:01

Nadie ? :(

GAST0N · #3 (**permalink**) 21/12/2010, 11:52

porque no creas una hoja de estilo para el IE , solo ingresando las reglas que hacen que en IE se vea bien ??

alexk · #4 (**permalink**) 21/12/2010, 12:27

recomiendo cambiar tu doctype a XHTML, y funcionara en IE6 (que no dices la version) .
tambien existen otros metodos "poco ortodoxos"
body{text-align:center;}
luego un div contenedor
#wrap{text-align:left;}
no es lo correcto pero funciona, o bien centrar con posicion abosluta donde damos left:50%; y con margin-left:-00px; negativo restamos el 50% del width del contenedor....
pero bueno es un tema bastante, tratado ya, asi que mejor usa el buscador

GAST0N · #5 (**permalink**) 21/12/2010, 12:32

Cita:

Iniciado por alexk

recomiendo cambiar tu doctype a XHTML, y funcionara en IE6 (que no dices la version) .
tambien existen otros metodos "poco ortodoxos"
body{text-align:center;}
luego un div contenedor
#wrap{text-align:left;}
no es lo correcto pero funciona, o bien centrar con posicion abosluta donde damos left:50%; y con margin-left:-00px; negativo restamos el 50% del width del contenedor....
pero bueno es un tema bastante, tratado ya, asi que mejor usa el buscador

tenes razon ahora que lo mencionas...si cambia el doctype le va andar perfecto

kseso? · #6 (**permalink**) 21/12/2010, 13:48

Efectivamente, Alexk
Está utilizando como doctype

Código HTML:

Ver original<html>

con lo que fuerza a ie a leer el documento en modo "quirks mode". Y si normalmente hacen tonterías, imagine lo que puede ocurrir en ese estado de percepción alterada.
Entre otras cosas, el ie6 no atiende al margin: 0 auto; para centrar. Y por eso se utilizaba la técnica del text-align

Por cierto, en el index.php del frame, comienza:

Código HTML:

Ver original<h2> Home Page </h2> 
<!DOCTYPE html PUBLIC "-//W3C//DTD -//W3C//DTD HTML 4.01//EN//EN">
<html>

Ese <h2>...</h2> no puede traerle nada bueno.

Italico76 · #7 (**permalink**) 21/12/2010, 16:16

kseso?: gracias por notar la distraccion y tus valiosos comentarios! :P

GASTON: gracias!

Cita:

body{text-align:center;}
luego un div contenedor
#wrap{text-align:left;}

Mil gracias!!!!! funcionó asi alexk :P

kseso? · #8 (**permalink**) 21/12/2010, 17:04

Las gracias a AlexK, Itálico. Fue el quien se dio cuenta del detalle clave. Yo ya fui a tiro fijo.
Sólo una sugerencia:
Si utilizas un doctype (da lo mismo xhtml strict o transitional o html 4), no deberías necesitar el text-align para centrarlo en ie6.