Losing <p> and </p> tags
 

Hi,
I am new to word press and working on a simple static page in Atahualpa.

I want to have an image, then, on a new line, a description.
Then on the next line, another image, and then on the fourth line, another description, etc.

I tried this using the visual box on my page editor and it looked perfect -- but then in preview everything piled up on top of each other.

I then inserted <p> and </p> before and after each image and line in the html editor, but it had no effect in the preview, and everything piled up on top of each other again.

What am I doing wrong? How do I get it to keep the paragraph returns and have the text under each image?

Thanks!

Did you insert the <p> </p> tags using the visual or HTML editor. If you did it in the visual editor, they won't do anyting but show up on the page. They are HTML code.

Thanks so much for answering! But I was putting the tags in the html box. . .

Somehow I have managed to get them to stay -- but they still don't really have an effect.

Upon further experiments this afternoon though, I noticed that when I made my browser window narrower, as the center box becomes a different width, they all pile up in different ways. Do you think if I make the page a fixed width (it is percentage now) it will keep the center box a fix width and that will keep things in place?

Here's my code in case it helps!

Thanks!!!!



<p>[caption id="attachment_27" align="alignleft" width="54" caption="Deluxe Digital"]<img src="http://fierybreeze.com/wp-content/uploads/2009/06/icons01small.jpg" alt="Deluxe Digital" title="icon01.jpg" width="54" height="78" class="size-full wp-image-27" />[/caption]</p>

<p><strong>Deluxe Digital:</strong> mp3 or Apple Lossless + bonus tracks + video</p>

<p>[caption id="attachment_28" align="alignleft" width="116" caption="Deluxe Digital + T-shirt"]<img src="http://fierybreeze.com/wp-content/uploads/2009/06/icons02small.jpg" alt="Deluxe Digital + T-shirt" title="icon02.jpg" width="116" height="79" class="size-full wp-image-28" />[/caption]</p>

<p><strong>Deluxe Digital + T-shirt: </strong>mp3 or Apple Lossless + bonus tracks + video + T-shirt</p>

<p>[caption id="attachment_30" align="alignleft" width="133" caption="Vinyl + Deluxe Digital"]<img src="http://fierybreeze.com/wp-content/uploads/2009/06/icons03small.jpg" alt="Vinyl + Deluxe Digital" title="icon03.jpg" width="133" height="79" class="size-full wp-image-30" />[/caption]</p>

<p><strong>Vinyl + Deluxe Digital: </strong>LP + mp3 or Apple Lossless + bonus tracks + video</p>

<p>[caption id="attachment_32" align="alignleft" width="196" caption="Vinyl + Deluxe Digital + T-shirt"]<img src="http://fierybreeze.com/wp-content/uploads/2009/06/icons04small.jpg" alt="Vinyl + Deluxe Digital + T-shirt" title="icon04.jpg" width="196" height="79" class="size-full wp-image-32" />[/caption]</p>

<p><strong>Vinyl + Deluxe Digital + T-shirt: </strong>LP + mp3 or Apple Lossless + bonus tracks + video + T-shirt</p>

<p>[caption id="attachment_33" align="alignleft" width="389" caption="Super Deluxe 3 Vinyl + 3 Digital"]<img src="http://fierybreeze.com/wp-content/uploads/2009/06/icons05small.jpg" alt="Super Deluxe 3 Vinyl + 3 Digital" title="icon05.jpg" width="389" height="78" class="size-full wp-image-33" />[/caption]</p>

<p><strong>Super Deluxe 3 Vinyl + 3 Digital: </strong>LPs + mp3 or Apple Lossless + bonus tracks + video</p>

<p>[caption id="attachment_36" align="alignleft" width="450" caption="Super Deluxe 3 Vinyl + 3 Digital + T-shirt"]<img src="http://fierybreeze.com/wp-content/uploads/2009/06/icons06small.jpg" alt="Super Deluxe 3 Vinyl + 3 Digital + T-shirt" title="icon06.jpg" width="450" height="79" class="size-full wp-image-36" />[/caption]</p>

<p><strong>Super Deluxe 3 Vinyl + 3 Digital + T-shirt: </strong>LPs + mp3 or Apple Lossless + bonus tracks + video + T-shirt</p>

see http://forum.bytesforall.com/showthread.php?t=2032

Thank you -- that link explained what was going on! You are so helpful!

Flynn's link leads to a suggestion to use

<div style="clear:left;"></div>

I use

<div style="clear:both;"></div> which deals with right aligned images too.

One thing to be aware of (and which has at least partially been causing you this problem) is that the Visual Editor will strip out this code as it is not a default valid element in TinyMCE editor.

To stop it being stripped out you can use the tinymce_valid_elements plug in and specify the "div" code with attribute "clear" as a valid element. It will not then get stripped out.

Hope this helps

Thanks for that suggestion! I will look into that plug-in!