How do I hide a hack from IE7?

**bernadette** · Sep 18, 2007 04:52

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?

**AutisticCuckoo** · Sep 18, 2007 04:58

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]-->

**Paul O'B** · Sep 18, 2007 05:17

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

**bernadette** · Sep 18, 2007 05:53

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

**Paul O'B** · Sep 18, 2007 06:28

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

**bernadette** · Sep 19, 2007 00:42

Wow , you are totally right,
a width for the p tag solved it too

thank you very much

User Tag List

Thread: How do I hide a hack from IE7?

Thread Tools

Display

How do I hide a hack from IE7?

Bookmarks

Bookmarks

Posting Permissions