JGPWS Tutorials

CSS Rollovers 1- MSIE Fixes

By: Jason Gonzalez
Created: May 8th, 2006

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 as promised at the end of that tutorial. Needless to say, you will want to be following this tutorial while previewing in Internet Explorer. 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):

screen2.jpg

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

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

  1. Type your style rules into "msiefixes.css"
    1. 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;
      }
              
    2. Unlike in Uberlink CSS Rollovers 2004, our margins had to be adjusted for the size of the images
    3. I also moved the margin-left: from 20px to 10px to re-center the links
    4. 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

  1. Add a link to your stylesheet at the top of your html file
    1. Open "rollovers01.html"
    2. 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 now have no gaps as shown below:

JGPWS's Tutorials can be found at the following locations:

© Copyright Jason Gonzalez 2004 - 2017 all rights reserved.
Questions? Contact me: jason.sgonzalez@gmail.com (Replace the word "at" with the & symbol when sending the email).
JGPWS Tutorials uses ads on some pages. For more information, see our Privacy Policy page.
[List of marks used, with 'Adobe' first, if used, followed by other Adobe marks used, in alphabetical order] are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Back to: JGPWS index page