Grow your CSS skills. Land your dream job.

Problem with conditional stylesheets

  • # July 8, 2009 at 8:37 pm

    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

    Code:
    ?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">





    curvas
    #
    #
    #

    tarjeta visa

    Aceptamos visa

    Felix Olcay 169 San Antonio-Miraflores
    Telef: 241-5771 / 445-0515



    my css layout

    Code:
    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

    Code:
    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 */
    }

    # July 9, 2009 at 5:02 am

    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

    # July 9, 2009 at 12:32 pm

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".