How to Fix Design Issues in Internet Explorer 10 and 11

| Coding Tutorials
How to Fix Design Issues in Internet Explorer 10 and 11

One of our members needed to fix an issue for a site in Internet Explorer 11. At the same time, he wanted to avoid changes that might mess up other browsers. The site looks fine in Firefox, Chrome, Safari and Opera.

In this tutorial, I'll show you how to add custom CSS for just Internet Explorer 10 and 11.

See what CSS is needed

By using the Internet Explorer's inspect tool, we can see which CSS is required to fix the design issues such as margin, width, height, etc.

  • Right click over the element you want to fix
  • Inspect element
How to Fix Design Issues in Internet Explorer 10 and 11
  • Select the element in the left side of the screen by using the DOM explorer:
How to Fix Design Issues in Internet Explorer 10 and 11
  • Play with the CSS properties on the right side of the screen to preview your changes:
How to Fix Design Issues in Internet Explorer 10 and 11

Once you are satisfied with the preview result, it's time to integrate your code in your site.

Add the custom CSS

In one of your CSS files, add your custom CSS inside the media query below:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   // Your custom CSS goes here
}

Test the end result

Open your site in Internet Explorer and confirm everything looks fine; it may require clearing browser and CMS cache. Do the same in Firefox, Chrome, Safari and Opera to double check the new code is not affecting those browsers.


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.