ansaurus

Question

Inline displayed blocks form a single word in IE

Answer 1

A:

You can just use a regular space, but add "margin-right:_ px" to the h2 css definition to adjust the spacing between tags. Negative values are allowed too.

Diodeus 2008-09-17 13:12:53

Answer 2

A:

Well the braking space is just a space, you know a " " without the quotes...

Jan Hancic 2008-09-17 13:12:59

Answer 3

A:

Have you tried setting the "margin" property? Not sure if that directly applies to your question.

iros 2008-09-17 13:14:24

Answer 4

A:

Throwing an   in there seems to create a space:

<html>
    <head><title>Blah</title></head>
    <body>
     <h2 style="display:inline;">Something</h2>
     &nbsp;
     <h2 style="display:inline;">Something Else</h2>
    </body>
</html>

In this example, you actually end up with 2 spaces, so you might want to eliminate whitespace between the tags and the   if you require only one space. Another option would be to add a left/right margin to the header element.

Chris Marasti-Georg 2008-09-17 13:15:10

Answer 5

A:

Apply the style margin: 0 0.5em to both headers - adjust 0.5 to suit (maybe 0.25 or 0.75 is better; also the first 0 is top/bottom margin, adjust as relevant).

Note: Since you want a character space, you want em not px as suggested earlier.

Complete example code...

<!DOCTYPE html>
<html>
    <head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
        <title>Inline Header Example</title>
        <style type="text/css">
         h2
         {
          display: inline;
          margin: 0 0.5em;
         }
        </style>
    </head>
    <body>
        <h2>First Header</h2>
        <h2>Second Header</h2>
    </body>
</html>

Peter Boughton 2008-09-17 13:38:49

this doesn't answer the asker's question. He's asking how to make the text inside the tag flow like a real inline tag.

Pete Michaud 2008-09-17 17:56:44

Huh!? I've re-read his question several times and it definitely appears as though he's asking about the spacing between multiple H2s, not about text flowing with H2s. Regular text will do that by default.

Peter Boughton 2008-09-17 18:16:43

Answer 6

A:

The answer is that it's not possible. You mean you want text that's in a larger block of text to flow just like the rest of it, as if the tag were < strong > instead of of < h2 >

Since h2 is a block level element no matter how you style it, some browsers (cough) will choke on your attempt to flow it inline with other text.

Pete Michaud 2008-09-17 17:55:59

This is wrong: "Since h2 is a block level element no matter how you style it"A H2 with display:inline will stop being a block level element.If you put an inline H2 within regular text, there will (by default) be a font size difference, but that will not prevent it from flowing.

Peter Boughton 2008-09-17 18:21:03

See this article:http://www.autisticcuckoo.net/archive.php?id=2005/01/11/block-vs-inline-1Elements' level is determined by the DTD, not by the CSS. As I said, specifying that a block level element should create an inline block doesn't change the fact that it's a block level element.

Pete Michaud 2008-09-21 15:27:29

Answer 7

+2 A:

I can't think of a rationale for why you're wanting h2's to display inline. In fact, why would you want two headers to read together? Think of the way it should be read. Do you want it to read:

"Header one header two"

or:

"Header One"

"Header Two"

If it's the first way, then it's probably your HTML that's messed up. If it's the second, then you should probably think of it's positioning rather than changing it's behavior and utilize other css methods like float and position.

Steve Perks 2008-09-17 18:57:07

This is a good question. If there are two headers, should they actually be both h2s, or should it be h1 h2 or h2 h3.Working out how it reads aloud is a good way to think about structure.

Peter Boughton 2008-09-17 22:10:25

My client wants a Tagcloud, but insists that the links to be wrapped in H2s

Silviu Postavaru 2008-09-18 18:51:03

ansaurus

tags:

views:

answers:

Inline displayed blocks form a single word in IE

related questions