Button Visibility Issues

HTML & CSS
1

Hi again guys/girls,

I’ve run into a bit of a snag - I was asked to create an alternate language version of this site since I’m in Canada, and the language toggling button or div will not work across all browsers.

IE8: works
FF: nope
Chrome: nope
Safari: untested

The language link is an area map right underneath the navbar in the upper right. It says ‘FRANCAIS’ on the homepage.

the relevant code:

<div id="langBar"> <img src="img/langBar2.jpg" alt="Language Bar" width="915" height="20" border="0" usemap="#language" />
            <map name="language" id="language">
                <area shape="rect" coords="846,2,913,20" href="html/fr/index.html" alt="francais" />
            </map>
        </div>

and css:

#langBar {
	height: 20px;
	width: 915px;
	position: absolute;
	margin-top: 41px;
	z-index: 50;
}

the site is www.ocoiffurespa.com

any ideas why it isn’t clickable? any help would be really appreciated (again)

2

Hi,

Try raising the z-index to bring it on top of Content.


#langBar {
height:20px;
margin-top:41px;
position:absolute;
width:915px;
[B]z-index:2;[/B]


}
3

Seems like something from my original css wasn’t taking, or stack values don’t like arbitrary numbers. I have the z-index at 3 (navbar at 2) and it’s working. Thanks for helping, as always Paul is the best!