Firefox messing up WordPress format

[HelenW14]

I have a new WordPress blog. Today I put up two YouTube videos, and suddenly the formatting of the posts is all messed up. The text goes way wide across the page and the boxes for comments are way over to the side. It looks weird.

I tried opening the blog in Safari and it looks fine, so it seems to be a Firefox issue.

I'd appreciate any ideas on how to fix this. The blog is at http://www.communi-keys.com

Thanks!
Helen

[SK.]

This analysis indicates there are problems with the HTML. What are you using to generate the HTML?

[HelenW14]

The only html in the posts are the embed codes from YouTube. I just took it right from YouTube and pasted it in the "code" view when I was writing the post.

[SK.]

The analysis does not differentiate between the posts or any other HTML. The point is that there are problems on the page and that could be the cause of the display issue you are experiencing.

What are you using to create the page?

[the-edmeister]

Doesn't work correctly in IE 6.0 either, that page looks as messed up as it does in Firefox. This post really belongs in Web Development.


Ed

[SK.]

Moving to Web Development / Standards Evangelism.

[HelenW14]

I don't understand the question about what I am using to create the page. It's a WordPress blog. I've just been making posts using the "Write a post" form. The point is, everything was fine until I put in these two YouTube videos and then it all went south. Maybe I'll just remove the videos and see if it goes back to normal, but I'd really like to not only keep these videos but post more in the future, so if anybody can help me straighten this out I'd really appreciate it. Thanks!

[Kelson]

SKopischke, WordPress is a CMS. Most of the code on that page is probably part of the theme she's using.

Helen, I think the problem has to do with WordPress' automatic paragraph formatting. The YouTube code you've pasted has line breaks in it, and WordPress is inserting paragraph breaks in the middle of the YouTube code. These are messing up the structure of the page. I guess Safari is just discarding them entirely, but Firefox is trying to process them as ending paragraphs, breaking out of the page structure. Worse, WP's tag balancing has moved the PARAM elements outside of the OBJECT element. (Firefox and Safari both use the EMBED for Flash, and ignore the OBJECT, but I'd bet that the page as-is won't show the video in IE, which uses the OBJECT.)

My suggestion: Go back to YouTube and copy their code again, replacing what you have in the posts right now. Before you save the post, delete any line breaks so that the OBJECT, PARAM and EMBED tags run into each other like this:

Code: Select all

<object blah><param yadayada></param><param yadayada2></param><embed src="whatever"></embed></object>

That should help. Even if it doesn't, it should cut down on the validation errors, making it easier to find the actual problem in there.

[gjb123]

The following code puts the first video on your page.

Code: Select all

<object height="355" width="425"></object></p>
<param name="movie" value="http://www.youtube.com/v/AxFs5zeRBn0&amp;rel=1"></param>
<param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/AxFs5zeRBn0&amp;rel=1" type="application/x-shockwave-flash" wmode="transparent" height="355" width="425"></embed>

It is wrong. The param and embed elements should be contained inside of the object element like this

Code: Select all

<object height="355" width="425">
<param name="movie" value="http://www.youtube.com/v/AxFs5zeRBn0&amp;rel=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/AxFs5zeRBn0&amp;rel=1" type="application/x-shockwave-flash" wmode="transparent" height="355" width="425"></embed>
</object></p>

[SK.]

Thanks, Kelson and gjb123.

[HelenW14]

Thank you all so much for your help. I did the downloads again and paid attention to those <object> tags. That seems to have been the problem because everything is fine now. The videos are on the blog and the rest of the formatting is back to normal. I appreciate your help!

Helen

[dsiembab]

I ran into the same problem and then i used this code and it worked in both firefox and IE7 and it validated in w3c.

Code: Select all

<object data="http://www.youtube.com/v/AxFs5zeRBn0&amp;rel=1" width="425" height="355" type="application/x-shockwave-flash">
<param name="movie" value="http://www.youtube.com/v/AxFs5zeRBn0&amp;rel=1"/></object>

this worked for me and validated with w3c Embed will never validate since it is not a tag that they endorse. I'm a neat freak when it comes to validation.