Convert "Heading" elements to inline elements?

HTML & CSS
1

Here is an example of the content:

<div class="entry">
<p>The fact that<br /><h2>lactose intolerance symptoms</h2>
<p> are mostly developmental and seen as more prevalent in specific population groups, has led researchers to the clue, that this condition is genetically pre-disposed. It occurs far more frequently in Asian people; people of African heritage, and Native American populations; than it does for example in people of North European descent.</p>
<p>In the case of secondary<br />
<h3>lactose intolerance symptoms</h3>
<p>, these may occur due to damage caused to the small intestine...</p>
</p></p>

WordPress content editor is adding the P and BR tags once the page is published (they just show as clean line breaks in the wordress content editor in HTML mode.

So there is apparently a replacement being done on the line breaks before the content is served and the P and BR tags are being inserted.

Anyway, What I’m trying to do is to convert the headings to “inline” elements so that they appear in the normal flow of the text.

I’m using this CSS in an attempt to do it. It almost works, but the H level elements all act as if they have line breaks in front of them…

I’m using the CSS below to attempt to


.entry h1,.entry h2,.entry h3,.entry h4,.entry h5,.entry h6 {font-size:100%;margin:0;padding:0 .5em 0 0;display:inline;}.entry h1 + p,.entry h2 + p,.entry h3 + p,.entry h4 + p,.entry h5 + p,.entry h6 + p {display:inline;}.entry p + p {display:block;}.relatedTitle{margin-bottom:0;}h4 { padding-bottom: 10px; }
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6{margin-right:-.5em;}
2

First, some alternate solutions you may want to try:

  1. WP and many other CMSs convert “carriage returns” into BRs and Ps ( I built a CMS which interprets one CR as a BT and two as a P)… check to see if you aren’t simply putting line in your content itself.

  2. You could tailor your CSS to HIDE undesired BRs. It’s kinda cheating, but easier than cleaning up your input or wrangling a WP filter…

br {dispplay:none;}

if that’s a bit heavy handed ( as it would hide ALL BRs on your page) you could employ a class ( preferentially that of of your content or or article)
,myClass br {dispplay:none;}

  1. You have a bigger problem than what you think. In your code some of your P tags aren’t closed.

<p>In the case of secondary<br /><h3>lactose intolerance symptoms</h3>
. CSS or NOT this HAS TO BE addressed in your CMS. I suggest you refer back to #1

Other than that you were in the right track… display:inline + re size your fonts to match the text around them and you should be set.

ONE thing you have to keep in mind, making a Hx an inline element does NOT add it to the text flow of another block element… ( especially once your code is all properly straightened up)For that to happen, you’d have to make the Ps inline as well.

Since you seem to be concerned with the break IN FRONT of the Hx the solution is simple…
Hx, Hx + P {display:inline;} /warning… this will not work if you need to support IE6, or any IE if there are HTML comments between the tags… tho I don’t see why there would be/

Hope that helps.