iWeb iframe Google Maps in Safari

Question

Level 6

17,265 points

iWeb iframe Google Maps in Safari

I have created a number of different types of Google maps and loaded them in iWeb using iframes.

On most of them, I added a border radius which seems to work for all of them except one. It works fine in Firefox and Chrome but not in Safari 6.

I can see the frame with corner radius briefly on page load and then it loads with square corners.

These examples work OK...

Static map & Street View - http://www.iwebformusicians.com/iweb-snippets/map-tutorial.html

Drag and drop marker and street view/map combo - http://www.iwebformusicians.com/iweb-snippets/map.html

The problem one is the Google Maps Slider at the top of this page - http://www.iwebformusicians.com/iweb-snippets/map-2.html

Has anyone had this problem or know of a good reason why this happens - and only in Safari?

Does anyone have Safari 5 to see if the problem occurs with it as well?

Posted on Aug 10, 2012 6:13 PM

Reply

Answer 1

Roddy Author

Level 6

17,265 points

Aug 10, 2012 6:38 PM in response to Roddy

Its been another 100º + day here and I'm not thinking very straight! Here's the sceenshots...

Chrome...

Firefox...

Safari - Zombie Version...

Reply

Answer 2

Old Toad

Level 10

215,760 points

Aug 10, 2012 8:31 PM in response to Roddy

With Safari 6 and Mt Lion the Slider map at the top looks fine to me. What problems are you having and with what browser?

Upgraded to Mt Lion today and it went extremely smooth and is working very nicely. Haven't found any apps that won't work as well as they did with Lion.

OT

Reply

Answer 3

Roddy Author

Level 6

17,265 points

Aug 10, 2012 8:46 PM in response to Old Toad

If you expand the images in my last post you'll see that the dark grey background has rounded corners in Firefox and Chrome but they appear square in Safari. They are rounded in iWeb too.

Reply

Answer 4

Wyodor

Level 6

19,930 points

Aug 11, 2012 12:14 AM in response to Roddy

Logic tells me : No border, no color, no radius :

style = "width:970px; height:500px; border:0px; border-radius: 10px"

Try this :

style = "width:982px; height:512px; border:3px solid #666; border-radius: 10px;"

And have a look here how to use embedded fonts :

http://www.wyodor.net/Tutorials/Google/

Reply

Answer 5

Roddy Author

Level 6

17,265 points

Aug 11, 2012 10:11 AM in response to Wyodor

In CSS the border radius applies to the whole background - even if no border is specified.

It appears that, in this case, Safari 6 is positioning the frame behind the content for some reason -possibly because the content is using layers.

My work around was to style the content background...

#page-wrap { width: 960px; height:500px; margin: 0; background: #444; border-radius: 10px }

... and use an iframe with no border radius...

style="width: 960px; height: 500px; border: 0"

Reply

Answer 6

Roddy Author

Level 6

17,265 points

Aug 11, 2012 2:51 PM in response to Wyodor

And have a look here how to use embedded fonts :

http://www.wyodor.net/Tutorials/Google/

I suppose that's one way of doing it but I would still rather not use JavaScript for any essential items on a website - especially not fonts - since we still have to deal with visitors who have it turned off.

I would be more likely to use these fonts for items like a navigation menu and its kind of stupid to use javascript for something that is so essential to the operation of your website.

I suppose your method would be OK for non essential special effects like the Flip Card shown here...

http://www.iwebformusicians.com/iweb-snippets/font.html

... but, you have to create styles anyway, so why not do it all with CSS?

Reply