Safari 4 CSS Problem

[rgraves2]

I have the following code I'm using to display rollovers using purely HTML and CSS. When you hover over the text, it changes the left and right images.

Works great in all the browsers I tested, except Safari 4. From what I gathered, Safari 4 supports div:hover and general siblings (~). I know it's a little older, but can anyone tell me why this won't work in Safari 4? If I can fix it, I'd like to.

<div id="rollover-wrapper">
  <div class="rollover-text" id="rollover-top1">Availability</div>
  <div class="rollover-text" id="rollover-middle1">Audience</div>
  <div class="rollover-text" id="rollover-bottom1">Aesthetics</div>

  <div class="rollover-left" id="rollover-left1"></div>
  <div class="rollover-right" id="rollover-right1"></div>
</div>


.rollover-text {position: relative; left: 200px; width: 200px; }

.rollover-left, .rollover-right { width: 193px; height: 277px; float: left; }
.rollover-left { position: relative; top: -190px; }
.rollover-right { position: relative; top: -190px; left: 210px; }

#rollover-left1 { background: url(imageurl) no-repeat; }
#rollover-right1 { background: url(imageurl) no-repeat; }

#rollover-top1:hover ~ #rollover-left1 { background: url(imageurl) no-repeat; }
#rollover-top1:hover ~ #rollover-right1 { background: url(imageurl) no-repeat; }

#rollover-middle1:hover ~ #rollover-left1 { background: url(imageurl) no-repeat; }
#rollover-middle1:hover ~ #rollover-right1 { background: url(imageurl) no-repeat; }

#rollover-bottom1:hover ~ #rollover-left1 { background: url(imageurl) no-repeat; }
#rollover-bottom1:hover ~ #rollover-right1 { background: url(imageurl) no-repeat; }

[WestWeb]

There was a bug in older versions of webkit that prevented the use of adjacent (+) or general (~) sibling selectors WHEN COMBINED with pseudo classes.

There's a fix that might work for you at the bottom of this article:
http://css-tricks.com/webkit-sibling-bug/

[rgraves2]

Thanks for the reply. I searched to see if Safari 4 supported div:hover and siblings and saw that it did so I couldn't figure out what the problem was. I didn't think it could be a bug when using both together.

The fix on that page didn't work for me, but at least I know it's a known bug and can investigate further. The code seems to work in Safari 5 and 6, so if it's just Safari 4, I can probably live with that as it's not a core piece of the site.

[WestWeb]

I wouldn't worry about it if I was you. Mac people usually keep their apps up to date(or their computer does for them), so there's probably about 5 people in the world still using Safari 4 I'd bet.