Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by tunis dehas
tunis dehas
4,863 Points

<link rel="stylesheet" media="screen and (min-width:500px)" href="css/responsive.css">

Hi In my own project I inserted this line <link rel="stylesheet" media="screen and (min-width:500px)" href="css/responsive.css">

in the head of my index page instead of writing it on the page css. I was obliged because it was not well displayed Now because of this line I am quite sure I have a big trouble with internet explorer 8. It's important for me that is works well on this browser . I tried to insert a respond , modernizr file , other links like google html5shiv . I am lost . Someone has an idea or has already met this situation? thanks for helping me

the head of my project

tunis dehas
tunis dehas
4,863 Points 
<!DOCTYPE html>
<html lang="" class="no-js">
<head>
<meta charset="utf-8">

<title> Paris Region parisienne</title>

   <link rel="stylesheet" href="normalize.css">

      <link href='http://fonts.googleapis.com/css?family=Lato:400,900italic%7CNeuton%7CMichroma%7CSacramento%7CNothing+You+Could+Do'rel='stylesheet' type='text/css'>

 <link rel="stylesheet" href="css/main.css">

  <!--[if lt IE 9]>

  <link rel="stylesheet" href="css/ie8.css">

 <script type="text/javascript" src="js/modernizr.js"></script>

<script type="text/javascript" src="js/respond.js"></script>

  <![endif]-->

<link rel="stylesheet" media="screen and (min-width:500px)" href="css/responsive.css">

 <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"       charset="utf-8"></script>

<script src="js/app.js" type="text/javascript" charset="utf-8"></script>

 <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

2 Answers

John Norris
John Norris
22,455 Points

I would learn and use Bootstrap to style any responsive site.

Building Websites with Bootstrap 3 w/ Nick Pettit from Treehouse

Bootstrap CSS Classes

Bootstrap Components

Bootstrap Tutorial

Using Bootstrap helps to make a modern responsive website that still looks great on IE8. There are a few rules to follow with IE8 though.

Also, be sure to include the HTML5 Shim and Respond.js support for IE8 in the head.

<head>
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
tunis dehas
tunis dehas
4,863 Points
tunis dehas
tunis dehas
4,863 Points

Hi John it's a little better with the lines of script but I think i have no else choice at this stage to create a css stylesheet just for internet explorer 8. Thanks for your help