1

Event after a CSS reset, I've found that IE is apparently attaching a some default styling to the SUP tag. In the following example, the SUP tag is still slightly smaller than the styled SPAN tag. does anyone know a tweak for this?

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"/>
        <style type="text/css">
            sup { font-size: 16px; vertical-align: super; }
            .trademark { font-size: 16px; vertical-align: super; }
        </style>

    </head>

    <body>

        <h1>This is a <sup>®</sup> test</h1>

        <h1>This is a <span class="trademark">®</span> test</h1>

    </body>

</html>
ThisGuyKnowsCode
  • 530
  • 4
  • 18
  • this is very similar to a question I saw here fairly recently -- http://stackoverflow.com/questions/6804383/relative-font-size-of-sub-or-sup-and-their-descendants-in-ie – Spudley Aug 03 '11 at 20:19

1 Answers1

1

http://jsfiddle.net/utwSv/

You should get in habit of give percentage size to fonts, expecially after using a CSS reset which sets fonts size in percentage.

In the example above, it works ok for me if I set a font-size of 120% for sub elements. But after that I also changed the size of the h1 tags. If I use a fixed font-size in pixels, the sub element still presents a smaller font. Instead, if I set it in a percentage value it will display correctly.

Note I also included YUI reset for CSS Fonts.

Jose Faeti
  • 12,126
  • 5
  • 38
  • 52
  • Checking your link with Chrome, they're now different sizes. I could however use this in an IE-only sheet. Do you know of a corssbrowser alternative? – ThisGuyKnowsCode Aug 17 '11 at 19:13