HTML + CSS = Firefox won't render my images as links, IE does, but firefox does not allow the menu links to be clicked. |
HTML + CSS = Firefox won't render my images as links, IE does, but firefox does not allow the menu links to be clicked. |
deftrance |
Oct 9 2008, 09:15 PM
Post
#1
|
Group: Members Posts: 5 Joined: 9-October 08 Member No.: 6,858 |
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 |
Oct 9 2008, 09:52 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Oct 9 2008, 09:55 PM
Post
#3
|
Group: Members Posts: 5 Joined: 9-October 08 Member No.: 6,858 |
Appreciate the reply; Yeah, I'm boggled currently myself, been trying to figure that out.
|
Darin McGrew |
Oct 9 2008, 09:58 PM
Post
#4
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
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 |
Oct 9 2008, 10:01 PM
Post
#5
|
Group: Members Posts: 5 Joined: 9-October 08 Member No.: 6,858 |
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 |
Oct 9 2008, 10:02 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Oct 9 2008, 10:06 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Now it works in FF. What did you do?
|
deftrance |
Oct 9 2008, 10:25 PM
Post
#8
|
Group: Members Posts: 5 Joined: 9-October 08 Member No.: 6,858 |
I added a z-index property to the menu and to the main-image tags in the css source
|
Lo-Fi Version | Time is now: 17th April 2024 - 10:49 PM |