homepage Welcome to WebmasterWorld Guest from 54.205.247.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

    
Failing validation on SWFObject technique
mr_nabo




msg:3511278
 10:04 am on Nov 22, 2007 (gmt 0)

Hi,

I keep failing the W3c validation test on one point for a transitional XHTML doctype. I'm using the SWFObject technique to embed a Flash animation into my page (see here [blog.deconcept.com] for the technique), but I don't know what to do about this error message below as I don't have a block element within an inline element.

Any ideas about what I can do to make it validate? It seems to work ok in FF and Safari Mac, haven't tried IE yet (dreading it when I do have to!)

Thanks

Here's my code:


<h1 id="header">
<img src="wp-content/themes/boogy/images/ys-logo.gif" width="180" class="logo" alt="boogy Logo" />
<div id="flashcontent" class="adobe">
<a href="http://localhost:8888/wordpress/">
<img src="wp-content/themes/boogy/images/boogy-logo.jpg" alt="Boogy logo" class="logo-hidden" />
</a><br />
It appears you don't have Flash (or the right version) installed. Please go to <a href="http://www.adobe.com/products/flashplayer" target="_blank">http://www.adobe.com/products/flashplayer</a> to get Flash player so you can see this amazing animation.
</div>
<script type="text/javascript">
var so = new SWFObject("wp-content/themes/boogy/media/header-pen.swf", "header", "760", "180", "6", "#fff");
so.write("flashcontent");
</script>
</h1>

Here's the W3c error message:

Line 28, Column 36: document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.
<div id="flashcontent" class="adobe">
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

 

encyclo




msg:3511301
 11:17 am on Nov 22, 2007 (gmt 0)

An image is an inline element, so it needs to be wrapped in a block element to validate, either a div or paragraph will do:

<h1 id="header">
[b]<p>[/b]<img src="wp-content/themes/boogy/images/ys-logo.gif" width="180" class="logo" alt="boogy Logo" />[b]</p>[/b]
<div id="flashcontent" class="adobe">

You may need to adjust the margins if you use a paragraph.

mr_nabo




msg:3511321
 11:54 am on Nov 22, 2007 (gmt 0)

That's very true! Thanks for pointing that out. But I'm still getting the same error message after using the code you suggested. Removing both the text, image and <a> tags still gives the same error message, so I'm assuming it is something to do with the flash being written in by Javascript...

Any other ideas I could try? I'm stumped on this.

Thanks

cmarshall




msg:3511363
 1:42 pm on Nov 22, 2007 (gmt 0)

I just vetted it against the XHTML 1.0 Transitional DTD [w3.org] using <oXygen/> [oxygenxml.com], and it tells me that you can't have a
<div> inside of an <h1>. I'd suggest replacing the <h1> with a styled <div>.

I chose XHTML 1.0 Transitional because it looks like you are using WordPress [wordpress.org], and that's the default validation for the included themes.

phranque




msg:3511370
 1:52 pm on Nov 22, 2007 (gmt 0)

too late, again...

encyclo




msg:3511371
 1:54 pm on Nov 22, 2007 (gmt 0)

cmarshall has it. :) Sorry, I misread the code and didn't see you were wrapping the content within a h1 element. You can't place a div within a h1.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / Accessibility and Usability
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved