Skip navigation
Currently Being Moderated

Is there a way to create "real" superscript in Dreamweaver?

Aug 1, 2012 11:57 AM

I know how to use the <sup></sup> tags to superscript type, but the problem is that the type within those tags doesn't reduce in size.  I'm looking for a way to create a true superscript.  Can anyone give me a way to do this?

 
Replies
  • Currently Being Moderated
    Aug 1, 2012 12:06 PM   in reply to graphicedge

    Not without additional coding. You can change the font size as well within the <Sup> tags.

     

    I would create a class in CSS. Put the following between your <head> tags...

     

    <style>

    .super {

       font-size:.6em;

      vertical-align:super;

    }

    </style>

     

     

    And then add that to the font you want to affect within a <span> tag

     

    Pi * r<span class="super">2</span> is the formula for the area of a circle.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 12:11 PM   in reply to Jon Fritz II

    Once the style is added to your <head> section, you would just highlight the text you want t affect in the Design View of DW, then select the "super" class in the Properties inspector and DW will add the span tags for you.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 12:12 PM   in reply to Jon Fritz II

    @Jon, why use a class when you can  style the <sup>?

     

     

    CSS:

    p {font size: 18px}

     

    sup {font-size: 11px}

     

     

    HTML:

    <p>E=MC<sup>2</sup></p>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 12:15 PM   in reply to Nancy O.

    Here's the BEST way I have found - it doesn't make the line-height change!

     

    sup {

      position: relative;

      top: -1ex;

      vertical-align:baseline;

      font-size: 80%;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 12:21 PM   in reply to MurraySummers

    @Nancy, sometimes I miss the obvious things like that, sometimes I miss the not so obvious things (like misplaced ' in JS).

     

    @Murray, copied and pasted.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 12:24 PM   in reply to Jon Fritz II

    You may use it without attribution!

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 12:33 PM   in reply to graphicedge

    Hi

     

    Genuine sub/superscript is available in IE10/FF by using,  -

    @supports ( font-variant-position: sub ) {

     

      sub {

        vertical-align: inherit;

        font-size: 100%;

        line-height: inherit;

        font-variant-position: sub;

      }

    }

     

    The tag is, (obviously)  <sub>your text here</sub>

     

    For superscript change sub to super. The feature is also planed for webkit and Opera browsers.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 4:39 AM   in reply to graphicedge

    Can you say more about how the pages are "all messed up"?  The pages look fine to me in Safari and Opera.

     

    And where did you try the superscript and not get what you wanted?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 5:33 AM   in reply to graphicedge

    You're missing a semi-colon after the text-decoration attribute in your .footer class in the CSS. That could be causing some wonkiness somewhere.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 6:56 AM   in reply to graphicedge

    It's much easier to troubleshoot if you could post a temporary page online somewhere, perhaps within a folder named "test" that you could then delete once the issue is resolved.

     

    If you're worried about being indexed by a search engine, you can add <meta name="robots" content="noindex,nofollow" /> to the head section of the page (also to be deleted before uploading to the actual site).

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points