SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Use the <sup> element and style it to suit. E.g.

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

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

    Code:
    .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

    Code:
    			.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.


    Code:
    .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>
    [/CODE]


    hope that helps

  4. #4
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •