I have the following CSS that i have "hacked" with PHP because it doesn't align properly in IE7. Is there a better way to do this without resorting to PHP?
#Menu
{
width: 100%;
height: 32px;
padding-top: <?php if(preg_match('/msie/i', $_SERVER['HTTP_USER_AGENT'])){echo '22px';}else{echo '40px';}?>;
padding-left: 13px;
}
I want to avoid using conditional comments and having to maintain multiple css files.
This method still uses some conditional comments, but at least your not evaluating your code via PHP. In order to be of more assistance I would need to see a full code sample.
<style type="text/css">
#Menu {
width: 100%;
height: 32px;
padding-top: 40px;
padding-left: 13px;
}
</style>
<!--[if IE]>
<style type="text/css">
#Menu {
padding-top: 22px;
}
</style>
<![endif]-->
Whoa. Yeah, don't do that. You'll want o look at using "conditional comments" to include the css you want. Your first commenter bendewey has shown how you can target IE7 easily. There are other types of conditional comments as well which will allow you to target other versions of IE.
Here they are:
<!--[if IE]> According to the conditional comment this is Internet Explorer <![endif]--> <!--[if IE 5]> According to the conditional comment this is Internet Explorer 5 <![endif]--> <!--[if IE 5.0]> According to the conditional comment this is Internet Explorer 5.0 <![endif]--> <!--[if IE 5.5]> According to the conditional comment this is Internet Explorer 5.5 <![endif]--> <!--[if IE 6]> According to the conditional comment this is Internet Explorer 6 <![endif]--> <!--[if IE 7]> According to the conditional comment this is Internet Explorer 7 <![endif]--> <!--[if gte IE 5]> According to the conditional comment this is Internet Explorer 5 and up <![endif]--> <!--[if lt IE 6]> According to the conditional comment this is Internet Explorer lower than 6 <![endif]--> <!--[if lte IE 5.5]> According to the conditional comment this is Internet Explorer lower or equal to 5.5 <![endif]--> <!--[if gt IE 6]> According to the conditional comment this is Internet Explorer greater than 6 <![endif]-->
If you plan on doing a lot of adjustments for different versions of IE, you might plan ahead and use the "body class" trick. It looks kind of ugly in the markup, but it's a proven technique and sometimes it beats having lots of style sheets and style tags.
Here it is:
<!--[if !IE]>--><body><!--<![endif]--> <!--[if IE 6]><body class="ie6"><![endif]--> <!--[if IE 7]><body class="ie7"><![endif]--> <!--[if IE 8]><body class="ie8"><![endif]-->
And in your style sheet, you'd just reset any style you want by tacking on a class to the selector. Like this:
#some_div {
margin-top:30px;
}
.ie6 #some_div {
margin-top:40px;
}
.ie7 #some_div {
margin-top:50px;
}
Hopefully that makes sense. Either way, it's conditional comments you'll want to use instead of PHP.
It's really hard to tell what's going on here without a demo page, but could it be that another element on the page is bumping it down an extra 18 pixels? Could it be that there is some default margin on the element? I can't think of anything else being the problem with the CSS you've given. Could the child elements be a different size in IE and other browsers?
Typically when I see dev's doing this sort of thing, it is because they don't understand what is going on. Then they end up with 3 separate copies of essentially the same, HUGE CSS file; and a lot of headaches.
IE conditional comments in a safe step in the right direction; especialyl that browser sniffing in your php example is doomed to fail as the user agent string is not guaranteed.
My best recommandation to you is to take the time once to read through the very boring W3C CSS documentation, if only the chapter about DISPLAY BLOCK and INLINE modes. Once you read that, 90% of your css layout problems will be solved. The rest is getting used to the most common IE6 bug, which is the infmaous "layout" mode.