<h1>, <h2>, <h3>... tags, inline within paragraphs (<p>)
I'm trying to have <hx> tags inside paragraphs, like:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar tincidunt neque, at blandit leo mattis vitae. Cras <h2>placerat</h2> justo vel risus porta cursus. Nullam eget sem nibh. Sed <h3>mattis</h3> facilisis rhoncus. Morbi sit amet nisl lectus.</p>
But I always get a line break before each one of them, even applying all these, and combinations of the following declarations:
h1, h2, h3, h4, h5, h6 {
display:inline !important;
text-transform:none;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
clear:none;
color:inherit;
margin:0;
padding:0;
}
So what can I do so that the tags go unnoticed inline with the text? Right now I get something like
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar tincidunt neque, at blandit leo mattis vitae. Cras
placerat justo vel risus porta cursus. Nullam eget sem nibh. Sed
mattis facilisis rhoncus. Morbi sit amet nisl lectus.
Thank you
PS: btw I'm using blueprint framework theme for drupal.
Answer
You're misusing the header tags.
You should use <span> tags with CSS classes.
I tried it out, and what's happening is that when Firefox sees an invalid <h1> tag inside the <p>, it automatically closes the <p> tag. You can clearly see this in Firebug.