Alt Tag & onMouseOver working in IE but not Firefox

[devel95]

I have an issue getting my alt tag and onmouseovers to work in Firefox. MSIE is working fine.

If you take a look at http://bridgeofloveministries.org/supportGroup.html in both browsers you will see that the mouseovers don't work in FF, nor to the anchor tag links.

Here is the css:
div#logoPosition {
position:absolute;
margin:auto;
text-align:center;
width:900px;
padding-top:5px;
z-index:1;
}
.class1 { z-index:2; }
.pad1 { padding-left:12px; z-index:2; }
.pad2 { padding-left:280px; z-index:2; }

Thanks!

[Fang]

The alt value (http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.8) should only be shown if the image is not available. IE always shows it which is incorrect.

You are using IE specific referencing for the image swap.
Use:document.images[imgName].src
Better still use css image rollovers (http://www.alistapart.com/stories/rollovers/)

[devel95]

ok, thanks...I'll convert to css rollovers and post back the results. Thanks for the link.

[felgall]

The title="" attribute does for any tag what the alt="" incorrectly does for images in IE.

[devel95]

Sorry, but my post title is incorrect. I didn't mean "alt tag" I meant "anchor tag".

At this point I am way to into the use of images and JavaScript for my rollovers. So I would like to try to solve this css issue with Firefox because I know of many other sites that use javascript and mouseovers to get their menu items to work.

I believe my issue has to do with the Logo Image that I have pulled out of the document flow and used absolute positioning on. I could be wrong but I think that the fact the logo is positioned absolute over my menu bar prevents access to the menu images in Firefox. Again, MSIE works fine. Any ideas on what the issue may be here?

[Fang]

<a class="menuLink" href="/events.html" onmouseover="document.images['image3'].src=img3d.src;" onmouseout="document.images['image3'].src=img3u.src;">
<img class="menuPad1" name="image3" src="/images/nav/events_out.gif" border="0" alt="events menu button">
</a>

[devel95]

At one point in my development and testing I did change the references to document.images but that didn't seem to work (although I did have a lot of code variations crammed in so I was not sure what was and what was not working). I will try it again using your code.

But what is still curious to me is that Firefox does not even seem to recognize the anchor tag at all...in other words, I would expect to at least be able to click the menu objects. MSIE allows me too but FF does not.

I'll let you know how it goes with your code.

Thanks for helping.

[Fang]

anddiv#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
width:900px;
background-color:#FFFFFF;
text-align: left;
}

/*Logo Styles*/
#logoPosition {
position:absolute;
width:264px;
left:305px;
top:5px;
z-index:1;
}

and<div id="wrapper">
<a id="logoPosition" href="http://bridgeofloveministries.org/"><img src="supportGroup_bestanden/bridgeOfLoveLogo.jpg" alt="Bridge of Love Ministries Logo" border="0"></a><!--logoPosition-->
<div id="page">

[devel95]

Fang. Thank you so, so much! I worked your code and styling into my pages and it achieves what I want and need it too. Again, I appreciate your time and assistance.

I plan to do my next site's menu in CSS. I have attempted it in the past, but I am literally an old dog trying to learn a new trick. I have struggled with complex CSS because - for some reason - it just seems overly complicated and does not set the light bulb off for me yet. But I'll keep trying.

(BTW, the real pages are behind in a mod_auth directory until my site sponsor let's the pages release - which should be today or tomorrow.)