HTML + CSS = Firefox won't render my images as links, IE does, but firefox does not allow the menu links to be clicked. Options

[deftrance]

Hi guys, this is my first post here and I'm a bit irked.

I'm working on this site for a friend of mine for the business she runs and I've run into a snag. I have the base for the page all designed and set up, but for some reason Firefox doesn't want to set up my menu images as links. IE does it just fine.

http://brian-jordan.com/bellas-bridal.com/index.html

Code from html file

CODE

<div class="menu">
    <a href="index.html"><img src="images/home.jpg" alt="Home" title="" /></a>
    <a href="dresses.html"><img src="images/dresses.jpg" alt="Dresses" title="" /></a>
    <a href="location.html"><img src="images/location.jpg" alt="Location" title="" /></a>
    <a href="contact.html"><img src="images/contact.jpg" alt="Contact Info" title="" /></a>
    <a href="events.html"><img src="images/events.jpg" alt="Upcoming Events" title="" /></a>
</div>

Code from CSS

CODE

body {
    background : #ffffcc;
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
}

img {
border: 0px;
}

.banner {
    position: relative;
    margin:0px;
    padding:0px;
    border:0px;
    width:491px;
    display:block;
    left: 50%;
    margin-left: -245.5px;
}

.menu {
    position:relative;
    vertical-align: top;  
    margin:0px;
    padding:0px;
    border:0px;
    width:335px;  
    left: 50%;
    margin-left: -164px;
}

.menu img {
    vertical-align: top;  
    float: left;
    border:0px;
    padding:0px;
    margin:0px;
}

.menu p {
    margin:0;
}

.image-main {
    position: relative;
    margin:0px;
    padding:0px;
    border:0px;
    width:466px;
    display:block;
    left: 50%;
    margin-left: -233px;    
}

.container {
    position: relative;
    margin:5px;
    padding:5px;
    border:0px;
    width:800px;
    display:block;
    left: 50%;
    margin-left: -400px;    
}

The page does validate with W3C, by the way. Any help would be greatly appreciated.

[pandy]

I haven't figured out what in your code makes this happen, but .image-main is positioned on top of the menu. FF won't let you get away with that. It won't let you click links if something is positioned on top of them, even if the positioned box is transparent.

Give .image-main a background color and you will be able to see this. Now to figure out *why*...

[deftrance]

Appreciate the reply; Yeah, I'm boggled currently myself, been trying to figure that out.

[Darin McGrew]

Well, if all the images have been floated, then there's nothing left in div.menu and it collapses. The next element is div.image-main, which is positioned relative to where it would appear normally.

But I don't see anything that should require positioning at all.

[deftrance]

Well, as a work around, I was able to get the link working by using z-index on img-main as well as menu, so it seems to be working for now. We'll see how it rolls.

[pandy]

There's a gap in image-main, above the image. It's the gap that covers the menu. The usual fixes don't work.

[pandy]

Now it works in FF. What did you do?

[deftrance]

I added a z-index property to the menu and to the main-image tags in the css source