6 replies [Last post]
Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 16 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

So I am doing a web site for the co-op I live in with Wordpress 3 using the "Weaver" theme and I wanted a map to our location. Google maps allows me to do this by just inserting some html into a page, but alas it uses an Iframe, like this:

<iframe width="525" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ca/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=1501+Glentana+Road,+View+Royal,+British+Columbia&amp;aq=0&amp;sll=49.891235,-97.15369&amp;sspn=39.794637,111.796875&amp;ie=UTF8&amp;hq=&amp;hnear=1501+Glentana+Rd,+View+Royal,+Capital+Regional+District,+British+Columbia+V9A+7A1&amp;z=14&amp;ll=48.45111,-123.428911&amp;output=embed"></iframe><br /><small><a href="http://maps.google.ca/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=1501+Glentana+Road,+View+Royal,+British+Columbia&amp;aq=0&amp;sll=49.891235,-97.15369&amp;sspn=39.794637,111.796875&amp;ie=UTF8&amp;hq=&amp;hnear=1501+Glentana+Rd,+View+Royal,+Capital+Regional+District,+British+Columbia+V9A+7A1&amp;z=14&amp;ll=48.45111,-123.428911" style="color:#0000FF;text-align:left">View Larger Map</a></small>

Anyone know what the right structure for HTML 5 is and a way to convert it so it validates? Funnily enough IE9 complains and doesn't work right. It
s a good thing I suppose but a bit rich from the folks who invented the dang IFAME think in the first place!

Any help getting it done right would be greatly appreciated. Every other page I've created on that site validatates OK under the HTML 5 doctype except that one and I'd like to make it do so!

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

Can you change it to

Can you change it to <object>?

I consider this a Triumph.

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 4 min 4 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9209
Points: 3215

The object element will work,

The object element will work, but you'll have to put up with IE's generally crappy rendering, e.g. html imports get scroll bar{s}, desired or not.

On my site's pages, it is undesirable for my Amazon links, so I switched back to the iframe, and use the transitional DTD—not an option with html5. The scroll bars may not be all that ugly with a larger object, so give it a whirl. Mileages vary.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 year 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Use the iframe, forget the

Use the iframe, forget the validation. Validation is a tool, not the be-all and end-all. As long as you know why it's invalid and have tested to make sure it works in all your target browsers, there's no issue.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 year 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

But on the subject of iframes

But on the subject of iframes and HTML5, Russ Weakley wrote something about them recently: http://www.maxdesign.com.au/2011/03/10/iframe-scrollbars-and-html5/

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 16 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

Tyssen wrote: Use the iframe,

Tyssen wrote:

Use the iframe, forget the validation. Validation is a tool, not the be-all and end-all. As long as you know why it's invalid and have tested to make sure it works in all your target browsers, there's no issue.

I agree with you, actually, and that was my original plan, but IE9 is now out and it refuses to show content in an IFRAME!!! And it's going to capture a good share of the market by installing it in every computer that has Windows 7 or Vista in it.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 16 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

gary.turner wrote: T On my

gary.turner wrote:

T
On my site's pages, it is undesirable for my Amazon links, so I switched back to the iframe, and use the transitional DTD—not an option with html5. The scroll bars may not be all that ugly with a larger object, so give it a whirl. Mileages vary.

I've considered using an "object" but I thought it wasn't available in HTML 5.
I'm actually using 5 only because WP3 is designed to use it and the Weaver them uses the version 5 doctype and actually validates under it. The Weaver theme makes WP3 useable in a production environment IMHO and I bless the day I stumbled upon it. Other than the fact that it uses px sizing for fonts, but with modern browsers using zoom functionality I can live with that fairly easily.

Learning to use OBJECT sounds like work. Dunno if I'm up to that, but I'll take a look when I get a chance, and thanks for the advice.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.