1

I'm having some trouble with the CSS in my site, both with image sprites and IE compatibility.

Here is a jsfiddle: http://jsfiddle.net/lipestyle/EjQTP/7/

The two main problems are:

  1. In IE, the contact links at the bottom are not appearing in the blue bar, but way down and to the right of the rest of the site.
  2. The image sprites for MMA Cage Door and FightNight Nutrition are not working. It appears that the hover image is on constant display, as the non-hovered image is supposed to be much lighter than what we are looking at.

On a side note - For some reason the background image repeating isn't working in the jsfiddle, but I haven't noticed a problem with it outside of that.

Any advice that you all can offer would be greatly appreciated.

Thank you.

EDIT

One other thing I am noticing with the sprites. It appears when I hover over an image the first image doesn't disappear, it still remains while the hover image appears on top of it. Is that how it is supposed to work? Because my images are semi-transparent, this is something I would like to avoid if possible.

Here is a link to the site in action: http://bit.ly/h1OXQA

Chris
  • 23
  • 6
  • By "cross browser compatibility issues" do you really mean "it doesn't work in IE"? That's almost always the case. – Rob Apr 08 '11 at 00:33
  • haha Rob, well the strange thing is the image sprites actually work in IE but not in any other browser :-/ – Chris Apr 08 '11 at 04:37

1 Answers1

1

  1. Could be a width, margin-left, or even position relative/absolute giving problems here. I have not checked in depth through all css code to see the cause. A fast/dirty fix, obviously loading alternative css or html for IE7, is that setting (in IE7) the UL #social with top:190px and left:100px , it seems to fit ok (or fine tune to the preferred position) .I'd go from here to guess what is causing to act differently.

  2. Seems you already fixed, images seen light when not hovered, darker when hovered. All in IE7.

S.gfx
  • 249
  • 1
  • 7
  • Thank you for your help! I have created a separate CSS and that seems to have fixed that problem. – Chris Apr 11 '11 at 19:00
  • I should add that the sprites DO seem to work in IE7 and Firefox 3, but in Chrome and Firefox 4 that don't :( – Chris Apr 11 '11 at 19:00
  • then... Is a new problem, I suppose, as I guess the fix you might have added, only is triggered for IE7... Those two support css 3, and some other stuff. You might try something there.. Anyway, as the fix only should be affecting IE7, I guess these probs were there initially there... – S.gfx Apr 13 '11 at 07:26
  • hey, http://bit.ly/h1OXQA gave me a 404.I don't understand your question in the Edit new paragraph...But, I suppose you know, just to tell you that IE7 does not support transparent PNGs. – S.gfx Apr 13 '11 at 07:29
  • Yeah I ended up moving it here: http://bit.ly/eETPjL. The problem isn't entirely fixed, because I know that the image sprites aren't functioning perfectly, but in the end it works and it's just me being nitpicky. – Chris Apr 15 '11 at 18:35
  • Thank you again for your help btw. And that is good to know about IE7 not supporting transparent PNGs. Does it support transparent gif? – Chris Apr 15 '11 at 18:36