Posted on Jun 29, 2011 in WordPress | 0 comments
Have you ever noticed your CSS acting strangely, and then discovered upon investigating that your paragraph tags did not seem to be acting correctly–that even though you properly close your paragraph tags, WordPress just closes your tags wherever it wants to?
You can see this problem simply illustrated below. Here, in HTML mode I have entered a few lines of HTML. I have styled a p tag with a border, and included some words and an unordered list before closing the p tag. What you actually see is that the border only encloses one line. If you look at the HTML, you will see that there are several p tags opened and closed in the example below, instead of just the one styled with the border.
before p tag
paragraph beginning–paragraph is styled with a red border
end of paragraph
after closing p tag
What can you do about this? Not a whole lot, unless you feel like making modifications to core WordPress files–which, of course, would get overwritten with every WordPress update, and would likely result in a lot of unexpected behaviors.
The solution? Not much of a solution. Use <div> instead of <p> tags whenever you want to apply CSS to a block. If you find yourself styling a p tag, then switch to a div instead or you may regret it.
Do you have a better solution to stop WordPress from automatically adding p tags in annoying places? Let me know in the comments!