Jump to content

Recommended Posts

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 ]>





How do I use html conditional statements to get rid of “A BUNCH MORE CODE” on the site?

Link to post
Share on other sites


<!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 by davej
Link to post
Share on other sites

<!--[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 by davej
Link to post
Share on other sites

<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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...