Hi all : How can i fix the problem of css in ie 7 and ie6 : my divs change possition in those two : www.justcode/housetostay: I will be very glad if i get any help
You can use conditionals to do this.
In your add this code.
<!--[if lt IE 8]>
// Add your IE only stylesheet here
<![endif]-->
This means that if the browser is Less Than IE8 load the stylesheet in the comments.
You can be more specific if you need to.
<!--[if IE ]> - Targets all IE versions from 5.5 up to 9
<!--[if gt IE6 ]> - Targets all IE versions Greater Than IE6
<!--[if IE7 ]> - Targets only IE7
Without using hacks I would suggest using this technique
<!--[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 add css:
.ie6 .my-div {
}
.ie7 .my-div {
}
Using separate stylesheets for each version of IE is pretty outdated/poor IMO when you can target all versions in your regular single stylesheet
you can read more here: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Related
I am trying to understand that what kind of CSS inside the html class="ie.".
Is there any CSS file for these statements, if they are then what are the CSS
elements being used in these style sheets.
<!--[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]-->
What you are looking at are conditional comments. They are a Microsoft standard they baked into older versions of IE since the rendering "quirks" could vary so much from version to version. Any non Internet Explorer browser will render those as comments and go about their merry way. However, older versions of IE will so those comments and render them as content if the version matches. For instance, IE6 would see your markup and render like this:
<html class="ie6">
<!--[if IE 7 ]> <html class="ie7"><![endif]-->
<!--[if IE 8 ]> <html class="ie8"><![endif]-->
<!--[if IE 9 ]> <html class="ie9"><![endif]-->
What this allows you to do now is write CSS that targets Internet Explorer 6 specifically -- any selector that is prefixed with .ie6 will only be applied to the IE6 browser. Sad that it is necessary, but useful to have.
Please note that in IE10 MS felt that there browsers were now sufficiently quirk-free and standards compliant to no longer necessitate supporting any conditional comments, so they won't work IE9+.
Remember that conditional comments will not work within your stylesheets. Instead, you can use conditional comments inside your HTML. First I would apply different CSS classes / ID's to elements so you can then target with CSS.
<!--[if IE]>
<div id="ie_wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
<div id="ie_wrapper">
<![endif]-->
I want to load a .css file if the browser is ie8 or lower and other file if the browser is greater than ie8 or other browser (chrome, safari, etc).
I've read that ther isn't an else in html conditional. And the answers here always says to use something like this:
<!--[if lt IE 9]>
This is less then IE9
<![endif]-->
<!--[if gt IE 8]> <!-- -->
this is all browsers: IE9 or higher, firefox, chrome, etc.
<!-- <![endif]-->
The problem with this is that I don't want to do that only if the browser is greater than 8, I want to do iy if the browser is other than ie also.
How can I do it?
Thanks!
The <!-- --> will ensure that other browsers see the content between it and the next <!--. Notice how the syntax highlighter on Stack Overflow does not highlight the content as an HTML comment — that's how you can tell.
A more common variation that's somewhat shorter:
<!--[if gt IE 8]><!-->
this is all browsers: IE9 or higher, firefox, chrome, etc.
<!--<![endif]-->
Just put your styles before IE conditionals
<link rel="stylesheet" type="text/css" href="your_styles.css">
<!--[if lt IE 9]>
This is less then IE9
<![endif]-->
<!--[if gt IE 8]>
this is for: IE9 or higher
<![endif]-->
I want to use display A for IE great than 7 or other browsers, and display B for IE 7 and lower.
One way is
<!--[if !IE]>
A
<![endif]-->
<!--[if gte IE 8]>
A
<![endif]-->
<!--[if lt IE 8]>
B
<![endif]-->
But I don't want to write A twice in a page since A is very long and it seems unwise to duplicate it.
How can I achieve this by HTML only?
I have a fullscreen/background slideshow that my client loves that just utterly fails in Internet Explorer 8 and below. I think trying to fix that is way beyond my capabilities right now so I would just like to switch it out for another IE safe background slideshow (less good looking but its something at least) if the browser is IE8 or below.
However, I know that you can switch stylesheets by using
<!--[if IE]>
etc, but the stylesheet relies on some basic html markup within a div (example below) that I do not want to show on the page to internet explorer ...
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>Lorem Ipsum Dolor</h3></div></li>
<li><span>Image 02</span><div><h3>Lorem Ipsum Dolor</h3></div></li>
<li><span>Image 03</span><div><h3>Lorem Ipsum Dolor</h3></div></li>
</ul>
how do I remove this if the user is using IE8 or below? I am using a mac so running many tests in IE is not really possible so I am not being lazy in asking.
Do I just have to have different pages or something?
Thanks in advance
If you use conditional comments to set a class on the <html> tag you can avoid having a separate stylesheet:
<!--[if lt IE 7]> <body class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <body class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <body class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <body class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <body class="ie"> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
in your styles just hide the ul : .lte9 .cb-slideshow { display: none;}
see:
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
and
http://misteroneill.com/journal/improved-internet-explorer-targeting-through-body-classes/
To expand on one of the comments, you can put conditional comments anywhere, so you can do this:
<!--[if lt IE9]>// IE-specific slideshow HTML here. <![endif]-->
<!--[if gte IE 9]><!-->// Standard slideshow HTML here (for IE9+ and non-IE browsers) <!--<![endif]-->
Try this:
<!--[if !LT IE 9]><!-->
<p>Not IE 8 and below and all other browsers</p>
<!--<![endif]-->
<!--[if lt IE 9]>
<p>IE 8 and below </p>
<![endif]-->
The first block outputs to all browsers except IE8 and below.
The second block outputs to IE8 and below.
You can define different layout inside <div id="browserid" style="display:none">...</div>-Tags where browserid is one of IE, FF, etc. That makes them invisible by default.
Then you define a javscript function, that is called at onpageLoad and that evaluates the navigator.userAgent property. That contains the client browser name. Depending on that value you change the corresponding 's display-style.
I'm having a strange issue.
I am using Internet explorer 9 and just changing the browser mode to IE 7 or IE 8 etc ...
My problem is that I've added:
<!--[if lt IE 7]>
<link type=\"text/css\" rel=\"stylesheet\" href=\"/styles/ie7.css\" />
<![endif]-->
but it's not changing to the conditional css file when in IE9 's IE7 browser mode...
Is this normal?
if lt IE 7 will match IE6 (or lower).
To match IE7, use lte (less than or equal)
#SLaks is right about the error you are receiving.
I would like to add to that by showing you a better way to target IE:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]><html class="ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="en"><![endif]-->
<!--[if IE 10 ]><html class="ie10" lang="en"><![endif]-->
<!--[if !IE ]><!--><html class="non-ie" lang="en"><!--<![endif]-->
The benefit of doing it this way is that you get to keep the best practice of only using 1 stylesheet. You simply preface your target with the corresponding IE class you want to hack.
For example: .ie6 #target-id
For a more in depth explanation, check out Paul Irish's article:
Conditional stylesheets vs CSS hacks? Answer: Neither!