confused and dazed Posted November 8, 2013 Share Posted November 8, 2013 Hello internet. I am starting to work with media Querys (like ones below): @media screen and (max-width : 460px) { .someclassname {display: block;} } I am struggling to style IE10 browsers and below (I anticipate half of my users will be IE folks) because the media querys will not work for them. I can use the conditional statement below but the browser will still attempt to put the rest of the code on the page making it look all screwed up: <!--[if lte IE 8 ]> SOME CODE <![endif]--> A BUNCH MORE CODE How do I use html conditional statements to get rid of “A BUNCH MORE CODE” on the site? Link to comment Share on other sites More sharing options...
davej Posted November 8, 2013 Share Posted November 8, 2013 (edited) http://www.quirksmode.org/css/condcom.html <!DOCTYPE html><head lang="en"><meta charset="utf-8"><title>IE conditionals</title><!--[if !IE]> --><style>/* this style block is not for IE */p{ color:green;}</style><!-- <![endif]--><!--[if IE]><style>/* this style block is for IE */p{ color:red;}</style><![endif]--></head><body><p>Hello: RED if IE -- GREEN if not IE</p></body></html> Edited November 8, 2013 by davej Link to comment Share on other sites More sharing options...
confused and dazed Posted November 8, 2013 Author Share Posted November 8, 2013 It all just disappeared!!!!! SWEET!!! thanks. Link to comment Share on other sites More sharing options...
confused and dazed Posted November 8, 2013 Author Share Posted November 8, 2013 ...... ummm problem though.... now there is COMPLETELY no content on Safari/firefox/etc..... <!--[if lte IE 8 ]>SOME CODE <![endif]--><!--[if !lte IE 8 ]> A BUNCH MORE CODE <![endif]--> Link to comment Share on other sites More sharing options...
davej Posted November 8, 2013 Share Posted November 8, 2013 (edited) <!--[if !IE]> --> ...But I think the more traditional approach is to apply a universal style and then apply IE fixes as overrides... <link rel="stylesheet" href="normal-styles.css" type="text/css" /><!--[if IE 9]><link rel="stylesheet" href="ie9-fixes.css" type="text/css" /><![endif]--><!--[if lte IE 8]><link rel="stylesheet" href="ie5678-fixes.css" type="text/css" /><![endif]--> Edited November 8, 2013 by davej Link to comment Share on other sites More sharing options...
confused and dazed Posted November 8, 2013 Author Share Posted November 8, 2013 The code below worked! Thanks! To anyone following this link... correct spaces make all the difference. This syntax is very sensitive. <!--[if lte IE 8 ]> SOME CODE <![endif]--><!--[if !IE]> --> A BUNCH MORE CODE <!-- <![endif]--> Link to comment Share on other sites More sharing options...
confused and dazed Posted November 8, 2013 Author Share Posted November 8, 2013 <link rel="stylesheet" href="normal-styles.css" type="text/css" /><link rel="stylesheet" href="ie9-fixes.css" type="text/css" /><link rel="stylesheet" href="ie5678-fixes.css" type="text/css" />Where do you get these files? Link to comment Share on other sites More sharing options...
davej Posted November 11, 2013 Share Posted November 11, 2013 I'm sure you could examine what some large websites are using with view source, or you could use google... https://www.google.com/#q=ie6+fixes+css Link to comment Share on other sites More sharing options...
thescientist Posted November 12, 2013 Share Posted November 12, 2013 <link rel="stylesheet" href="normal-styles.css" type="text/css" /><link rel="stylesheet" href="ie9-fixes.css" type="text/css" /><link rel="stylesheet" href="ie5678-fixes.css" type="text/css" />Where do you get these files? they were examples to illustrate his point for each condition... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now