underlining superscript problem 1

myatia · Mar 18, 2003

Hi,

When I superscript underlined/linked text, the underline always jumps up to the bottom of the superscripted text, which is raised higher than the rest of the text. Here's an example:

x²

Is there a way to keep the underline all the way at the bottom underneath the superscripted text? Thanks,

Misty

EdwardMartinIII · Mar 18, 2003

Misty,

I so have the answer for you. You define a span style in CSS with a bottom border and a transparent background.

For example, save this as "Sample.html":

Code:

<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot;></link>
  </head>
  <body>
    <p class=&quot;Normal&quot;><u>Ordinary underlined text, with a <sup>superscripted</sup> part</u></p><br />

    <p class=&quot;Normal&quot;><span class=&quot;UnderlinedSpan&quot;>Text underlined via CSS border property in SPAN tag, <br />with a <sup>superscripted</sup> part<br />and a line return.</span></p><br />

    <p class=&quot;Normal&quot;>And back to normal text.</p>
  </body>
</html>

and save this as "style.css" in the same directory:

Code:

p.Normal
{
  font-family:&quot;times new roman&quot;, serif;
  font-size:12pt;
  font-style:normal;
  color: #000000;
  background-color: #ffffff;
  text-align:left;
  text-decoration:none;
  margin:0px;
  padding:0px;
  border-style: none;
  border-bottom: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

span.UnderlinedSpan
{
  font-family:&quot;times new roman&quot;, serif;
  font-size:12pt;
  font-style:normal;
  color: #000000;
  background-color: transparent;
  text-align:left;
  text-decoration:none;
  margin:0px;
  padding:0px;
  border-style: solid;
  border-width: 1px;
  border-bottom: single;
  border-top: none;
  border-left: none;
  border-right: none;
}

Works under Mozilla and IE. Don't know if it'll work under Netscape 4 or older.

By the way, you have to declare the background color transparent because if the lines are too close together, they'll cover up the underlines from above.

Cheers,
[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

myatia · Mar 18, 2003

Wow, that's a lot more complicated than I anticipated. Sounds like you spent a lot of time on this one. Thanks for the solution,

Misty

EdwardMartinIII · Mar 18, 2003

It only seems more complicated when you count message lines, Misty. [smile]

Once I saw how <u> obviously wasn't going to do it, the next thing I tried was the paragraph-underline. But that didn't help if there were line-returns, plus it went all across the page and that didn't really seem in the spirit of what you wanted. So, I figured it was a span-level class.

Then I noodled until I found the right calls for the CSS. Total time maybe twenty minutes.

It's actually simpler than it looks. I probably included way too much in the CSS file...

Happy to have helped!

Cheers,
[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

underlining superscript problem 1

myatia

Programmer

EdwardMartinIII

Technical User

myatia

Programmer

EdwardMartinIII

Technical User

Similar threads

Part and Inventory Search

Sponsor