Disappearing Image Links (in some browsers)

Safari, IE6 & IE7 don't show my image link

[icky_thump]

I've got myself all bound up in knots. Ah, the joys of learning CSS on the fly.

So, here's the deal, I'm getting some image links positioned and it's all working fine...... in Firefox. Some adjustment are still needed but it generally is working in FF, Camino, Opera, Netscape and SeaMonkey. In Safari and IE6&7 though, the image links magically disappear. Now, why is that? Any insight is appreciated!

Here's the CSS: (there are more IDs for each image link, but I skipped them here for simplicity, they all look the same with different names/images)

#logos
{ text-align:center;
margin-top:-28px;
height:55px;
}

#logo_vis
{padding:10px 45px 10px 45px;
background: url(../images/vispro_w.gif) top center no-repeat;
width:100px;
}

#logo_vis:hover
{
background: url(../images/vispro_c.gif) top center no-repeat;
}

#logo_snap
{
padding:10px 65px 10px 65px;
background: url(../images/xsnap_w.gif) top center no-repeat;
}

#logo_snap:hover
{
background: url(../images/xsnap_c.gif) top center no-repeat;
}

#logos ul li{
display:inline;
}

and the HTML:
<div id="logos">
<ul>
<li><a href=""><span id="logo_vis"></span></a></li>
<li><a href=""><span id="logo_snap"></span></a></li>
<li><a href=""><span id="logo_wow"></span></a></li>
<li><a href=""><span id="logo_filevac"></span></a></li>
<li><a href=""><span id="logo_dart"></span></a></li>
<li><a href=""><span id="logo_xplus"></span></a></li>
</ul>
</div>

[icky_thump]

Responding to myself.... :-)

I had to approach it from a different angle.
Now it's all good except with my old 'friend' IE6 where the images still refuse to show themselves.
Any suggestions on that?

Here's the updated CSS:

#logocontainer
{
height:60px;
margin: 0 auto;
position:relative;
width:100%;
text-align:center;
padding:0;
}

#logos
{
height:35px;
margin:-35px auto;
width: 800px;
}
#logos ul
{
list-style-type:none;
margin:0 auto;
}
#logos ul li{
display:inline;
height: 35px;
margin:0 15px;
width:120px;
}

#logos ul li a{
text-decoration:none;

}
#logos ul li a span{

height: 35px;
padding:5px 0 4px 0;
text-align:center;
}

while using 'onMouseOver' in the HTML 'a href' tag to swap out the images.

[Xapti]

You're talking about CSS image rollovers right? background images, not actual anchored image tags.

Your problem is that Internet Explorer does not support the :hover tag for anything other than the anchor element (<a>).
You can devise a CSS-only answer on your own, But this has already been done and documented online, so you can check that out and save yourself some thinking work.

The second option, which is probably easier, but still has small ownsides, is to use javascript to get internet explorer to EMULATE :hover support for all elements, instead of just achors. It's great because you jsut need to incldue the javascript, and treat IE like any other compliant browser, which is why I like it. The ridiculously small number of users who are running IE without javascript will run into trouble though (I don't see why anyone would do that, since all smart users who may want to disable javascript, run on better browsers).

[edited by: Xapti at 7:43 pm (utc) on Nov. 14, 2007]

[icky_thump]

Hey Xapti,

Thanks for the input. It's good to know the things you said.
the method I used was 'onMouseOver' inside the <a> tag to show and replace the image(s)

I just received input elsewhere as to what to do to make it work:

*+html #logocontainer {margin-top:-35px;}
*+html #logos {margin-top:0;}

just added that into my CSS and it worked like a charm.