SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: How do I hide a hack from IE7?
-
Sep 18, 2007, 04:52 #1
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?
-
Sep 18, 2007, 04:58 #2
- 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
-
Sep 18, 2007, 05:17 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I am using a hack for IE6
* html .headerpic {margin-top:-27px;
}
If you post the code we can probably tell you why there is a difference and possibly rectify it without a hack
-
Sep 18, 2007, 05:53 #4
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
-
Sep 18, 2007, 06:28 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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;
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>
-
Sep 19, 2007, 00:42 #6
Wow , you are totally right,
a width for the p tag solved it too
thank you very much
Bookmarks