I'm trying to create a set of custom buttons that include a button with a "down arrow" icon to indicate that when you click it a drop-down menu will appear underneath it. The functionality works fine in all the browsers I'm supporting (IE7+, FF3+, Chrome, Safari 4+, Opera 10+), but the appearance is screwed up in IE7.
I can deal with the border radius and background gradient CSS properties not working in IE7 - that's not my concern right now. My main problem is that for some reason, the icon appears in a very strange place that pretty much breaks the way the button looks.
The CSS code is as follows:
/* YUI 3's CSS Reset Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 3.1.1 build: 47 */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
body { margin: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 62.5%; }
input[type=text], input[type=password] { font-size: 1.3em; }
.customButton { -moz-user-select: none; -webkit-user-select: none; cursor: default; display: inline-block; *display: inline; position: relative; margin: 1px; border: solid 1px #bbb; outline: none; padding: 3px 8px; font-size: 1.1em; white-space: nowrap; background-image: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#e3e3e3)); background: -moz-linear-gradient(center top, #f9f9f9, #e3e3e3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); background-clip: border-box; background-origin: padding-box; }
.customButtonIcon { display: inline-block; width: 8px; height: 8px; background-repeat: no-repeat; background-position: center; }
.customButtonSecondaryIcon { margin-left: 3px; }
.customButtonIconDownArrow { background-image: url(img/customButtonDownArrow.gif); }
.singleButton { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
And the HTML itself is rather rudimentary:
<div id="saveButton-1" class="customButton singleButton dropdownButton">Save<div id="saveButton-1-secondaryIcon" class="customButtonIcon customButtonSecondaryIcon customButtonIconDownArrow"></div></div>
Can anyone give me any clues as to how to get the button to look in IE7 like it does in the other browsers I mentioned as far as the positioning of the arrow goes and a correct, solid border around the whole "button entity" as opposed to the strange separated borders?
I suspect it has something to do with IE7's handling of inline-block, but the "*display: inline, zoom: 1" hack workaround I've read about at various sites doesn't really help me much since I still end up with what looks like two separate buttons.
Thank you in advance for any help you can offer.