www.webdeveloper.com
Results 1 to 4 of 4

Thread: Safari 4 CSS Problem

  1. #1
    Join Date
    Jan 2009
    Posts
    11

    Safari 4 CSS Problem

    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; }

  2. #2
    Join Date
    Jul 2009
    Posts
    184
    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/

  3. #3
    Join Date
    Jan 2009
    Posts
    11

    Thanks

    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.

  4. #4
    Join Date
    Jul 2009
    Posts
    184
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles