Problema al ajustar estilo en IE

el_cesar · #1 (**permalink**) 18/08/2013, 09:53

Hola a todos, estoy maquetando esta web http://www.crmbusiness.biz/inpel/ como podran ver, en Firefox y Chrome se ve bien, sin embargo la testeo en IE 7 y 8 y en primer lugar no centra el contenido, y en segundo lugar no ajusta el menú superior, he estado revisandola y para el tema del menú me di cuenta que: si le reduzco el font-size de 2em a 0.1em me reduce todo el espacio y queda bien, sin embargo no he logrado aplicar ese estilo solo a ie, ya intenté con hacks y no los toma, tambien estoy intentando con comentarios condicionales y no se por que no me los toma tampoco,

Este es mi HTML

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <title>Maqueta P&aacute;gina Web de Inpel</title>
    <meta charset="utf-8" />
    <meta name="description" content="Maqueta de Inpel" />
    <link rel="stylesheet" href="style.css" />
    <!--[if IE 6.0]>
 <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection" />
<![endif]-->
<!--[if IE 7.0]>
 <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection" />
<![endif]--> 
</head>
</head>
<body>
    <header>
        <section id="encabezado">
            <section id="logo">
            <img src="img/logo.gif" id="logo" />
            </section>
            
            <section id="menu">
                
                    <section id="miz">
                    <img src="img/nav_bg_l.png" />
                    </section>
                    <section id="cen"> 
                      <ul id="css3menu1" class="topmenu">
...
</ul>
                    </section>
                    <section id="mde"> 
                    <img src="img/nav_bg_r.png" />
                    </section>       
                
            </section>
            
            <section id="social">
            <img src="img/social.gif" />
            </section>
        <section>
    </header>
    <article>
        <section id="slider">
        <section id="selloinpel">
        
        </section>
        <img src="img/slide1_776x293.jpg" />
        </section>
        <section id="paneles">
            <section id="wid1">
            <img src="img/wid1.gif" />
            </section>
            <section id="wid2"> 
            <img src="img/wid2.gif" />
            </section>
            <section id="wid3"> 
            <img src="img/wid3.png" />
            </section>            
        </section>
        
    </article>
</body>
 
 
</html>

y este mi CSS para todos los navegadores

Código XML:

Ver original@charset "utf-8";
/* CSS Document */
*{ 
    margin: 0;
    padding:0;
    
}
@font-face {
    font-family: 'pt_sansbold';
    src: url('fonts/PTS75F-webfont.eot');
    src: url('fonts/PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTS75F-webfont.woff') format('woff'),
         url('fonts/PTS75F-webfont.ttf') format('truetype'),
         url('fonts/PTS75F-webfont.svg#pt_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
 
}
@font-face {
    font-family: 'pt_sansregular';
    src: url('fonts/PTS55F-webfont.eot');
    src: url('fonts/PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTS55F-webfont.woff') format('woff'),
         url('fonts/PTS55F-webfont.ttf') format('truetype'),
         url('fonts/PTS55F-webfont.svg#pt_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}
body {
    background:#ccc url(img/background.jpg);
    max-width:1600px;
    min-height:200px;
    color: #000;
    font-family:"pt_sansregular", Gadget, sans-serif;
    font-size:0.1em;
}
...