Validate XHTML Strict 1.0 for an iframe..and other stories

[strong]

Does anyone have any suggestions on how to rewrite this into valid XHTML 1.0 Strict?

<div>
         <iframe src="http://www.holidaylettings.co.uk/avail_white.asp?home_id=97484" width="650" height="600" scrolling="no" frame-border="0" margin-height="0" margin-width="0"></iframe>
</div>

The validator is telling me:

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the “Strict” document type with a document that uses frames (e.g. you must use the “Transitional” document type to get the “target” attribute), or by using vendor proprietary extensions such as “marginheight” (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

I’ve been over the code a hundred times and it seems correct. I also tried replacing the “<” and “>” with “<” and “>”, respectively, but it doesn’t remove the error.

Which leads me to ask another question: I’m using XHTML Strict 1.0 and I’m having a problem validating a page because the doctype does not support a certain piece of code. Can I change the doctype for that particular html file, to say Transitional 1.0 so as to get the page to validate, or do all the pages on my website have to be XHTML Strict 1.0 throughout? I would rather keep all pages in one doctype.

Also, I’m a bit lost as to the CSS that can be used to resolve the problem. What could I use?

The validator is also indicating 3 different errors for the same piece of code:

Line 12: Unescaped ‘<’ not allowed in attributes values
<meta name=“description” content="Come and…

and…

Line 12: attributes construct error
<meta name=“description” content="Come and…

and…

Line 12: Couldn’t find end of Start Tag meta line 10
<meta name=“description” content="Come and…

On another note, one strange thing that happened while correcting some of the more critical errors was that I was getting a similar error message for my meta description tag. I read on the forum about a vaguely similar problem another person was having and the advice was to cut down the meta description tag to 160 characters or less?, and so decided to cut down my meta description content to about 1/2. This miraculously solved the problem without even touching any of the tags, html code, etc. …only changed the content, even though the error message was indicating a problem with the “<” and “>”. Perplexing.

Any ideas?

[system]

@felgall

Since youi don’t have to use any Ajax (as my examples show) it does provide the exact same functionality.

Actually, his example IS a case where iFrame does something object does not… which is where Stevie’s getting the idea you need ajax.

Notice he’s using the target attribute, target won’t point at an object in any browser… So yes, great example of something object doesn’t do…

Too bad it’s using an iframe and target, two things that are miserable accessibility /FAIL/ and shouldn’t ever be done on a website in the first damned place… Welcome to WHY both are deprecated in strict.

@felgall

Also target was removed from HTML back in 1999 as you are supposed to use JavaScript to perform that functionality.

Uhm, no, you’re not supposed to have that functionality in the first damned place as it’s absolute CRAP for accessibility. Frames bad, so target bad. Replicating frame functionality with javascript is basically ignoring WHY it was removed!

[system]

@felgall

It provides exactly the same function with a lot more flexibility (apart from Internet Explorer not implementing it properly so that a separate object tag is needed for IE6 and you can’t turn off the border around it in IE7 or 8).

Also you don’t need the classID to fix it if quicktime is installed… The quicktime plugin for windows fixes a lot of the ‘problems’ with IE6 both for displaying images in OBJECT, but also using it like it was an iFrame.

[Stevie_D]

@felgall

The standard tag intended to perform that function is the <object> tag.

But it doesn’t perform the same function!

[felgall]

@deathshadow60

Replicating frame functionality with javascript is basically ignoring WHY it was removed!

Only wher you set it up to only work when JavaScript is enabled. If the page is designed to function without JavaScript then using JavaScript to add that alternative way to do it will not impact on accessibility in the way that using target would.

Of course you need to have the page functional without either target or JavaScript in the first place and then can add the JavaScript to enhance the page.

[felgall]

@Stevie_D

But it doesn’t perform the same function!

It provides exactly the same function with a lot more flexibility (apart from Internet Explorer not implementing it properly so that a separate object tag is needed for IE6 and you can’t turn off the border around it in IE7 or 8).

See http://www.felgall.com/noiframe.htm where I have two examples of how to get around the IE6 problem with live examples at the bottom of the page where separate content is included twice using <object> instead of <iframe> (one using each of the two alternative ways of coding it shown in the page).

[felgall]

@gary_turner

How odd. That’s the first time I noticed that that while iframe requires a loose DTD, it is not (officially) deprecated.

That’s because it was never officially a part of the standard and therefore doesn’t need to be removed from the standard in order for it to not be there. Since it never was part of the standard it can’t be deprecated as a prelude to removing it from the standard.

The standard tag intended to perform that function is the <object> tag.

[system]

@Stevie_D

But it doesn’t perform the same function!

How so?

<object
    type="text/html" 
    data="page.htm" 
    width="500" height="600"
> 
  <p>fallback content if it's 404 or document type or tag is unsupported by the user agent here</p> 
</object>

Ok, not the same function, it actually does MORE since it has the option for fallback content or a billion other document types. That’s kind of the idea behind all those other tags being told to go shtup themselves in favor of object - if it’s a separate document you want to show inside the element, REGARDLESS of data type.

It’s actually why it shouldn’t be difficult, since the contents of object should be handled as if you were just calling another window/tab, just with the render box of the object tag being the surface it’s drawn to. If you make the browser itself able to play any format you can put into a URL, then ALL object has to do is behave like an iFrame with the option to catch if the render fails.

[strong]

Fellas, thanks for your comments on the iframe. Haven’t had time as yet to apply the code, but when I do, I’ll let you know how I fare with it. deathshadow60, thanks for your advice too, was rather helpful although some of the stuff you came out with went over my head, man. the flip side to that however is that other people who are slightly more advanced than me can learn from your knowledge, I understand that. I don’t mean to offend, just opining on my own personal experience. Thanks all the same for all your input. Oh yes, and thank you for your flattering comments on the quality of my markup! BTW, I wrote all the code word for word, i.e. I was resolute in not copying from the code archive so as to get a better understanding and feeling for it. Will let you know how I get on with the iframe. Oh, and just one more thing. In BYOWTRW it says you shouldn’t abuse the use of the <br> element. So which element could I use as a substitute in XHTML?

[Stevie_D]

@felgall

The HTML 4 equivalent of <iframe> is <object> so if you are concverting your pages to use HTML 4 then all the iframes need to be replaced with objects. IE6 requires a slightly different format for the object tag to work for including HTML to what more modern browsers require.

See http://www.felgall.com/noiframe.htm for a couple of alternative ways to code the object tag so it works as a replacement for iframe in both IE6 and more modern browsers.

Another thing I’ve thought of - with <iframe>, you can load new pages into the iframe by way of links in the parent page. Unless I’m mistaken, you can’t do that with <object>, which means that in some cases (such as all the ones where I’ve used iframe), it is not possible to replace it with object.

In fact, to quote your bible:

@""http://www.w3.org/TR/REC-html40/struct/objects.html""

Sometimes, rather than linking to a document, an author may want to embed it directly into a primary HTML document. Authors may use either the IFRAME element or the OBJECT element for this purpose, but the elements differ in some ways. Not only do the two elements have different content models, the IFRAME element may be a target frame (…) and may be “selected” by a user agent as the focus for printing, viewing HTML source, etc.

Incidentally, there is nothing on the W3 page about frames and iframes to say that they are deprecated and should not be used. And in fact, on http://www.w3.org/TR/REC-html40/index/elements.html it does not mark them as deprecated, meaning they are not deprecated. They just can’t be used with a Strict doctype.

[felgall]

@Stevie_D

If you have to use Ajax to achieve the same effect then it does not provide exactly the same functionality.

Since youi don’t have to use any Ajax (as my examples show) it does provide the exact same functionality.

Where did you get the idea it needed Ajax as there is no sign of any Ajax anywhere in any of the examples you have been shown.

The only issue with using <object> is that you need a second one for IE6. Once IE6 is dead the single object tag required will be much simpler than an iframe with far more flexibility.

Also target was removed from HTML back in 1999 as you are supposed to use JavaScript to perform that functionality.

[gary_turner]

@felgall

[…]

Aah!

cheers,

gary

[Stevie_D]

@deathshadow60

Off Topic:

Is that a reference to how I tend to dump on everything from so high up you’d think God herself just had a double bean discreeto burrito?

That’s one way of putting it!

[felgall]

With IE6 now approaching the point where it will be able to be ignored we are fast approaching the point where it will be possible to replace a <iframe> tag with a single <object> tag and have the page validate properly as HTML 4.

Much tidier than needing to use two object tags and IE conditional comments or using a tag that never was part of any standard.

[strong]

Thanks everyone for your help. Will investigate those suggestions, follow up those links to articles, etc and try them out and let you know how I get on. Thanks again.

[Stevie_D]

@deathshadow60

Still, not bad… for a human… — better than most of the garbage I’m used to seeing from ‘experts’ in the field.

Wow, high praise indeed (:

[system]

[ot]

@Stevie_D

Wow, high praise indeed (:

Is that a reference to how I tend to dump on everything from so high up you’d think God herself just had a double bean discreeto burrito? ;)[/ot]

[Stevie_D]

@felgall

iframe was deprecated in HTML 4 meaning that as from when HTML 4 was released for use in 1999 the ifram tag was no longer supposed to be used. … That iframe is listed as deprecated in HTML 4 specifically means that it is NOT a part of that standard. Deprecated is a term that means that the tag is something that you should specifically avoid using as it is considered to be the wrong way of doing it according to the standard.

“Deprecated” means that you are allowed to use it with a Transitional doctype as part of a transitional period. You can get an HTML 4.01 Transitional document containing iframes to validate with the W3’s own validator, which tells me that it is valid to use iframes. Since IE6 is still infesting people’s computers, we are (in terms of the object element) still in that transitional period, which means that it’s OK to use iframes. It isn’t the ideal solution, but the ideal solution is one that needs a lot of hackery and kludging to make it work in all browsers … so it isn’t an ideal solution.

[strong]

It’s disappointingly simple - you’ve forgotten the closing " on the meta keywords tag, so it is taking the first " on the description line as the end of the keywords tag, and then getting confused because it’s got a load of gobbledegook it doesn’t know what to do with. (If you look at the code sample you’ve posted, you can see the final meta is in a different shade of blue to the others).

Sorry…that was my mistake. I’m aware of the missing ". Silly me. Sorry for crying wolf.

However, here is a problem I’m having across all pages of the site and with no apparent explanation:

Line 49, Column 7: end tag for “div” omitted, but OMITTAG NO was specified
</body>
You may have neglected to close an element, or perhaps you meant to “self-close” an element, that is, ending it with “/>” instead of “>”.

Line 31, Column 7: start tag was here
<div id=“bodycontent”>

Line 49, Column 7: Opening and ending tag mismatch: div line 31 and body
</body>

Line 50, Column 7: Opening and ending tag mismatch: body line 12 and html
</html>

Line 50, Column 7: Premature end of data in tag html line 3
</html>

My opening and closing body and html tags are all fine by the looks of it. Here’s the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <title>Frigiliana Holiday Rentals - holiday villa for rent in Frigiliana with private swimming pool and sea views.</title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <link href="style1.css" rel="stylesheet" type="text/css" />
   <meta name="title" content="Frigiliana Holiday Rentals - holiday villa for rent in Frigiliana with private swimming pool and sea views." />
   <meta name="keywords" content="Frigiliana holiday rentals,holiday villa for rent in Frigiliana,holiday villa in Frigiliana,country villa with pool,Costa del Sol,Malaga,families with children,private swimming pool, sea views" />
   <meta name="description" content="Frigiliana Holiday Rentals offers a holiday villa for rent in Frigiliana with private swimming pool, views of the sea and private parking." />
   </head>
   <body>
   <div id="header">
      <div id="sitebranding">
         <h1>Holiday Villa for Rent in Frigiliana</h1>
      </div>
      <div id="tagline">
         <p>Fabulous Holiday Villa for Rent - private swimming pool, sea views and within walking distance of Frigiliana.</p>
       </div>
      </div> <!-- end of header div -->
      <div id="navigation">
         <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About The Villa</a></li>
            <li><a href="gallery.html">Photo Gallery</a></li>
            <li><a href="availability.html">Availability and Prices</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="http://www.frigilianaholidayrentals.blogspot.com">Blog</a></li>
         </ul>
      </div> <!-- end of navigation div -->
      <div id="bodycontent">
         <h2>Welcome to our holiday villa in Frigiliana!</h2>
         <p><img src="gallery/gate_house_garden.jpg" class="feature" width="200" height="162" alt="The villa set on a hillside of wild rosemary, thyme and lavender." /></p>
         <a href="gallery.html">Just have a look at some of the pictures</a>!</p>
         <a href="about.html">Find out a little more about our holiday villa</a>.</p>
         <p><img src="gallery/terrace_house.jpg" class="feature" width="200" height="162" alt="View of the house and front terrace from the pool terrace." />.</p>
         <p><a href="availability.html">Have a look at our prices and availability</a>. Our prices are extremely competitive. And that ain't no lie or simple small talk!</p>   
         <p>Feel free to <a href="contact.html">contact us</a>.</p>
<br/>
<br/>
         <div class="footer">
           <span class="footer"><a href="index.html">Home</a> | <a href="about.html">About The Villa</a> | <a href="gallery.html">Photo Gallery</a> | <a href="availability.html">Availability and Prices</a> | <a href="contact.html">Contact</a></span></div>
<br/>
</body>
</html>

[felgall]

The HTML 4 equivalent of <iframe> is <object> so if you are concverting your pages to use HTML 4 then all the iframes need to be replaced with objects. IE6 requires a slightly different format for the object tag to work for including HTML to what more modern browsers require.

See http://www.felgall.com/noiframe.htm for a couple of alternative ways to code the object tag so it works as a replacement for iframe in both IE6 and more modern browsers.