Forums

micha

I've been doing some conditionals for my home page and everytime i put any "margin-top" or "top" styles to my div for IE7 (using the conditional statemente on the head of my page) not only the style applies to IE7 but also to IE8 don't know why can anybody please help me i really need the help it's driving me crazy!!!

here's the homepage: http://www.urbanoarquitectonica.com/pre ... ndex3.html

my markup

?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
<head>
    <title>Prenatal 3</title>
    <link href=\"css/reset.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />
    <link href=\"css/layout3.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />
    <link href=\"css/typography.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />
    
    <script type=\"text/javascript\" src=\"js/jquery.js\"></script>
    <script type=\"text/javascript\" src=\"js/cycle.js\"></script>
    <script type=\"text/javascript\" src=\"js/slideshow.js\"></script>
    
    <!--[if IE 7]>
	<link href=\"css/ie7.css\" rel=\"stylesheet\" type=\"text/css\">
<![endif]-->
</head>
<body>
    <div id=\"wrap\">
       
        <div id=\"header\">
           
            <div id=\"logo\">
                <a href=\"index.html\"><img src=\"img/logo.png\" alt=\"#\" /></a>
                <h1>Prenatal</h1>
            </div>
           
            <div id=\"audio\">
                <img src=\"img/audioPlayer.png\" alt=\"audio player\" />
            </div>
         
            <ul id=\"topMenu\">
                <li><a href=\"#\" id=\"programacion\">Programacion</a></li>
                <li><a href=\"#\" class=\"ultimo\" id=\"contactanos\">Contactanos</a></li>
            </ul>
           
        </div><!---end of Header-->
        
        <ul id=\"menu\">
            
            <li><a href=\"#\">Nosotros</a></li>
            <li><a href=\"#\">Servicios</a></li>
            <li><a href=\"#\">Productos</a></li>
            <li><a href=\"#\">Galeria</a></li>
            <li><a href=\"#\">Testimonios</a></li>
         
        </ul>
     
        <div class=\"bgBottom\"></div>
     
        <div id=\"curva\">
         <img src=\"img/curvas.png\" alt=\"curvas\" />
        </div>
       
        <div id=\"contentWrap\">
            <div id=\"slideShow\">
               
                <div id=\"slides\">
                    <a href=\"#\" title=\"See Details\" class=\"thumb defaultSlide\" ><img src=\"img/mainPic1.png\" alt=\"#\" class=\"slideshow-image\" /></a>
                    <a href=\"#\" title=\"See Details\" class=\"thumb\" ><img src=\"img/mainPic2.png\" alt=\"#\" class=\"slideshow-image\" /></a>
                    <a href=\"#\" title=\"See Details\" class=\"thumb\"><img src=\"img/mainPic3.png\" alt=\"#\"  class=\"slideshow-image\"/></a>
                </div>
               
            </div><!---end of Slideshow-->
           
            <div id=\"sidebar\">
               
               <div id=\"col1\" class=\"bloques\">
                   
                    <h2>Articulo del mes</h2>
                 
                </div>
             
                <div id=\"col2\" class=\"bloques\">
                   
                    <h2>Novedades</h2>
                   
                </div>
            </div><!---end of sidebar-->
           
        </div><!---end of contentWrap-->
   
   <div id=\"bottomWrap\">
           
            <div id=\"bottomContent\">
               
      <div id=\"tarjeta\" class=\"info\">
                    <img src=\"img/visa.jpg\" alt=\"tarjeta visa\" />
                    <p>Aceptamos visa</p>
                </div>
             
                <div class=\"info\">
                    <ul id=\"bottomMenu\">
                        <li><a href=\"#\">Trabajamos con EPS</a></li>
                        <li><a href=\"#\">Mapa de Ubicacion</a></li>
                        <li><a href=\"#\" class=\"ultimo\">Envia esta Pagina</a></li>
                    </ul>
                </div> 
               
                <div class=\"info\" id=\"direccion\">
                    <p>Felix Olcay 169 San Antonio-Miraflores<br /> Telef: 241-5771 / 445-0515</p>
                   
                </div> 
               
            </div><!---end of bottomContent-->
      
   </div><!---end of bottomWrap-->
   
   <div id=\"footer\">
      
       <div class=\"auspiciadores\">
      
      <a href=\"\"><img src=\"img/jonson.png\" alt=\"jonsos baby\"  id=\"au1\"/></a>
      <a href=\"\"><img src=\"img/ameda.png\" alt=\"ameda hospital\" id=\"au2\"/></a>
      <a href=\"\"><img src=\"img/baby.png\" alt=\"baby center\" id=\"au3\" /></a>
      
       </div>
      
   </div><!---end of footer-->
       
    </div><!---end of wrap-->
