Welcome to WebmasterWorld Guest from 54.204.92.234

Forum Moderators: ergophobe

Failing validation on SWFObject technique

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

5+ Year Member



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>").
11:17 am on Nov 22, 2007 (gmt 0)

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

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

5+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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.

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

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



too late, again...
1:54 pm on Nov 22, 2007 (gmt 0)

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month