IE CSS alignment issues

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.

Answers


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.


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

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.


#some_div {
     _margin-top:40px; //Only works on IE6
     *margin-top:30px; //Only works on IE7-IE6
      margin-top:20px\9; //Only works on IE8-IE7-IE6
      margin-top:10px; //Works on all others
}

Need Your Help

Using Forms Authentication with localhost with WebForms

asp.net .net visual-studio-2012 webforms forms-authentication

I am working on an old application that uses Forms Authentication and I'm trying to get it working locally as a web site in Visual Studio 2012. It seems to run OK using the internal debugger on htt...

How to copy from a particular cell and paste it in a another range using excel vba

excel vba excel-vba

I have an excel where i have defined "CTPT" in the column A. I am successful in fetching the cell address of the "CTPT" using the code :