I've included in my head section:
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
Everything is fine when I open my site locally, html tag has class ie7(ie8) when I open it in IE7(IE8), but when I upload files on a server (which is on apache), and check it has an empty class. What am I doing wrong?
Related
How can I add conditional CSS classes to the HTML or BODY element in Magento Go? I would like to add this:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
to my site.
One of the main features of Magento GO is it's limitations on what can be changed in order to prevent website downtime due to inexperienced people making code edits that they cannot back out of. All the design is exposed in the Magento GO Theme, Layout and Design editor suite.
If it is not available in the Magento GO toolset, then it is not available as a conscious desire on their part to limit the changes that can be made in the Magento GO hosted environment.
See this question in Magento.Stackexchange for more information on Magento Go limitations
Basically, you don't have access to directly edit the templates and layouts files. The <html> opening tag is found in the templates/page folder in 1col, 2col, 3col template files for Magento CE.
I've got a html5 site that displays fine in ie 10 for windows 7, but when I run it in ie10 for windows 8 it automatically switches to compatability view. The doc type in the html5 is :
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
I've made this site with dreamweaver.
Why thus this happens?
Thanks in advance.
I'd suggest going through these steps: http://msdn.microsoft.com/en-us/hh779632.aspx
Especially run the Compatibility Inspector, located in the section titled: Other reasons my page does not render correctly
In modern web pages you often see something like:
<!--[if IE 7]>
<html class="ie ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html lang="en-US">
<!--<![endif]-->
The purpose is obviously to apply different html, depending on browser and browser version. I assume this is done server side, as it seems everything except the appropriate parts are commented out.
What software is used on the server to select which part to comment out depending on the visiting browser?
Those are conditional comments. They are parsed (contrary to the HTML spec), client side, by Internet Explorer (versions 5-9). Everything else (including IE 10) treats them as regular comment syntax.
I have been looking for an explanation of why this part of the html tag conditionals for IE in the HTML5 Boilerplate have this part:
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
I ask just so I have an understanding of how this is working. I understand the conditionals above this one, but why is this one different than those above it? I don't get what this condition is doing compared to those above it.
Thank you in advance for helping me to understand something that I will be using.
Basically, the last part is used for IE versions 9 and up, and all other browsers. However, the syntax is shorter and not as straight-forward as it could be because HTML Boilerplate is heavily concerned with optimization.
I found the article that explains it, I recommend you read the whole thing:
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Here's my proposed solution:
<!--[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]-->
This was actually updated afterwards due to issues you can read about in the article.
Apparently part of the weird syntax has to do with a Dreamweaver(!) bug. Here is an excerpt:
Here is the new recommendation, and the one that's in use in the HTML5
Boilerplate.
<!--[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 class=""> <!--<![endif]-->
Basically, the last line is saying "Do this if IE9+ or not IE". Some of the bullet points below are not directly related to your question, but I'll include them anyways.
Why?
This fixes a file blocking issue discovered by Stoyan Stefanov and
Markus Leptien.
It avoids an empty comment that also fixes the above
issue.
CMSes like WordPress and Drupal use the body class more
heavily.
This makes integrating there a touch simpler It doesn't
validate in html4 but is fine in html5. Deal with it.
It plays nicely
with a technique to kick off your page-specific javascript based on
your markup.
It uses the same element as Modernizr (and Dojo). That
feels nice.
I left an empty class in there because you'll probably be
putting a no-js in there or something else. If not, delete.
Also if
the extra comments around that last tag look weird to you, blame
Dreamweaver, which chokes on normal !IE conditional comments.
More discussion about this issue here: https://github.com/h5bp/html5-boilerplate/issues/425/#
I'm trying to target the IE browser on Windows Mobile 7.5. Can anyone tell me if the
<!--[if lt IE <mobile browser>]> <include retina display> <[end if]-->
conditional comment syntax style works for targeting Windows Mobile?
EDIT: Thanks to the comment below I was able to find a solution. The <!--[if IEMobile]> <[end if]--> syntax works for Windows mobile 7, but I couldn't get it to work for Windows mobile 7.5. Because I am building a mobile website that isn't required to present well on desktop devices I was able to use a generic <!--[if gt IE 7]> comment that gets around the issue I was having between the two renderings.
If anyone out there has a more elegant solution for when this won't work because of required desktop support, I'd love to hear it.
Just in case anyone experiences this issue. Some points worth knowing:
IE Mobile 7.5 reports false positive for font-face. Therefore, you're out of luck forking that feature with Modernizr.
To confuse matters, it also ignores conditional comments for IE Mobile as suggested above. It actually picks up conditional comments for IE9. The only way I was able to fix was add a conditional comment like this:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 ieMobile75" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
And then prefix relevant styles with the .ieMobile75 class. If you want to avoid those styles hitting desktop IE, I'd suggest combining them inside a media query.
may be this work for you
<!--[if IEMobile]>
...
<![endif]-->
<pre>
<code>
is this help for you by checking device width?
<!-- [if (min-device-width: 481px)]>
<![endif]—>
</code>
</pre>