0

I am helping build a website within wordpress and I have a Jquery Map that loads perfect on every other browser but Internet Explorer. The issue is that it displays very small and is not responsive I am at a loss on what to do.

Link to site

Some Solutions for this include adding but size is still to small.

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

Here is the code that i have inserted into the page

<div id="map"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/wp-content/themes/happenstance/css/jquery.qtip.min.css">  </script>
<script src="/wp-content/themes/happenstance/js/mcm.clickable.map.js"></script>
<script>
var map = $("#map").ezClickableMap({});
</script>

Here is the code code that is for the page. The map is responsive for every other browser except IE family of browsers. How can i fix it?

CS Studentzzz
  • 77
  • 8

1 Answers1

0

I was able to replicate issue you have. I was able to fix by inspect element and i believe you can try following to solve the problem.

It works for me

Add custom css code only for IE browser to your #map id. 

<!--[if IE]>
<style>
    #map {
         height: 600px;
    }
</style>
<![endif]-->

So you can adjust your css until it achieve your style goal.

Shajibur Rahman
  • 436
  • 3
  • 12
  • is there any way to make it responsive like the other browsers? – CS Studentzzz Jan 30 '18 at 03:20
  • Is the above solution able to make your map bigger ? – Shajibur Rahman Jan 30 '18 at 03:21
  • Well it made it bigger if i take the conditional statements out. – CS Studentzzz Jan 30 '18 at 03:22
  • That's great ! Now its all about your css skill. If media query css does not work you can try Respond.js or any similar solution if available. – Shajibur Rahman Jan 30 '18 at 03:26
  • Any clue on why Endif didnt work? I know why just the regular style worked but endif doesnt work – CS Studentzzz Jan 30 '18 at 03:29
  • It is really depends on few factors, such as which IE version you are targeting. You will find more , just google it. Here is some [link] (https://www.sitepoint.com/community/t/responsive-design-problems-with-internet-explorer-11/108823) [link] (https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS) – Shajibur Rahman Jan 30 '18 at 03:31
  • also using this [https://stackoverflow.com/a/41169344/5181371](http://example.com) in conjunction with you solution gave me the answer i was looking for – CS Studentzzz Jan 30 '18 at 03:40