1

I have some CSS which inserts a dash, unicode U+2014 —, to give a nice formatting on my site ahead of the stated source. Annoyingly it is breaking a new line after this (I've tried changing from span to div but no use).

Screenshot inspecting the element in Chrome

The document tree looks like:

<span class="source">...</span>
<p>Source author, text goes here etc. etc.</p>

The computed style for the span line includes display:inline, whereas the computed style for p has display:block, which I'm guessing may be causing the new line?

I'm reading through the relevant CSS and can't see any reason why it should start a new line, I don't have \A in the content as in this question ...

Can any CSS whiz point me to what I'm missing? Alternative implementation of the ::before pseudo-element required perhaps?

The CSS involved here is

div.source:before{content:"\2014";margin-left:0.9em;margin-right:0.9em; white-space:nowrap;}#content

(I inserted white-space:nowrap a while ago trying to fix this but it didn't do anything to the new line)

Community
  • 1
  • 1
Louis Maddox
  • 5,226
  • 5
  • 36
  • 66
  • Did you try `p{display: inline;}`? Is [this](http://jsfiddle.net/hari_shanx/TUyVC/) what you want? – Harry Oct 20 '13 at 15:29
  • 1
    This is because `

    ` is by default a block-level element, meaning that it will take up 100% width of its parent, therefore forcing itself on a new line. Perhaps @Harry's suggestion would work.

     – Terry Oct 20 '13 at 15:31
  • Cringed when I read this because it's basically the solution and I guess I'm an idiot but then I tried it and there are multiple

    tags (i.e. more paragraphs after the source is stated) so I'm just trying to figure out if I need nth-of-type / first-child to make just the first one display:inline, this feels like over-complicating though ...

     – Louis Maddox Oct 20 '13 at 15:39
  • It messes up the p margins for some reason, using nth-of-type got rid of a scrollbar on a blockquote section underneath but going to try Steve's suggestion... div.source p:nth-of-type(1){display:inline} – Louis Maddox Oct 20 '13 at 15:41
  • 1
    @lmmx: Like I just mentioned in Steve's answer. His approach is the better one, but just be careful about the list of browsers you want to support. If IE < 9 is in your list then `:before`, `:nth-child` etc will cause trouble. – Harry Oct 20 '13 at 15:42
  • But if that's the case, the original solution will not work either. In fact, my solution would degrade gracefully because the paragraph would just work as usual. – Steve Oct 20 '13 at 15:46
  • Alternately you could try [this](http://jsfiddle.net/hari_shanx/TUyVC/1/) version also. It uses `+` (adjacent sibling selector) and so only applies to the `

    ` tag directly following the `` and IE has better support for this selector.

     – Harry Oct 20 '13 at 15:48

2 Answers2

2

You could try using the adjacent sibling selector (+) like shown below. It is supported in IE >= 7.

HTML:

<span class="source">&mdash;</span>
<p>Source author, text goes here etc. etc.</p>
<p>Source author, text goes here etc. etc.</p>

CSS:

.source + p{display: inline;} 
/* applies inline style to only the <p> tag directly following a tag with class=source */

Fiddle Demo | Browser Support

Harry
  • 87,580
  • 25
  • 202
  • 214
  • to have the same effect as div.source p:nth-of-type(1){display:inline} ? – Louis Maddox Oct 20 '13 at 16:01
  • Yes, it would. Did you check the fiddle? – Harry Oct 20 '13 at 16:02
  • Yeah, it's acting a little funny in my actual site I'm just seeing what needs to be modified – Louis Maddox Oct 20 '13 at 16:05
  • Check [this](http://jsfiddle.net/hari_shanx/TUyVC/3/) fiddle. It also puts the dash as required. I am not sure what else is causing trouble in your site. If you can update the fiddle with your exact code that would be helpful in analyzing. (`—` is the same as `\2014`) – Harry Oct 20 '13 at 16:06
  • That is strange mate. Are you able to simulate the issue in a fiddle? Also, I think you would have noted the `div` is missing before `.source` in my answer. That is because the element with `class=source` in our case is a `span`. – Harry Oct 20 '13 at 16:11
  • @lmmx: Ah, your `

    ` is inside the `` and is not a sibling. That is the reason.

     – Harry Oct 20 '13 at 16:20
  • Can make it work without the + selector using nth-of-type(1), would be interested to find out what was going wrong though http://jsfiddle.net/qhNzz/ – Louis Maddox Oct 20 '13 at 16:21
  • Try this [fiddle](http://jsfiddle.net/hari_shanx/TUyVC/7/). The problem was that `+` selects a sibling but as mentioned in my previous comment, here the `

    ` is a child and not a sibling of ``. Also, `nth-of-type(1)` is pretty much the same as `p:first-child`. (Note: `first-child` is not supported in IE7)

     – Harry Oct 20 '13 at 16:21
0

Why don't you add the class="source" directly to the p tag, rather than adding an unnecessary span?

The behavior as you see it right now is correct, because p elements are by default block level elements. You could give it a style of display: inline; but as I mentioned above, it would be better to get rid of the span and add the class to the p tag.

Steve
  • 8,609
  • 6
  • 40
  • 54
  • 1
    I agree with you. While I was just trying to fix the problem, what you have mentioned is the better approach to handling it. However, only thing that needs to be checked is browser support for the `:before` pseudo (IE comes to mind :D) – Harry Oct 20 '13 at 15:40
  • I'd like to use that but I'm using Tumblr to manage my posts (although doing my best to hide it) and it doesn't let you change p-level attributes in the theme. The source section looks like this: {block:Source}
    {Source}{/block:Source}
     – Louis Maddox Oct 20 '13 at 15:46
  • Is there a way to apply class="source" to child elements from the div tag? – Louis Maddox Oct 20 '13 at 15:47