SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive problems

    I have made my website in a responsive way

    http://dreamsymbolism.info/

    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. #2
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <meta http-equiv="Content-Type" content="text/html; charset="utf-8">
    You have an extra quote mark which will cause errors. It should be:

    Code:
    <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).
    Code:
    <!--[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:
    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    If you are using html5 then don't forget the shiv:
    Code:
      <!--[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. #4
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •