SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    webkit compatability w/z-index

    http://whatisdamon.com/graphics.php#

    first time ever something has worked in IE and firefox, but NOT other browsers lol.. but I'm having issues with chrome and safari on this page. the top left 'to top' arrow that comes visible you scroll down is the issue. on firefox and IE, as I intended, the whole arrow is a "#" link to top of page and the '/index.php' link scrolls away with its div. in webkit browsers however you will see that the index.php/#logo a link stays behind for some reason. Anyone have any idea how webkit browsers differ that's causing this anomaly? and how I might fix it? thx a bunch!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, it's invalid to wrap a <div> around the anchor, change teh HTML to this
    Code:
    <div id="logosneaky"><a href="#"></a></div>
    Then make the anchor expand to the div
    Code:
    #logosneaky a{display:block;height:100&#37;;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hrm.. thanks! it doesn't seem to make any difference in chrome or safari, though :/
    the logo anchor is still refusing to move off the page when i scroll down.. maybe something to do with inheriting the fixed position of the logo and that affecting the absoluteness of the logo anchor??
    and when i make the code correct unfortunately it makes a link selection border stay on the logosneaky after going to the top.. i guess that's just how things are supposed to be? but it looks much worse :/

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Try changing the code to

    Code:
    <div id="logosneaky">
        <a href="#border"></a>
    </div>

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It followed the link once I changed the code to be valid . Fixed elements and absolute elements are simliar, however neither know that neither are there. They are like ninjas. They are secret :ninja:

    If Ralphs doesn't work I'll take another look
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok.. ralph's suggestion worked to get the annoying highlighted link off of the logosneaky link after it's been clicked, so that is excellent!
    Still having that main though problem in Chrome and Safari... the /index.php link remains on top of the #border (previously #) link even after you scroll down.. whereas in firefox when you scroll down, it moves the /index.php link away along with the logo div.

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright went back to work on it and realized somewhere I changed the logo to fixed, while the logo a was absolute.. switched logo to absolute and that seems to have resolved it in all the browsers. always something relatively simple innit!


Bookmarks

Posting Permissions

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