<br /> being replaced with <p> tags

Which tab are you using – HTML or Visual?

Thanks for the quick response, @esmi.
I am using the HTML tab.

Two possible options spring to mind:

<p><label for="first_name">First Name</label>
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" /></p>

or

<p><label for="first_name">First Name</label><br /><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /></p>

Thanks esmi.

Unfortunately, no luck. With the first option, WordPress changed the code to

<p><label for="first_name">First Name</label></p>
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" />

WordPress changes the second option to

<p><label for="first_name">First Name</label><br />
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" /></p>

If I remove the <br / > tag after the </label> tag, WordPress automatically reinserts it.

Any other ideas?

Are you possibly putting in the code in html mode and then switching to Visual afterwards for some reason?
If you insert code for that page/post you must not switch to Visual for that one at all. EVER.

Thanks webjunk. No. I am not switching to the Visual tab. I am simply clicking on the UPDATE button. Once I do this, the page is refreshed. When I scroll down to see my code, I see the mysterious changes.

Have four things to try:

1) Remove close tag

2)
Use <br clear=”none” />

3) The old Dreamweaver bug:
</p><p>
which can be just “<p>” as there should be an explicit close anyway.

4) Or better yet use CSS:
In style.css:
p#newbr { margin-bottom:10px; }
In your html:
<p id=”newbr”>Your Label and text</p>

Please let me know if any worked for you. Thanks…

webjunk

1. What do you mean by “Remove close tag.”

2. The <br clear = "none"> didn’t work. WordPress changed the text to:
<p><label for="first_name">First Name</label><br clear="none" /><br />

3. Removing </p> didn’t work either. WordPress just adds it back.

4. I added the recommended code to style.css. In html, I put the following:

<p id="newbr"><label for="first_name">First Name</label></p>
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" />

WordPress turned this into

<p id="newbr"><label for="first_name">First Name</label></p>
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" />

Why do I feel like I am reinventing the wheel here? Surely, there must be a way to lay these elements out nicely. Calling all WordPress experts. Please help!

Can understand the first three. The object in 4) was not to change the html but simply to have the display basically the same as using the
tag. You did not say whether the display in the browser was different. Don’t care about the html. By using the id-newbr you should be able to adjust the spacing below it for the effect you want.

I’m sorry for being less than clear regarding item #4, webjunk. I will blame it on sleep deprivation.

From a visual standpoint, the CSS styling does not achieve the objective. I still have an unsightly blank line between the label and the input field. e.g.

First Name:

[___________]

instead of:

First Name:
[___________]

Then just adust the “margin-bottom:10px;” to whatever works.
Try:
margin-bottom:1px;

webjunk! You did it! I adjusted the margin as suggested and this did the trick. I clearly need to hit the CSS books. Thank you so much for all of your help. It is greatly, greatly appreciated!