The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> html error: embedding a google map
jokerrules
post Sep 19 2017, 03:02 AM
Post #1


Newbie
*

Group: Members
Posts: 18
Joined: 30-August 17
Member No.: 26,486



Greetings, web designers!

I'm getting an html error when I copy and paste the html code for a Google Map embed. Here is what it says:

"The 'frameborder' attribute on the 'iframe' element is obsolete. Use CSS instead."

And here's the code (copied directly from Google Maps):

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12608.912218734722!2d-122.42538575928587!3d37.80812692913063!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808580fa79aee3b9%3A0xd0ce5b8bf914906a!2sFisherman's+Wharf%2C+San+Francisco%2C+CA%2C+USA!5e0!3m2!1sen!2sde!4v1505807894509" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Where am I going wrong? (Sorry if this is silly question... I'm new to this world.)

Thanks in advance for your help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 19 2017, 05:24 AM
Post #2


.
********

Group: WDG Moderators
Posts: 7,728
Joined: 10-August 06
Member No.: 7



I assume you mean a validator error?

QUOTE
"The 'frameborder' attribute on the 'iframe' element is obsolete. "

This is the FRAMEBORDER attribute in your IFRAME code example (with its value set to zero):

CODE
frameborder="0"

They simply want you to remove that, because CSS is considered a better way to style iframe borders (it doesn't hurt anything by keeping it, though).

QUOTE
Use CSS instead

The code example already has that here:

CODE
style="border:0"

(though it's more practical to use stylesheets instead of inline styles in STYLE attributes).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jokerrules
post Sep 20 2017, 02:09 AM
Post #3


Newbie
*

Group: Members
Posts: 18
Joined: 30-August 17
Member No.: 26,486



QUOTE(Christian J @ Sep 19 2017, 05:24 AM) *

I assume you mean a validator error?

QUOTE
"The 'frameborder' attribute on the 'iframe' element is obsolete. "

This is the FRAMEBORDER attribute in your IFRAME code example (with its value set to zero):

CODE
frameborder="0"

They simply want you to remove that, because CSS is considered a better way to style iframe borders (it doesn't hurt anything by keeping it, though).

QUOTE
Use CSS instead

The code example already has that here:

CODE
style="border:0"

(though it's more practical to use stylesheets instead of inline styles in STYLE attributes).


Ah, so it's sort of giving redundant instructions then. I wonder why Google Maps does this? Is it to accommodate both systems, html and CSS?

Thanks for your help! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jokerrules
post Sep 20 2017, 09:00 AM
Post #4


Newbie
*

Group: Members
Posts: 18
Joined: 30-August 17
Member No.: 26,486



Hmmm... seems I am hitting more walls here. Trying to embed an image... what am I doing wrong here?

<img src=" https://goo.gl/images/1rM6uV" style="width:128px;height:128px;">

This post has been edited by jokerrules: Sep 20 2017, 09:00 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 20 2017, 10:04 AM
Post #5


.
********

Group: WDG Moderators
Posts: 7,728
Joined: 10-August 06
Member No.: 7



QUOTE(jokerrules @ Sep 20 2017, 09:09 AM) *

Ah, so it's sort of giving redundant instructions then. I wonder why Google Maps does this? Is it to accommodate both systems, html and CSS?

Yes, in the beginning HTML attributes where used for styling, but once CSS became common such presenational HTML attributes have been outdated. Maybe Google includes them as a fallback for ancient browsers, but that doesn't make sense since such browsers wouldn't support much else on the web either.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 20 2017, 10:12 AM
Post #6


.
********

Group: WDG Moderators
Posts: 7,728
Joined: 10-August 06
Member No.: 7



QUOTE(jokerrules @ Sep 20 2017, 04:00 PM) *

Hmmm... seems I am hitting more walls here. Trying to embed an image... what am I doing wrong here?

Seems the URL redirects to an HTML page. Not sure why, maybe it's some kind of anti-hotlinking functionality.

The HTML looks correct, though you might add an ALT attribute and remove the space before the URL, but I don't think that should matter:

CODE
<img src="https://goo.gl/images/1rM6uV" style="width:128px;height:128px;" alt="">



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Sep 21 2017, 12:26 AM
Post #7


WDG Member
********

Group: Root Admin
Posts: 8,257
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



I think the link to the image is
https://i.pinimg.com/564x/b6/9c/ea/b69cea60...90ede60797c.jpg
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th November 2017 - 03:18 AM