SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast bernadette's Avatar
    Join Date
    Aug 2007
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I hide a hack from IE7?

    I am using a hack for IE6

    * html .headerpic {margin-top:-27px;
    }




    It's working allright withh all the browers but not IE7
    so i am guessing that IE7 is reading the hack

    is there a conditional comment to hide any hack from IE7?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE7 doesn't fall for the '* html' in standards mode. Does your page force IE7 to use quirks mode by any chance?

    The method Microsoft recommends is to put all IE5/6 hacks in a separate style sheet and a use conditional comment to load it only in older IE versions:
    Code:
    <!--[if lte IE 6]>
    <link rel="stylesheet" type='text/css" href="ie6.css" media="screen">
    <![endif]-->
    Birnam wood is come to Dunsinane

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I am using a hack for IE6

    * html .headerpic {margin-top:-27px;
    }
    What is the sequence of events that causes you to use this code for ie6 only? It is likely that the hack can be avoided completely once you understand what the cause is.

    If you post the code we can probably tell you why there is a difference and possibly rectify it without a hack

  4. #4
    SitePoint Enthusiast bernadette's Avatar
    Join Date
    Aug 2007
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah may be you r right

    well the problem was that a picture:


    div.headerpic {width:619px;
    height:96px;
    background-image:url(../images/header-pic.jpg);
    background-repeat:no-repeat;
    margin:0 0 0 218px;
    }
    always had extra margin in IE

    there is a P element float:left on its left:

    p.latestnews {float:left;
    padding:10px 0 0 5px;
    color:#731c1c;
    font-size:8.5pt;
    margin:0;
    }

    and both of them are inside a div that has a background

    div.latestnews {width:830px;
    height:97px;
    background-image:url(../images/trans.jpg);
    background-repeat:no-repeat;
    padding:0 0 0 0;
    margin:0;
    }


    each time i remove the P , the extra margin dissappers (in IE)
    thats why i had to make negative margin for IE only

    is it something with the float property?

    thanks in advance i hope i dont make myself very comlicated

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ok if I've reconstructed your layout correctly then the problem is that the 218px left margin on headerpic is taken from the right edge of the floated p.latestnews tag. The reason for this is that once static content alongside a float is given "layout" (see faq on haslayout) then it takes its margins from the floated contents edge and does not let the margins slide under the float as it should do.

    (This is the same behaviour you would get in mozilla if you used overflow:auto.)

    The extra gap is caused because headerpic can no longer fit in the space it is allocated and IE drops it down below the floated p tag to see if there is more room.

    So you see that your negative margin fix is also needed by IE7 because it exhibits the same behavior and far from excluding ie7 from the hack you should have been giving it to ie7 as well.

    However the hack is misguided because in fact it will not work if more content is added to the p tag because headerpic will simply move down some more each time more content is added to the floated p tag and you would need to keep increasing the negative margin to match.

    It would have been simpler to remove the margin and float the headerpic and not use any hacks.

    Code:
    div.headerpic {
    width:619px;
    height:96px;
    background-image:url(../images/header-pic.jpg);
    background-repeat:no-repeat;
    float:right;
    However this is still not perfect because your floated p tag has no width set and I'm guessing that content may well spread horizontally and if this is the case then as soon as the content reaches the floated headerpic it will push it out of the way.

    If this is the case then really you should have the headerpic first in the source followed by an unfloated p tag which will just wrap normally around the image. (or give the p tag a width that fits in the space allocated))

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    
    div.headerpic {
    width:619px;
    height:96px;
    background-image:url(../images/header-pic.jpg);
    background-repeat:no-repeat;
    float:right;
    }
    
    p.latestnews {
    padding:10px 0 0 5px;
    color:#731c1c;
    font-size:8.5pt;
    margin:0;
    }
    
    
    div.latestnews {width:830px;
    height:97px;
    background-image:url(../images/trans.jpg);
    background-repeat:no-repeat;
    padding:0 0 0 0;
    margin:0;
    }
    
    </style>
    </head>
    <body>
    <div class="latestnews">
        <div class="headerpic">test</div>
        <p class="latestnews">Test<br>
            test<br>
            test lkj ;lkjl; l;k l;k l l ;lk;lk; k;lk;l ;lk;lk;l k;lk;l' ;lk;l</p>
    </div>
    </body>
    </html>
    Hope that explains it and shows why it is necessary to understand the problem rather than hacking a solution

  6. #6
    SitePoint Enthusiast bernadette's Avatar
    Join Date
    Aug 2007
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow , you are totally right,
    a width for the p tag solved it too

    thank you very much


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •