Webkit compatability w/z-index

HTML & CSS
1

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

Hi, it’s invalid to wrap a <div> around the anchor, change teh HTML to this


<div id="logosneaky"><a href="#"></a></div>

Then make the anchor expand to the div :slight_smile:


#logosneaky a{display:block;height:100&#37;;}
3

hrm… thanks! it doesn’t seem to make any difference in chrome or safari, though :confused:
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 :confused:

4

Try changing the code to


<div id="logosneaky">
    <a href="[COLOR="Red"]#border[/COLOR]"></a>
</div>
5

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 :slight_smile:

6

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

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!