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

• Select the element in the left side of the screen by using the DOM explorer:

• Play with the CSS properties on the right side of the screen to preview your changes:

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:

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

• If you’re using Joomla, you can use an extension to add the CSS.
• For WordPress, there is a plugin.
• For Drupal, add it in one of the CSS files from /sites/all/themes/your-theme/css/

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.