2

I have multiple paragraphs of text in an HTML document. Also, at various points, some of the text is wrapped in <h6></h6> tags, which is meant to apply certain font effects. In my CSS, the h6 tag is set to display:inline; so the paragraph keeps going continuously without a line break. This works except for the first instance of h6 on each page it is used: there is always a line break before the first element. Does anyone know why/how to prevent this?

CSS:

h6 {
    font-family:'Courier New',Courier,'Nimbus Mono L',monospace;
    font-size:125%;
    display:inline;
}

HTML:

As expected, not a lot was accomplished (in this plane) over a
five-day weekend when much of it was devoted tot he college
process. However, I'm down to only a handful of HTML-validation
errors. A couple of which are going to be particularly problematic,
dealing with my new <h6>Lytebox JavaScript</h6> I talked about
earlier: to enable Lytebox on an image, you give it a CSS tag
<h6>data-lyte-options</h6>...

The second essence of h6 works fine, but there is a line break before the first.

Improve this question
5
  • post your css so we can take a look Commented Oct 13, 2011 at 17:06
  • please post your html, at least for h6 part... maybe the line break belongs to the previous element/tag? Commented Oct 13, 2011 at 17:06
  • Do you have H6 inside P or not? Are your P elements also inline? Show us a simplified example of your HTML. Or even better: put in a JSFiddle Commented Oct 13, 2011 at 17:08
  • making headers inline is somewhat of an abuse - wouldn't it be better to use a <span> with equivalent formatting instead? Commented Oct 13, 2011 at 17:10
  • H6 is inside P, and I'll post an example in a minute. I didn't think having H6 inside P was a problem, because every other instance works other than the first, and W3C has no problem with it. Commented Oct 13, 2011 at 17:10

4 Answers 4

Reset to default
2

Heading elements can't be contained inside paragraphs, because inherently they're treated as block-level elements hence browsers break paragraphs when they get to a block-level element like heading.

Your particular HTML gets changed to this by browsers:

<p>
As expected, not a lot was accomplished (in this plane) over a
five-day weekend when much of it was devoted tot he college
process. However, I'm down to only a handful of HTML-validation
errors. A couple of which are going to be particularly problematic,
dealing with my new
</p>                           <!-- browsers end a paragraph here!!!!! -->
<h6>Lytebox JavaScript</h6>
I talked about earlier: to enable Lytebox on an image, you give it a CSS tag
<h6>data-lyte-options</h6>
...
<p></p>

I found a reference to this fact in HTML specification:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

And another reference that talks about block-level elements:

Style sheets provide the means to specify the rendering of arbitrary elements, including whether an element is rendered as block or inline. In some cases, such as an inline style for list elements, this may be appropriate, but generally speaking, authors are discouraged from overriding the conventional interpretation of HTML elements in this way.

Solution?

The problem is that you're using headings as usual paragraph text (with its own style). You should be using SPAN elements instead to make your HTML valid.

If all you'd like to do is to format your text to be displayed as code then you can also use CODE element which should be used exactly for this purpose.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Your CSS, setting display:inline to h6,p instead of just h6 did the trick. Thank you.
@ConnorNeville: but don't do that. Your h6 elements are still not contained within paragraphs even though you've put them there in your markup. Check this example that clearly shows this issue. Rather follow my advice and don't do this and replace h6 with something inherently inline...
0

You want the element to be inline and apply special font formatting right?? Then you can enclose them in a 'span' tag

As expected, not a lot was accomplished (in this plane) over a five-day weekend when much of it was devoted tot he college process. However, I'm down to only a handful of HTML-validation errors. A couple of which are going to be particularly problematic, dealing with my new <span>Lytebox JavaScript</span> I talked about earlier: to enable Lytebox on an image, you give it a CSS tag <span>data-lyte-options</span>

span { font-family:'Courier New',Courier,'Nimbus Mono L',monospace;font-size:125%;}
Improve this answer

Comments

0

Why not create a unique class and apply it to your <p> tags as needed. You mention some are wrapped in h6 tags to apply styles. That can be done with <p class="onestyle"></p> and yet you can still have <p></p> regular p tags.

Then with your h6, you can float them left instead of using display:inline or do inline-block, just about the same affect with all. Then apply padding margins as you need to all your styles.

Improve this answer

Comments

-1

Try using CSS selectors to specifically target that instance. Not 100% sure this will fix it, but worth a try.

h6:first-child { display:inline; }
Improve this answer

2 Comments

That's not a css3 selector. first-child's been in CSS all along.
Sorry, was too used to jQuery selectors.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.