| 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.
|
|
|
