It’ll be best if I show you the markup first. Here is a menu:
<ul id="memberMenu">
<li><a class="home" href="https://perksforwork.com/business"><div class="aicon"></div><span>BUSINESS HOME</span></a></li>
<li><a class="tools" href="https://perksforwork.com/business/manage?action=viewbusiness"><div class="aicon"></div><span>BUSINESS TOOLS</span></a></li>
<li><a class="viewedit" href="https://perksforwork.com/business/manage?action=viewperks"><div class="aicon"></div><span>VIEW/EDIT PERKS</span></a></li>
<li><a class="create" href="https://perksforwork.com/business/manage?action=addperk"><div class="aicon"></div><span>CREATE PERK</span></a></li>
<li><a class="profile" href="https://perksforwork.com/business/manage?action=editprofile"><div class="aicon"></div><span>EDIT PROFILE</span></a></li>
<li><a class="logout" href="https://perksforwork.com/logout"><div class="aicon"></div><span>LOGOUT</span></a></li>
</ul>
In terms of the icon images themselves, they are used as background images to a div and I have one image with all icons in a column, and then the hover state icons in a column right next to that. I’m going for the whole sliding doors thing. I’m pretty sure I could chop that one image up and use just the icon/hover state pairs but I want to avoid it if possible. Anyway I’m having some rendering issues in IE7. The list is supposed to be horizontal with the icons centered above the text. In IE7, everything appears as a block element which totally ruins the menu. in IE8, Safari 4, and FF3+ the menu looks fine. Along with the centering of the icon, I want the hover state triggered when the user mouses over the icon OR the text. That’s why I have two elements inside an anchor element (not the most elegant I know…). Here is the CSS (#businesstoolsnav is a similar menu on a different page):
#memberMenu {
margin: 0 117px;
float: left;
}
#memberMenu li, #businesstoolsnav li {
float:left;
margin: 5px;
font-family: Arial, sans-serif;
font-size: 12px;
clear: none;
}
#memberMenu li a, #businesstoolsnav li a, #memberMenu li a:visited, #businesstoolsnav li a:visited {
color: rgb(69,112,43);
text-decoration: none;
}
#memberMenu li a span {
float: left;
clear: both;
}
/** admin icons map
* L T
* home1: 0 0
* home2: -40 0
* tools1: 0 -40
* tools2: -40 -40
* viewedit1: 0 -80
* viewedit2: -40 -80
* create1: 0 -120
* create2: -40 -120
* profile1: 0 -160
* profile2: -40 -160
* logout1: 0 -200
* logout2: -40 -200
*
**/
.aicon, .bicon {
height: 40px;
width: 40px;
margin: 0 auto;
}
.aicon {
background: transparent url(https://perksforwork.com/business/images/business_menu_icons.png) no-repeat;
}
.home .aicon {
background-position: 0 0;
}
.home:hover .aicon, .stayhome .aicon {
background-position: -40px 0;
}
.tools .aicon {
background-position: 0 -40px;
}
.tools:hover .aicon, .staytools .aicon {
background-position: -40px -40px;
}
.viewedit .aicon {
background-position: 0 -80px;
}
.viewedit:hover .aicon, .stayviewedit .aicon {
background-position: -40px -80px;
}
.create .aicon {
background-position: 0 -120px;
}
.create:hover .aicon, .staycreate .aicon {
background-position: -40px -120px;
}
.profile .aicon {
background-position: 0 -160px;
}
.profile:hover .aicon, .stayprofile .aicon {
background-position: -40px -160px;
}
.logout .aicon {
background-position: 0 -200px;
}
.logout:hover .aicon, .staylogout .aicon {
background-position: -40px -200px;
}
Now, I have a feeling that IE7 is rendering the elements vertically because the .aicon/.bicon divs are block elements. However, if I float and clear them, they aren’t centered. If I make width 100%, the hover state icon is visible. I’m kind of stuck with this one in terms of a simple fix. Am I going to have to break up that image and try and different route? I’ve attached an image of the bug.
