how to apply css value for specific IE version - html

I have a class in name of "myclass". In IE8, i need to apply the z-index as 5 for the "myclass" So i have tried to acheive it by using following methods.
.myclass{
z-index: 5\9
}
---> It applies from IE10 onwards not only in IE8
.myclass{
z-index: 5 \0/
}
----> this also applies from IE10 onwards not only in IE8 and it create syntax error
How to acheive it only in IE8?

You should be able to use targeting.
<!--[if IE 8]>
...
<![endif]-->
Also, it appears as if a question similar to this has been asked before, Targeting only Firefox with CSS
may be useful to you.

You may want to include a seperate CSS file by using a conditional comment to overwrite your css rule specifically in IE8. Example:
<link rel="stylesheet" type="text/css" src="/path/to/main-styles.css" />
<!-- The following lines will only be interpreted by IE version 8 or lower -->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" src="/path/to/ie8-overwrites.css" />
<![endif]-->

Try giving z-index with position relative or absolute. z-index might not work with static element.
Try:
.myclass{
position:relative;
z-index:5;
}

Related

Different position in IE8 and IE 10

I have a Problem with the Position of the HTML elements. I am developing a web form.
Until today, I was using IE8 in my Computer (Company issues...) but today I got a new Computer with IE 10.
My problem is that I could see this form perfectly before, but now all elements are moved. For example, the are move 20px more or less to the top, and if I fix it for IE 10, I can't see it in IE 8 correctly.
My question is if the browser interpret in a different way the position:relative tags? And if it is like that, how could I solve it? The users of this form will use IE8 and 10 too...
I already add to my HTML code the tag <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7">
Thanks for all your help!
You can use conditional comments to apply style to specific browsers:
gt = greater than
lt = less than
lte = less than or equal to
gte = greater than or equal to
This will target anything greater than IE 8:
<!--[if gt IE 8]>
<link rel="stylesheet" type="text/css" href="gtie8.css" />
<![endif]-->
This will target anything less than IE 9:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ltie9.css" />
<![endif]-->
This will target anything that is not internet explorer:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Source:
http://www.quirksmode.org/css/condcom.html
Do you use any reset style sheet? If you don't I strongly advise you implement one. I'm afraid, this will almost certainly knock other elements out on your page. It basically gives you a consistent starting point across all browsers.
Where posible try avoid adding a whole bunch of browser hacks.

what is the best solution to solve the Issue in IE8 with HTML5 and Css3

I' ve website HTML5, Css3 and Jquery, it is look fine in IE9, but not look good in IE8
I read all solutions here, plus using all methods
Such as
CSS3 PIE
ie7-js
-
<link rel="stylesheet" href="normal.css" type="text/css" />
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="ie8.css"><![endif]-->
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->
-
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script><![endif]-->
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('hgroup');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
and.... and....
i can't find the best way to appear website fine in IE8
any help Plz.
website: moic-egypt.com
I won't recommend css3pie, it causes several side effects.
For the styling issue with html5 elements, you're correctly using a shim/shiv (like html5shiv), so you don't need the document.createElement part. That will solve most of the issues.
Instead of creating custom CSS stylesheets for IE, i would switch to conditional comments, so that you can add specific ie rules in the main CSS:
.ie #specificdiv { /* custom rule for ie */ }
When your project gets bigger you won't have to browse all the different sheets.
Then ie9.js, that's for css selectors (like :not) which weren't supported in older IE versions.
You've css3 properties left. For these, i'm afraid you'll have to search for fallbacks/polyfills one by one. Here are some beutiful resources to start with:
html5please
Can I use
List of cross-browser polyfills

conditional css is not working