</body>
</html>

my css layout

body{
    background-image:url(\"../img/bg.jpg\");
    background-color:#f7e9ce;
}

div#wrap{
    margin: 20px auto;
    width: 1000px;
    position:relative;
}

/* HEADER */

div#header{
    background-image:url(\"../img/headerBG.png\");
    height:146px;
    overflow:hidden;
    padding-bottom:10px;
    position:relative;
    z-index:10;
}

div#logo{ 
  float:left;
  height:80px;
  margin: 20px 0 0 36px;
  padding-bottom:15px;
  width:279px;
}

/* header top menu*/

div#audio, ul#topMenu{
    margin-top:12px;
}

div#audio{
    position:absolute;
    right:195px;
}

ul#topMenu{
    position:absolute;
    right: 0px;
    margin-right:16px;
}

ul#topMenu li{
    display:inline;
}

ul#topMenu a{
    border-right:1px solid #000;
}
   
    a#programacion{
        padding-right:5px;
    }
   
    ul#topMenu a.ultimo, ul#bottomMenu a.ultimo{
        border:none;
    }
   
/* MENU */

div.bgBottom{
    background-image: url(\"../img/menuBottomBG.png\");
    background-repeat:no-repeat;
    padding-bottom: 30px;
    position:relative;
    top:-37px;
    left: 391px;
    width:619px;
    z-index:200;
}

ul#menu{
    position:relative;
    top:-38px;
    left:560px;
    width:500px;
    z-index:30;
}

ul#menu li{
    display:inline;
}

ul#menu a{
    background-color:#ffcc00;
    padding:3px 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

    ul#menu a:hover{text-decoration:underline;}

/* CONTENIDO */

div#contentWrap{
    background-color:#fffbe8;
    position:relative;
}

div#curva{
    position:relative;
}

div#curva img{
    position:absolute;
    top:-90px;
    z-index:500;
}

div#slideShow{
    position:relative;
    z-index:200;
}

div#slides{
    margin-top:-69px;
    width:652px;
}

div#sidebar{
    background-color: #fffbe8;
    position:absolute;
    top:2px;
    width:352px;
    left: 648px;
    padding-bottom: 225px;
    z-index:30;
}

div#col1{
    background-image:url(\"../img/col1BG.png\");
    background-repeat:no-repeat;
    background-color:#ffe28d;
    height:79px;
    margin-top:50px;
    padding-top:10px;
    width:347px;
}

div#col2{
    background-image:url(\"../img/col2BG.png\");
    background-repeat:no-repeat;
    height:79px;
    width:344px;
}

div.bloques{
    margin-left:5px;
    position:relative;
    top:208px;
    padding-top:10px;
}

/* BOTTOM CONTENT */

div#bottomWrap{
    overflow:hidden;
    position:relative;
    top:419px;
    width:1000px;
    position:relative;
    z-index:60;
}

div#bottomContent{
    background:url(\"../img/bottomContent.png\") no-repeat;
    height:115px;
    width:1000px;
}

div.info{
    float:left;
    margin-top:65px;
}

div#tarjeta{
    width:200px;
    margin-left:25px;
}

div#tarjeta img{
    float:left;
    margin-top:-10px;
}

div#direccion{
    width: 280px;
}

/* BOTTOM MENU */

ul#bottomMenu{
    width:490px;
    margin-left:0px;
}

ul#bottomMenu li{
        display:inline;
    }
   
    ul#bottomMenu a{
        border-right: 1px solid #000;
        padding: 0 10px;
    }

/* FOOTER */

div#footer{
    background-image:url(\"../img/footerbg.png\");
    background-repeat:no-repeat;
    background-color:#ffe28d;
    overflow:hidden;
    position:relative;
    top:440px;
    width:1000px;
    -moz-border-radius:10px;
}

div.auspiciadores img{
    margin: 5px 50px  0px 50px;
}

img#au2{
    margin-left:190px;
}

img#au3{
    margin-left: 190px;
}

and lastly my conditional stylesheet


div#curva{
   position:relative;
   z-index:500;
}

div#curva img{
   position:absolute;
   top:-110px; /*trying to change it only for IE7 but it applies also to IE8 */
}

atikusdesign

Hi,

I've had a look around the web and found this: http://stackoverflow.com/questions/167657/will-targeting-ie8-with-conditional-comments-work

They seem to be saying that locally IE8 renders as IE7 so maybe that's your problem.

Have a read it may help

micha

THANK YOU very much i just tried it on IE 8 and IE7 and it looks fine

treehouse : what would you like to learn today?

Forums

Problem with conditional stylesheets