Responsive problems

HTML & CSS
1

I have made my website in a responsive way

It works quite nicely in the modern browsers but I have tried it in internet explorer 9 and it falls apart.

The main drawback is a div called phonemenu (or something like that) which appears when the screen goes below a certain width… 568px

I have not got regular access to IE9 or IE8 so cannot test these things out.

How could I get rid of this div which appears in IE9 even when its not wanted

I have thought of the following… would they work?

  1. set the width and height of the div to 0px by default
  2. set the visibility to none (can you do that with a div)

Any other solutions?

2

I found this - would it work

<!–[if gt IE 8]>
<div class=“phonemenu”>

Phone menu content here
</div>
<![endif]–>

How would I write the syntax for an all inclusive statement where the browser is either Not IE and if it is then its greater than IE9 … or can that not be done

3

Hi,

IE9 is usually fine and its your lack of a doctype that is most likely causing problems because that will stop any modern css or media queries from working.

Add a doctype and test again and also fix this error.


<meta http-equiv="Content-Type" content="text/html; charset="utf-8">

You have an extra quote mark which will cause errors. It should be:


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

If you want to support IE8 then you need to add media query support which can be done with this polyfill (although the code only works when online and not locally).



<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

It may also be worth forcing strict mode in IE with this meta tag:


<meta http-equiv="X-UA-Compatible" content="IE=edge">

If you are using html5 then don’t forget the shiv:


  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

You can use Conditional comments to exclude a variety of browsers and the info you need is here but you will likely not need it if you have coded the page correctly as mentioned above.

4

Thanks Paul

Thats a great help. I never knew about that js fix for IE9.

I can get in a bit of a mess with html declarations as I don’t really understand them. I just cut and paste what I think is right.

Thanks again