hi a i am triyng to using conditional css like this in my style sheet
div.box {
width: 400px;
[if IE 6] width: 600px;
padding: 0 100px;
}
i want to set a different width to my div in ie6 , so i am trying this code and not working , how can i set a different width in ie6
also i tried this in my style sheet
[if IE]
div.box {
width: 600px;
padding: 0 100px;
}
[endif]
Conditional comments are for use inside HTML documents, not inside CSS files. IE's HTML parser will interpret the rule inside the comment - as far as I know, there's no equivalent logic in its CSS parser.
The following code will work:
<!--[if IE 6]>
<style type="text/css">
div.box {
width: 600px;
padding: 0 100px;
}
</style>
<![endif]-->
In most cases, it's better to use the conditional comment to include an external stylesheet, rather than just wrapping a block of inline styles, like so:
<!--[if IE 6]>
<link rel="stylesheet" href="/css/IEpatches.css" type="text/css" media="screen" charset="utf-8"/>
<![endif]-->
Edited to specify IE6 only as requested in the question.
The best way to do conditionals for ie6 is to add a conditional include in the head of the html page like this:
<!--[if IE 6]>
<link rel="stylesheet" href="[something like style/ie6.css goes here]" type="text/css">
<![endif]-->
and then just add your new widths as exceptions to elements in the ie6.css style sheet.
Have you tried?
<!--[if IE]>
// Your conditional CSS
<![endif]-->
I think that your formatting is wrong for your conditional statement.
Conditional Comments
Have you read the Conditional-CSS documentation? Specifically, do you run your CSS through the Conditional-CSS compiler? Because if you don't, you'll just send the CSS to the browser unchanged - there is no way Conditional-CSS can do its magic then.
As you probably have learned by now, conditional comments are parsed in the HTML output, not within the CSS file itself, unless you are using third party software.
Another way you can target IE within your CSS files without hacks:
<!--[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]-->
It's become common to use variations of this technique for IE, I believe it was made popular by HTML5 Boilerplate. You are basically using conditional comments to add a class to the <html> tag (or body tag if you wish) so you can target elements in your CSS files like so:
.ie6 #header {
/* some ie6 only styles here */
}
To me, this is more maintainable than using separate stylesheets, but suffers the very mild setback of other browsers reading (but not applying) the IE styles.

Different CSS when using different browsers problems?

<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="iemaster.css" />
<![endif]-->
<![if !(IE 5)]>
<link rel="stylesheet" type="text/css" href="master.css" />
<![endif]>
to load a different stylesheets depending on whether or not it is IE. The problem is that i have button bar going across the top. In IE I need the padding at 0 and other wise i need it at 200px, but no matter what I do to the values, the bar in IE doesn't seem to change. It changes for chrome though. The only thing that seems to work is if I make the class affecting it a different name then the non-IE one. Of course this means my non-IE wouldn't load properly. Other then this the CSS seems to load perfectly. Why is this?
That's not how you should be doing it.
Nobody is using IE5, so forget about that.
Do it like this instead:
<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->
Your master stylesheet will get loaded in every browser.
Are you sure you care about IE6? If so, put IE6 specific rules inside ie6.css.
Put IE7 specific rules inside ie7.css.
You shouldn't need a separate stylesheet at all for IE8 or IE9. Those browsers are compliant enough to handle the same stylesheet as the other browsers.
Your bottom block is not actually a comment (it doesn't begin with <!--) so all browsers will read the master stylesheet. Also, check your logic: IE6 is both greater than IE5 and != IE5, so the main stylesheet will get loaded for some versions of IE anyway.
If you reverse the order that you link to the stylesheets that should fix it. What's happening is the IE-specific style sheet is being set first, but the master.css is overwriting it after.
Also, I don't think you need <![if !(IE 5)]> and <![endif]> around the non-IE one.

How to resolve css incompabilities/differences between different versions of IE?

I am having an issue wherein my web application behaves different in (IE5 & IE6) as compared with (IE7 & IE8)
There is some CSS Issue but I do not want to get in a situation where I make some changes in CSS File and web application would work fine in (IE5 & IE6) and not in (IE7 & IE8) and so my question is:
How should I approach problem to resolve CSS incompatibities or differences between different version of IE ?
Any guidance and suggestions would be highly appreciated.
Create a cascade of style sheets like so:
<link id="stylesheet1" rel="stylesheet" href="css/style.css" type="text/css" media="all" /
<!--[if IE]>
<link id="stylesheet2" rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
<![endif]-->
<!--[if lte IE 6]>
<link id="stylesheet3" rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />
<![endif]-->
<!--[if lte IE 5]>
<link id="stylesheet4" rel="stylesheet" href="css/ie5.css" type="text/css" media="all" />
<![endif]-->
style.css:
.myclass{
width:100px;
}
ie.css:
/* override class from style.css */
.myclass{
width:105px;
}
ie6.css:
/* override class again from ie.css */
.myclass{
width:110px;
}
ie5.css:
/* if necessary, override class again from ie6.css */
.myclass{
width:115px;
}
You only need to over-ride what needs to be over-ridden.
Pekka is right, you need to take each problem/bug/display-difference on a case-by-case basis. So if something isn't showing up right in IE6, you need to adjust it in ie6.css. If even after that, it's not showing up right in IE5, you need to adjust it in ie5.css.
If you practice a little, you will understand better.
Explanation:
<!--[if IE]>
only Internet Explorer browsers (all versions) will see HTML between these statements
<![endif]-->
<!--[if lte IE 6]>
only Internet Explorer 6 or lower browsers will see HTML between these statements
<![endif]-->
<!--[if lte IE 5]>
only Internet Explorer 5 or lower browsers will see HTML between these statements
<![endif]-->
Use conditional comments. Put IE version specific css in specific files only included for the particular version in question.