CODEWITHSUNDEEP
cssgoogle-mapsz-index
Clawg
Clawg

Reputation: 349

Google Map causes unrelated part of page to dissapear in Safari

I am writting a google map using V3 of the API, into my page which results in a completley unrelated part of the page disappearing only in safai.

If you look at this page http://local.stv.tv/bellshill/ the blue navigation bar is fine, yet when you go to any page with a google map on it, part of the navigation dissapears e.g. http://local.stv.tv/bellshill/news/.

There is a dropdown in there and some layering going on which I think may be confusing Safari, but it works fine everywere else. This must be a recent issue as the site was X browser tested fully before launch.

Upvotes: 2

Views: 408

Answers (3)

Terminalpunk
Terminalpunk

Reputation: 125

Add the z-index declaration to your parent containing the Google map to exorcise the gremlins from your machine.

.js-on #google-map {
  z-index:1;
}

Upvotes: 0

user787263
user787263

Reputation: 11

Encountered the same problem with Safari 5 on iPhone and & iPad - my contact page has location map using Google Map API

after reading post i placed my replaced the H1 tag with a span tag and it fixed the problem. maybe because the H1 is a block level element and span is an inline.

as i wanted to keep the h1 tag my final solution was to place the H1 tag inside a div tag and this seemed to work.

Upvotes: 1

Clawg
Clawg

Reputation: 349

I have managed to fix this issue.

The primary nav <div> has a <p> element as its first item that contined a hidden skip link. When I moved the <p> outside of the <div> everything worked fine.

To be honsest I have no idea what the real root of this problem is or why it was only Safari V5 that was effected.

Upvotes: 1

Related Questions