Moodle 2 Theme Engine

Using Internet Explorer Specific CSS

Despite great advances in W3C standards support, there are still some times when you may need to create IE specific CSS to handle CSS tags that Internet Explorer handles differently from Firefox, Safari, and Chrome. 

This can be accomplished by inserting IE specific CSS in your Custom tab.

Custom CSS for IE7

  1. For IE specific CSS, plut .ie in front of the tag in the Custom CSS box. 
  2. For version specific CSS, put .ie and then the version number. For example, this CSS will only affect IE7.
To view the IE version specific CSS, a simple way is to go to the site in IE9 - then look at the site in IE7 mode.
IE 7 mode\
  1. Open the site in IE 9 and click F12 -this opens the developer tool bar
  2. Select IE 7 from the browser mode dropdown.
The site will refresh and now we can see the IE 7 specific CSS:
IE 7 specific CSS
More practically we can see the border in the site menu - this border shows up in IE (all versions) but not in Chrome or Netscape. So we can hide the border in IE using IE specific code.
Finding the border CSS in IE

We can use the IE Developer tools to locate the CSS that is printing the border.

Setting the border to none

Then in the Custom tab we can set IE specific CSS that hides the border. Because we have started the command with simply .ie - this CSS will affect all Internet Explorer versions. Note that by specifying the #custommenu div tag, we are not removing the border in other places where the .yui3-menu-content tag would print a border. This is to be safe, in other areas the UI might get confusing if we remove the border. If we don't want a border any place on the site where the yui3-menu-content tag is shown, we can leave the #custommenu command off.