Forum Moderators: open
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>").
<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.
Any other ideas I could try? I'm stumped on this.
Thanks
<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.