View Full Version : Spry background image does not show in IE7

02-25-2010, 07:42 AM
Spry Menu displaying differently

Hi - I'm working on this site and I'm having trouble
get my Spry Menu to display correctly.

On the laptop I am working on - in Firefox I can view it correctly - in that my menus have a blue line which runs along the bottom and connects to a blue rectangle to the right, on rollover an underline appears under the text.

However looking at the site on Internet Explorer I can
not see my button image - therefore all I see is the button text on just a plain white background.

Has anyone come across this browser issue before with Spry Menus - any ideas on what to do?

You can see the page here:

All help appreciated!!

02-25-2010, 08:40 AM
In your SpryMenu stylesheet you have this rule at the top:

ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 212px;
height: 45;
background-image: url(../images/blank-button-template.gif);

You've forgot to add 'px' to the height, so by default your height is now 0px and that's why the background image is not showing up. Firefox will probably render the height defined by the height of the image itself and that's why it shows up in this browser.

02-25-2010, 09:10 AM
Hi Gentleone - thanks for your response - I've changed this - but still seem to be getting the same output from IE7 - Has it updated in your browser?

Thanks again,

02-25-2010, 10:43 AM
Hmmm.... I see.... and no, its still not there... weird!

I did a quick google and found some interesting things about an IE7 bug regarding the background-image property on suckerfish-style navigation lists (like the spry menu you use).


02-25-2010, 02:33 PM
I assume you're using CS3 since your spry CSS file identifies it as Spry version 1.4. Try updating to the current version of Spry. The Spry Updater that can be found at http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_spry.