/    Sign up×
Community /Pin to ProfileBookmark

Safari 4 CSS Problem

Copy linkTweet thisAlerts:
Aug 24.2012

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.

[CODE]

<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; }
[/CODE]

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@WestWebAug 24.2012 — 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/
Copy linkTweet thisAlerts:
@rgraves2authorAug 28.2012 — 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.
Copy linkTweet thisAlerts:
@WestWebAug 28.2012 — 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.
×

Success!

Help @rgraves2 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...