1 reply [Last post]
BabbleOn
BabbleOn's picture
Offline
newbie
Last seen: 14 years 23 weeks ago
Timezone: GMT-7
Joined: 2008-04-21
Posts: 1
Points: 0

I'm new to CSS and I've been previewing the following site in Safari (ver 3.1)
[url] http://www.lightstormphotography.net/temp2/index.html [/url]
Can someone help me, I'm having the following problems with browser compatibility:
Why does the drop-down menu work on Firefox (mozilla 5.Innocent but NOT on IE (7.Innocent?
[url] http://www.lightstormphotography.net/temp2/Gallery/MR-Gallery1/index.html [/url]
Why doesn't ANY of the main content appear on Firefox like it does on IE?
These pages only work in Safari, what is causing the malfunction between IE and Firefox?
What do I need to change/add/delete within the CSS to look the same on Firefox, IE, AND Safari?

Thank you, in advance, for your help.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 48 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Your CSS is really, really

Your CSS is really, really hard to read. Try this style, at least for showing to other people:

#element {
stuff;
stuff;
more stuff;
}

I'll only tackle one question... you said menu, you mean the imag hovers? Not working in IE7.... I'll betcha also not working in IE6 either. If not, but something showing in FF, Saffy and Opera then it's likely IE needing that extra push when you're changing display values (don't ask me why... it's not Haslayout, just some strange IE thing).

To solve that (usually), you'd have (in a seperate declaration) some other property at :hover.

like,

#gallery ul li a:hover span {
display:block;
color:#424242;
font: normal 11px verdana, arial, sans-serif;
text-align: center;
vertical-align: middle;
margin:5px auto 0;
}
(that's your first declaration you already have... then do this):

#gallery ul li a:hover {
visibility: visible;
}

It doesn't actually do anything by itself, and it could have been font-weight: bold or some other change, but visibility:visible seems to affect IE without making any actual changes we can see, so it's popular to use. It cannot sit in your normal, original declaration as far as I know, it has to be seperate.

Anyway, this is what works when I'm doing fake css image maps, and I've run across the problem on other people's image maps, so I'm guessing this is your problem as well.

Cheers,
-pOes

I'm no expert, but I fake one on teh Internets