The background behind the menu in [URL=”http://christopherstable.com/test”]this site[/URL] displays properly in FF3 but not in IE. My css seems to be valid. Maybe an IE hack issue? I would appreciate some help in fixing it.
@savvykmsNov 02.2010 — #I found this at /test/SpryAssets/SpryMenuBarHorizontal.css on your server. It is used in the page, it seems. [CODE]UL.MenuBarHorizontal LI.MenuBarItemIE { display : inline; background : #fff; float : left }[/CODE]
By the looks of it, your script API checks to see if the client is IE and explicitly defines a white background color, which is the only visible difference I can see about the menus between IE8 and FF3.6.12.
IE8 has a useful feature: Tools->Developer Tools (Shortcut Key: F12)
I used that to figure out the weird issue. Disabling the CSS for that code block made the two browsers look the same, as far as menus go.
@young77478authorNov 02.2010 — #Thanks savvykms - I tried commenting out that code - same result. I also tried adding a background-image to the code (see below) and still see white menu background on IE8. This is pretty crazy because I copied the /SpryAssets folder to /test from the root folder with no mods. Same with main.css so its not apparent why the menu in /test should display differently than in the main site.
@young77478authorNov 02.2010 — #Thanks for your suggestions - it got me thinking. Solved the problem by commenting out all background-image code in the spry css file. Cascading stylesheets can give unexpected results. The original code for spry css works fine in the live site, but would not work on the test site.