I am writing some markup, which includes a image below a div. I want to add another image when the browser is IE8. How do I write IE8 specific markup using javascript or JQuery?
You don't need JS / Jquery for this, you can just use normal CSS.
All you're doing is adding a class to your HTML depending on the version of IE that is detected.
In your header add these (or a variation of) conditionals:
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
Then you can show / hide elements in your CSS like so:
.ie8 .myImage {
display: block;
}
.ie7 .myImage {
display: none;
}
You can use jQuery to recognize Internet Explorer version 8.
http://api.jquery.com/jQuery.browser/
if ($.browser.msie && parseInt($.browser.version) == 8)
{
//IE8 specific code block
}
Related
This question already has answers here:
How to target only IE (any version) within a stylesheet? [duplicate]
(6 answers)
Closed 5 years ago.
I am looking for a way to modify my style.css file to target ONLY Internet Explorer browser (so without impacting my styles for Chrome & Firefox).
Example
I want to the following style for Chrome & Firefox:
.header .currency {margin: **-28px** 0px 0px 0px;}
I want the following style for IE:
.header .currency {margin: **-30px** 0px 0px 0px;}
Note
Posts exist for CSS modification on HTML file and this is not what I am looking for. Therefore please do not provide response if this is not link to .CSS file.
IE6 to IE9
For versions of IE up to IE9, it's best to use conditional stylesheets :
<!--[if lte IE 6]> Internet Explorer 6 or less <![endif]-->
<!--[if lte IE 7]> Internet Explorer 7 or less <![endif]-->
<!--[if lte IE 8]> Internet Explorer 8 or less <![endif]-->
<!--[if lte IE 9]> Internet Explorer 9 or less <![endif]-->
Conditional stylesheets are ignored by every browser except versions of IE that correspond with the condition.
IE10 to IE11
Unfortunately, IE10 and IE11 do not support conditional stylesheets. However, you can use the following CSS hack to target only those two browsers :
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
// Put your IE10+-specific CSS here
}
See browserhacks.com for an overview of different ways to target specific browsers with CSS.
Note
For various reasons, it's recommended to write as little browser-specific CSS as possible.
Best way is use conditional comments.
For example:
<!--[if IE 8]>
load here your ie8.css
<![endif]-->
IF you want edit only CSS:
/* IE css hack */
margin-top: 10px\9 /* apply to all ie from 8 and below */
*margin-top:10px; /* apply to ie 7 and below */
_margin-top:10px; /* apply to ie 6 and below */
Final mode, #media hack.
I want to hide a specific section in my jsp page for IE8 only. I want it to be showed in other browsers like IE9, IE9+, Chrome, Safari, Firefox etc. Tried the following snippet:
<!--[if IE8]>
<li>{{common}}</li>
<![endif]-->
It hides the element in IE8, but also in other browsers too! I want it be hide only in IE8. How to acieve that?
<!--[if !IE 8]><!-->
<li>{{common}}</li>
<!--<![endif]-->
I have a website I am working on: tinyurl.com/6s4nwnu
I have the whole website other then the menu and the footer in a wrapper div. The footer div has a clear:both on it, that works in every browser but IE (go figure).
I have tried the clear fix, with no luck.
When you resize the browser, the menu disappears as well, and the footer goes to mid-page. Not sure why.
Suggestions?
You have a few more issues with the page besides that, and fixing them might fix the rest. Your text also goes out of frame if the window size is not wide enough to display all the text. A min-width would help out with that. It also may help out with your other problems.
Right now your #content sizes don't match up right with the box model for ie8 or lower, so fixing all of that should come first to narrow down where the other issues are coming from. The DTD would need to be set so that IE uses Quirks Mode, because that's the only way I'm getting the boxes to line up right. I notice that you've done that, but by doing so, the IE9 design is not as clean as it should be. Using the Internet Explorer conditional css tags should help out there. I'd put in a min-width for all of it so that it doesn't break when your width is not great enough, since that is a problem in Firefox as well. I tried using IETester to see if it could recreate the ie6 error, but no luck there. I would put in a min-width on your content, and see if your problems go away.
There are many solutions.
See http://paulirish.com/2009/browser-specific-css-hacks/
Where you can find a detailed list of browser specific hacks to target specific browsers.
Or
You can use Paul Irish's conditional html class.
Which i extended for your case to include "ie" besides the version.
<!--[if lt IE 7 ]> <html class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
Where you can later target IE like so:
.ie{} // targets all IE's
.ie6{} // targets IE6
.ie7{} // targets IE7
.ie8{} // targets IE8
.ie9{} // targets IE9
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
I am currently developing a theme for a homepage but ran into a few problems. For whatever reason I have no access to editing the html code itself, and I need to write custom .css for IE (specifically versions below IE9).
I have "two" issues. First one is dual backgrounds. Versions below IE9 can't seem to render them flawlessly. If IE skips the element, this is fine but since the graphic in this element co-works with another element (for a smooth graphical transition), it makes the other element look weird. The graphic in this second element is a background within a div-box. I want this background to be another custom background that's only rendered if the user is using IE as browser; and if possible, I want this to only apply to versions below IE9 (site is rendered with dual backgrounds just fine in IE9).
http://patrikarvidsson.com/project/sohelp/illustration.jpg
CSS is as follows (#mainframe is the part under the header navigation box). The lower image is how it is rendered in IE8. IE7 shows the same. First one is FF/Chrome/Safari and IE9.
#mainframe {
background: url('img/bg2.png') no-repeat,
url('img/bg1.png') repeat-y !important;
}
I've searched quite a lot on the net, also been asking friends and this does not seem to be working without writing conditional comments within the html markup. Am I missing something? Is this doable somehow with only the use of .css files?
Site is using jquery. I don't know this stuff, but I thought I'd mention it just in case.
You might want to look into this article which explains how to use conditional comments to set classes on the html element. You can then use that class to target specific browsers in your stylesheet, in a clean way.
Your html tag would look something like this:
<!--[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)|!(IE)]><!--> <html> <!--<![endif]-->
Edit 2
Since the announcement that IE10 will not support conditional comments I though it would be nice to update this answer. I tested the type of comments it will support and it seems that the above will still work, but if you want to target higher than 10 or only 10 you will be out of luck. As suggested by Microsoft themselves on their blog (link in comments #MarcoDemaio) you should use feature detection.
Then you can do something like this in your css:
.somestyle {
background: transparent url('derp.jpg') no-repeat;
}
/* ie6 fallsback class */
.ie6 .somestyle {
background: #eee;
}
Read the article, and good luck ;)
Edit 2:
Since IE7 isn't my greatest concern anymore and IE9 is pretty consistent in its behaviour I can get away wil just the following code (which will add a class only for IE versions less than IE9):
<!--[if lt IE 9]><html class="lte9"><![endif]-->
<!--[if gt IE 8|!IE]><!--><html><!--<![endif]-->
Edit 1:
Ok I managed to miss your "can't edit html" comment.
In that case you can only use browser specific hacks, I think they're dirty as hell but hey, if you have no other option......
Somthing like this:
.someclass {
*color: blue; /* IE 7 and below */
_color: blue; /* IE 6 */
}
/* IE6, IE7 - asterisk hack */
.someclass { *color: blue; }
/* IE8 - winning hack */
.someclass { color: blue\0/; } /* must be last declaration in the selector's ruleset */
For your dual backgrounds problem, you simply need to add another containing element.
<div class="element">
...
</div>
becomes
<div class="container">
<div class="element">
...
</div>
</div>
I'm not sure why you wouldn't be able to manually edit the HTML, but if you have access to a javascript file and you're using jQuery, you can add the class like so:
$('.element').wrap('<div class="container" />');
You can use CSS hacks to avoid using conditional comments. CSS hacks aren't as commonly used now since the average user uses a browser that doesn't require any hacks to display properly, but it is still a completely valid and reliable way to avoid using HTML conditional statements. Depending on the specificity you want, you have a bunch of different hacks that you can use to only target specific versions of IE:
* html .element { color: #fff; /* IE6 only */ }
html .element { _color: #333; /* IE7 only */
*+html .element { color: #999; /* IE7 only */ }
html .element { *color: #000; /* IE7 and below */
html .element { color: #ccc\9; /* IE8 and below */ }
So:
#container { background: url(img/bg1.png) repeat-y\9; }
#container #mainframe {
background: url('img/bg2.png') no-repeat, url('img/bg1.png') repeat-y !important;
background: url('img/bg2.png') no-repeat\9; }
I had this problem in my CMS application so...
Create a container div have it's class the browser name and version to be looks like
<div class="ie_6_0">
<div class="your_custom_elements">
///////
</div>
</div>
and do you CSS classes like
.your_custom_elements{common styles between versions}
.ie_6_0 .your_custom_elements{do somthink for old versions}
.ie_9_0 .your_custom_elements{do somthink for new versions}
UPDATE 1
or like
<div id="mainframe" class="ie_6_0">
///
</div>
and CSS like
#mainframe{common styles between versions}
#mainframe.ie_6_0{do somthink for old versions}
#mainframe.ie_9_0{do somthink for new versions}
ie_6_0: as your user browser name and version must request it and add it by code.
Here is the link to my website thats still under development. It runs well in Internet Explorer 8 and 9 as well as in Firefox. The webkit browsers (Safari and Chrome) are not able to display the facebook "like box" properly. The box goes above the dividing line. While in IE7 for some strange reason the search form doesnt float:right.
This is my first website so sorry for any pathetic questions:) Can u also please tell me to write a script for IE6 that would show a message to upgrade to a modern browser because IE6 absolutely messes everything up. Any other suggestions would be highly appreciated. I have used the toolbox theme for Wordpress to develop this blog.
I have used :
time.entry-date {color:#000; font-style:italic; text-decoration:none;}
To change the post date's color to black and remove the underline but the text-decoration:none does not work.
Facebook follow box :
#fb-root {
position:relative;
float: left;
margin-left: 10px;
/* remove: margin-top, z-index */
}
HTML5 elements are not recognised by ie < 9. Add to page <head>:
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
JQuery for ie6 message:
if ($.browser.msie && parseInt($.browser.version) =< 6) {
var here = ' here';
$('body').prepend('<div id="message">Please upgrade your browser'+here+'!</div>')
}
Hope it helps.