CSS Rollovers 1- MSIE Fixes

Date Originally Written: 8 May, 2006
Author: Jason Gonzalez

This tutorial has relocated to this location as of August 2008. To see it in its original location, follow this link: www.jgpws.com/tutorials/css_rollovers_1/rollovers_msiefixes.html.

Also, this tutorial has been updated as of October 15th, 2008. The CSS code originally given does not work in IE6. The new method for getting rid of the gaps between list items is shown in this article from 456 Berea Street. The new code will be shown in bold.

In this follow up to the previous tutorial section CSS Rollovers- Part 1- Rollovers with Images, we will be making the changes for Internet Explorer (Windows) as promised at the end of that tutorial. Needless to say, you will want to be following this tutorial while previewing in Internet Explorer (preferably 6 and up). If you are viewing these rollovers from any other browser, no further changes are needed.

If you recall, we left off at the last tutorial with the following completed links list (shown here as a jpeg image):

These images have huge gaps between each rollover! We will make some MSIE specific adjustments to fix them.

• First, we must create a new external stylesheet to place these IE specific style rules in
  • Create a new stylesheet in the same directory as your “navbar.css” stylesheet
  • Name it “msiefixes.css”

• Type your style rules into “msiefixes.css”
  • Type the following in the file:

  • #navlist a {
    margin-bottom: -5px;
    display: inline-block;
    margin-left: 20px;
    height: 1em;
    float: left;
    clear: both;
    width: 100%;
    }
    
    #navlist ul {
    margin-top: 5px;
    }

  • Unlike in CSS Uberlinks List Menu, our margins had to be adjusted for the size of the images
  • I also moved the margin-left: from 20px to 10px to re-center the links
  • Setting the margin: top on the navlist ul tag causes us to lose a little space on the top. For some reason, the links will not move down to accommodate more space at the top

• Add a link to your stylesheet at the top of your html file
  • Open “rollovers01.html”
  • Add the following conditional statement just below your first stylesheet link (<link rel=...>):

  • <!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="msiefixes.css">
    <![endif]-->

Your completed rollovers links should look like the following (the final product from CSS Rollovers 1):