Why doesn't this work in the AOL browser?

[360Cash]

I'm using the "CSS Popup Image Viewer" (from the CSS Library) and it works perfectly in IE and Firefox. However, in AOL, the images (that should be hidden) are displaying directly under the thumbnails and it's throwing off my entire page.

http://360cash.com/profit_websites.html

Any help working around this would be greatly appreciated. Thanks.

[TheJoshMan]

I just downloaded AOL browser and viewed the page... It's working like it's supposed to on my end. The larger images don't display until you hover over the thumbnails... However, you should probably adjust the positioning on the larger images a little to the left as the one on the far right does seem to throw the flow of the page off a bit when it displays. Other than that, it's working correctly.

Also, you need to add a "z-index" (or a higher one) to your submenus... They are displaying behind the thumbnail images when they drop down.

[360Cash]

Well, I don't know why it's working now! I had suspected that it could be a problem with cache but I cleared it and tested it again before posting.

Sorry for the inconvenience. Thanks for testing it for me and for the tip on adding the "z-index". Not quite sure what that means yet but I'll research it and figure it.

[Medyman]

For what it's worth, AOL _should_ mimic IE7. I say this without having ever using the AOL browser. But it is built on the Microsoft Trident rendering engine (i.e. the rendering engine that powers IE). Assuming that AOL is getting the same updates to the engine that Microsft made to IE7, it should be fairly similar.

With that said, it's such a small market, I wouldn't bother. If someone is knowledgeable enough to go browser-shopping, they won't pick up the AOL browser.

[TheJoshMan]

In regards to the "z-index" tip I posted, by giving elements a "z-index" you are essentially layering them on the page. If item "a" has a z-index of "1", and item "b" has a z-index of "2", and they are positioned in the same space... Then item "b" will be visible and item "a" will be hidden beneath it.

Your submenus don't have any z-index value set to them, and when they drop down they are dropping "behind" the thumbnails beneath the menu. To fix this, add a z-index to the submenu items. Find the following piece of code in your stylesheet [styles.css (line 448)] and add the portion that I have highlighted.



#ul_rollOverMenu2 li {
-x-system-font:none;
color:#F6CB48;
cursor:default;
font-family:verdana;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin:0;
padding:0;
position:relative;
text-align:left;
z-index:1000;
}

[360Cash]

Thank you so much for taking the time to help me with my code. I'm sure you saved me hours of work trying to figure that out.