<sup></sup> or <p class="superscript"></p>

HTML & CSS
1

Some twelve months ago, I had some fabulous help on this site with CSS.

I now have two specific problems where if I use the <sup> tag the page displays fine, but if I try and use a p class it displays badly.

The pages are: http://www.c5d.co.uk/descriptioned141891.php where in column 9 if I use <p class=“superscript”> the around the o in No 2 it gives me a line break after the N

The second one is http://www.c5d.co.uk/descriptioned121891.php where in Column 8, I cannot get it to dispaly correctly at all if I don’t use <sup>

Should I just stick with what I have got ? Or is there an easy CSS solution?

Thanks

Antony

2

Use the <sup> element and style it to suit. E.g.

p sup {vertical-align: .5em; font-size: 65%;}
3

Well this is one of those THINKING issues… and a very gray one at that.

What you want is possible to accomplish in CSS, but may not be the right thing to do.

Lets consider SEMANTICS

the superscript ‘o’ actually means something it’s differentiating the abbreviation for ‘number’ from the word ‘no’ ( as in grumpy cat!).

so I lean towards using SUP for THAT reason.

BUT, as long as you we are on the subject here is how to accomplish that effect in CSS.

Your first error was to use a P tag. #1 Wrong semantics, and #2 w/o changing he display attribute it is going to cause a line break. so what you should have used was a SPAN or other inline element.


.sub{vertical-align: super;  font-size: 80%; text-decoration:underline;  }
<p>Lorem ipsum N<span class='sub'>o</span>.  sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

It kinda makes me think, since we are going to have to use a tag , why not use the semantically correct tag anyway? So… again, I recommend using the SUP tag

But let’s show off a little. Here I have wrapped the whole word in the tag and achieved the ‘No.’ effect


			.sub2 {display:inline-block;font-size: 80%; vertical-align: super; position: relative}
			.sub2:before {position: absolute; content: '';   left:1em ; right:0;   top:1.05em;    border-bottom: 1px  solid}
			.sub2:first-letter{font-size: 125%;  vertical-align: bottom; line-height: .4;  }


<p>Lorem ipsum span class='sub2'>No.</span>  sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

of course, the above example is kinda convoluted for such a simple effect.

I WOULD , add an underline , just because it will make read better.


.no{  text-decoration:underline;  }

<p>Lorem ipsum N<sup class='no'>o</sup>.  sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>




hope that helps
4

Thanks both for your input.

As you say, it’s a lot of code for such a simple amendment, and I did wonder whether or not to stick to the plain old <sup>.

I do like the underlined bit though.

Thanks again

Antony