Stuck Again Re Spans/Semantics

[certificates]

.block1911  {text-align:left;
	display:block; margin-left:5px;}

`.block1911 span .statscenter {text-align:center; display: block;}`

The CSS above fine and centres the text within the span without a line break.

Why then should this give a line break with the same initial block ?

.block1911 span .superscript  { 
	font-weight:700;
	font-style:italic;
	position:relative; /*Superscripts the text */
	bottom:.2em;
	font-size:.6em;
    display:block;}

I have tried it with the initial span and also by closing the original one and doing it on it’ own.

All I want to do is supercript the t at the end of each of the St

  <tr>
     <td class="nbl"><span class="block1911">2&#46; Ecclesiastical Parish or Parishes&#59;
	 <span>Names in Full</span></span></td>
     <td class="nbl"><span class="block1911">Stayley S<span class="superscript">t</span>>Paul   &#40;Part of&#41;<span>
	 Millbrook St James &#40;Part of&#41;</span><span>
	 Stalybridge St George &#40;Part of&#41;</span><span>
	 Mossley St George &#40;Part of&#41;</span></span></td>
	 <td class="nbl">5&#46; <span class="strike">Rural District</span></td>
     <td class="nbl">&mdash;&mdash;&mdash;</td>
  </tr>

[Erik_J]

@certificates

The CSS above fine and centres the text within the span without a line break.

Why then should this give a line break with the same initial block ?

The first .block1911 “block” span doesn’t contain another “block” span that breaks the line.

The second does. That block display on the “superscript” span should be changed to inline-block, that would still allow it to take the properties of a block but would not break the line as it resides on a line.

[certificates]

Thank you.

That very nearly works in that it has done three of the four. It has not done the first one.

I can see from looking at the element that the span is not being read and the original block only is taken. It doesn’t even superscript the t which seems odd to me

Would you be kind enough to have a quick look at this please?

http://www.c5d.co.uk/description1911sbed16.php where it shows

[Erik_J]

But then you use a <p> not a <span>. That’s not semantic, the paragraph is a block element and should not be a sibling to inline elements. The <p> also has default margins to give vertical space between paragraphs.

I suggest you change the p to span!

The css can be the same though I think the font-size and the bottom position you apply could be increased a little to look more like superscript.

[certificates]

Thanks you, that does work. I hadn’t used a p because it was in a table!

[Erik_J]

@certificates

I hadn’t used a p because it was in a table!

Both can be used to contain text in a table cell, but not as siblings, and an html inline element, as a span, can’t contain an html block element.

[certificates]

Thanks. I must have misunderstood another contributer’s comment. Thanks for the help agan

[SamA74]

@certificates

All I want to do is supercript the t at the end of each of the St

Rather than a <span> maybe use a <sup> for this, you shouldn’t need a class for it.

Note, I generally override the default browser styling of sup to use relative positioning, like yo have set up. The reason being that otherwise it can create inconsistencies in the line heights of a paragraph. Those that contain superscript may have a wider gap than others, relative positioning of the superscript negates this problem.

sup {
  font-weight:700;
  font-style:italic;
  position:relative;
  bottom:.2em;
  font-size:.6em;
}

[certificates]

Thanks for the suggestion. Sorry for the late response.

Just using the sup tag does cause it to break out of the line. Hence the superscript tag.

[ronpat]

@certificates

Just using the sup tag does cause it to break out of the line.

The <sup> element is an inline element. Where in your stylesheet has that been changed? Where has the default behavior been modified?

[certificates]

Thanks, it’s sorted. I didn’t realise it didn’t need a dot in the CSS.

My book didn’t make that clear

Grateful you came back to me

[Erik_J]

@certificates

Just using the sup tag does cause it to break out of the line. Hence the superscript tag.

But taking semantic considerations, I think you should use the <sup> tag as it has the correct meaning here. Then you could skip the use o the “superscript” class and use the “sup” selector instead, letting the html sup tag get that styling, just as @SamA74 suggested:

@SamA74

Note, I generally override the default browser styling of sup to use relative positioning, like yo have set up. The reason being that otherwise it can create inconsistencies in the line heights of a paragraph. Those that contain superscript may have a wider gap than others, relative positioning of the superscript negates this problem.

[certificates]

Yes, it works fine as SamA74 said. I didn’t know that you didn’t need a . before the sup element in the CSS. My book didn’t make that clear

Thanks again

[TechnoBear]

@certificates

I didn’t know that you didn’t need a . before the sup element in the CSS.

You use a . to indicate a class name, as you use a # to indicate an id name. Elements just go by their name, whether it’s h1, p, span, sup or whatever.

[SamA74]

One thing I neglected to mention about overriding the default sup styling.
You may need to reset the vertical-align property to bottom to fix the line height problem, then use position: relative and bottom: to offset it without altering flow.

[certificates]

Thanks for that. I used the detal below, and it worked fine, Just didn’t know about the . at first. as my book wasn’t clear enough!

sup {
    vertical-align: super;
    font-size: smaller;
position: relative; top: 0.25em; }

[SamA74]

@certificates

vertical-align: super;

If you want to keep the vertical alignment set to super, that’s fine if you are happy with that. But then you probably don’t even need to style it at all, as that’s its default alignment.
Only set it manually if you find it gives you leading (line height) problems.