How to Fix Design Issues in Internet Explorer 10 and 11

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:

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

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.

Instructor

  • Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tebogo

Why was magento tagged in this thread when there’s no solution for it?

Anonymous

I have played around with this:
@Media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// Your custom CSS goes here
}

And can guarantee that it is not working. I have tested several times in Magento.

vishal

[quote=Anonymous]I have played around with this:
@Media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  // Your custom CSS goes here
}

And can guarantee that it is not working. I have tested several times in Magento.  [/quote]
Yes i have also try this code but its not working in magento and magento 2

Johnny

replace “,” with “and”
@Media all (-ms-high-contrast: none) and (-ms-high-contrast: active) {

saravnakarthik

It was working?

Shubham Dobriyal

How to apply the CSS for IE only for a specific resolution

6
0
Would love your thoughts, please comment.x
()
x