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.
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
}
Related
I have one line of CSS to change on a couple of classes on a Wordpress site to make it backward compatible to IE9 (it is currently on a localhost site in development).
The CSS i need to turn off is just one line and where I'll change the opacity from 0 to 1 so the headings show in older IE versions - the transforms etc won't be recognised so these won't be an issue.
If I use a conditional comment, because it's only one line of CSS - can I use the following:
<!--[if IE 9]>
<style>
span, .animate3, .animate4 {opacity: 1!important;}
</style>
<![endif]-->
I can't seem to find any info about using the style tag after a conditional comment. It would seem easier than setting up a stylesheet for one line of code?
Any help ideas would be awesome
Paul.
Yes, the way you set it up is correct and can be implemented in the <head> of the document.
As mentioned in the MSDN Compatibility documents about conditional comments:
<!--[if expression]> HTML <![endif]-->
is the way to write it. Any HTML element inside can be written, so <style> is valid to use.
<!--[if IE 9]><style>body { background-color: red; }</style> <![endif]-->
Read more about conditional comments at MSDN or at Quirksmode (with some better examples).
So, with Mozilla and WebKit I have a half-decent solution replacing the arrow on the select box using appearance: none; and having a parent element.
In IE for the most part I disabled this feature. For IE10 I can't actually disable it since my conditional comments don't actually work.
Here is my markup:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)]> <html class="ie10plus"> <![endif]-->
<!--[if !(IE)]><!--> <html> <!--<![endif]-->
The class ie10plus doesn't actually make it's way to the markup.
I also feel like there might be a legitimate way to replace the arrow in IE. I am not opposed to actually fixing the problem. appearance: none; however does not work. So what can I do here?
Avoid browser-sniffing and conditional comments (which aren't supported as of Internet Explorer 10), and instead take a more standard approach. With this particular issue you should be targeting the ::-ms-expand pseudo element:
select::-ms-expand {
display: none;
}
But!, If we want to add width, we can not do so as:
display:none
So
select::-ms-expand {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* Good browsers :) */
opacity:0;
}
Internet Explorer 10 doesn't support conditional comments, so you'll have to do something else. One solution is to sniff the user agent with JavaScript and add the class yourself:
<script>
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
document.documentElement.className += " ie10";
}
</script>
You should probably add this in the <head> so that you don't have a flash of unstyled content, but that might not be a problem.
Also, if you're using jQuery, you might want to do something like this:
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
$("html").addClass("ie10");
}
If you want to check for IE10 or above, copy-paste the getInternetExplorerVersion function from this Microsoft page and then change the if to something like this:
if (getInternetExplorerVersion() >= 10) {
// whatever implementation you choose
}
I had an issue with a hidden drop down arrow on the site on IE 10 and 11 that I am working which uses Zurb Foundation. There was a line on the _form.scss which had
select::-ms-expand {
display: none;
}
I removed it and the dropdown arrow started showing normally on all broswers. Thank You Jonathan for your answer here. This helped me after searching a lot for a solution.
still not sure what you are trying to accomplish, but this will detect and add a class for ie10:
<!--[if !IE]><!--<script>
if (/*#cc_on!#*/false) {
document.documentElement.className+=' ie10plus';
}
</script>!--<![endif]-->
So, with Mozilla and WebKit I have a half-decent solution replacing the arrow on the select box using appearance: none; and having a parent element.
In IE for the most part I disabled this feature. For IE10 I can't actually disable it since my conditional comments don't actually work.
Here is my markup:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)]> <html class="ie10plus"> <![endif]-->
<!--[if !(IE)]><!--> <html> <!--<![endif]-->
The class ie10plus doesn't actually make it's way to the markup.
I also feel like there might be a legitimate way to replace the arrow in IE. I am not opposed to actually fixing the problem. appearance: none; however does not work. So what can I do here?
Avoid browser-sniffing and conditional comments (which aren't supported as of Internet Explorer 10), and instead take a more standard approach. With this particular issue you should be targeting the ::-ms-expand pseudo element:
select::-ms-expand {
display: none;
}
But!, If we want to add width, we can not do so as:
display:none
So
select::-ms-expand {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* Good browsers :) */
opacity:0;
}
Internet Explorer 10 doesn't support conditional comments, so you'll have to do something else. One solution is to sniff the user agent with JavaScript and add the class yourself:
<script>
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
document.documentElement.className += " ie10";
}
</script>
You should probably add this in the <head> so that you don't have a flash of unstyled content, but that might not be a problem.
Also, if you're using jQuery, you might want to do something like this:
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
$("html").addClass("ie10");
}
If you want to check for IE10 or above, copy-paste the getInternetExplorerVersion function from this Microsoft page and then change the if to something like this:
if (getInternetExplorerVersion() >= 10) {
// whatever implementation you choose
}
I had an issue with a hidden drop down arrow on the site on IE 10 and 11 that I am working which uses Zurb Foundation. There was a line on the _form.scss which had
select::-ms-expand {
display: none;
}
I removed it and the dropdown arrow started showing normally on all broswers. Thank You Jonathan for your answer here. This helped me after searching a lot for a solution.
still not sure what you are trying to accomplish, but this will detect and add a class for ie10:
<!--[if !IE]><!--<script>
if (/*#cc_on!#*/false) {
document.documentElement.className+=' ie10plus';
}
</script>!--<![endif]-->
I used special character '#' '_' and '\' for IE browser compatibility. But now my style sheet is fail in W3c validation because of using IE hack. Is there anyway for error less stylesheet with browser compatibility.
Now I am not able to remove these IE hack because of my HTML files are now in Java program development.
My hack are like this :
/* For IE8 */top:-15px;
/* For IE7 */#top:-10px;
/* For IE6 */_top:-1px;
Yeah, don't use invalid CSS hacks, they're super-fragile.
For the specific case of picking up IE, conditional comments are better. Most solutions put extra stylesheets in CCs, but if you don't want to do that you can do class-switching with CCs:
<!--[if IE 6]> <body class="ie6"> <![endif]-->
<!--[if IE 7]> <body class="ie7"> <![endif]-->
<!--[if gte IE 8]><!--> <body> <!--<![endif]-->
and then do all your styling in one place based on the class:
#something { top:-15px; }
body.ie7 #something { top:-10px; }
body.ie6 #something { top:-1px; }
(This is assuming that IE8 is “all right” and should be served the same rules as other browsers, hence the ‘downlevel-revealed’ CC that allows everyone else to see the classless <body>.)
Used the particular html page in conditional statement.
<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->
Your reference
http://reference.sitepoint.com/css/conditionalcomments
Factor your adaptions for IE out into separate style sheets, and include them via conditional comments, e.g. for the IE8 style sheet:
<!--[if IE 8]
<link rel='stylesheet' href='ie8.css' />
<![endif]-->
I would say don't worry too much about validation.
It is helpful to use when trying to figure out when something is broken, but not the goal of any Web site.
Instead of hacks within your css, why not use conditional comments?
<!--[if lt IE 8]>
//styles here
<![endif]-->
You can either place individual styles in there or a link to a stylesheet.
Either way, only IE less than 8 sees it.
http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
There is also a solution without the conditional comments, which allows you to store all CSS rules in one file.
* html selector { /* rules for IE6 */ }
*:first-child+html selector { /* rules for IE7 */ }
For IE8, you shouldn't need any CSS hacks; it's a browser with very good CSS 2.1 support. If you, despite this fact, do need one, you may try setting a value with no hack and then rewrite it using some CSS3 selector that won't be recognized by IE8.
selector { /* rules for IE8 */ }
html:root selector { /* rules for IE9, Firefox, Chrome, etc. */ }
I'm new with the conditional CSS. My question is, is it right to use it for dealing with cross-browsers issues?
For example:
#header
{
[if IE 7] width: 600px;
[if Webkit] width:300px;
}
Editor's note: OP is most likely using this: http://www.conditional-css.com/
Use conditional statements for the actual CSS files (or classes) but on the html.
Like this for example:
<!--[if lte IE 6]>
<link href="css/layoutIE6.css" rel="stylesheet" type="text/css" />
<![endif]-->
This is written on the html file, not the CSS file!
The format you posted I think doesn't actually work and I bet it doesn't validate so it is not standard.
It's become common to use variations of this technique for IE, I believe it was made popular by HTML5 Boilerplate [citation needed]:
<!--[if lt IE 7]> <html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us"> <!--<![endif]-->
Now you can target elements without IE hacks in your main CSS files like so:
.ie6 .header li {
/* some ie6 only styles here */
}
To me, this is a lot more maintainable than using separate stylesheets, but suffers the very mild setback of other browsers reading (but not applying) the IE styles.
If you are having trouble with Webkit, you are most likely doing something wrong. Not Absolutely, but it's very likely.
EDIT: Many browsers allow proprietary extensions that let you set rules that will only apply to that browser. Example:
-moz-property {}
-webkit-property {}
-o-property {/* Opera */}
Note that this does not mean you can apply any CSS property, you will have to see what is available.
Best reference I could find quickly: http://reference.sitepoint.com/css/vendorspecific
SO Editors, feel free to replace this link if there is a better reference
As to the validity of your statements, jackJoe's got a nice answer.
But, it's not generally good practice. It's a better idea to, as far as layout goes, get a good layout that works cross browser and not muck around with browser specific layout problems. Instead, worry about feature-specific issues.
There are definitely times when you just can't fix an IE6 issue and at which point you probably should apply some browser specific code so you don't give yourself a headache.
In general, though, that's just not even a good idea.
Side Note: Why in the name of Tim Berners-Lee are you still trying to support IE5?
No it's not,
You Can try these
For IE 7 & 8:
width: 600px\9;
For IE10 :
width:300px\0/;
For all browsers:
width: 600px;
But if you want it on all three browsers separately IE,GC,FF then use it like this
width:300px; width: 600px\9; width:300px\0/;
I Think this is what you were looking for!