CODEWITHSUNDEEP
htmlcssborderunderlinetext-decorations
sree
sree

Reputation: 115

<sup> taking underline in chrome when given inside an element with text-decoration underline

tried adjusting the sup tag with custom styling but it breaks when checked across the browsers. The current code shared http://jsfiddle.net/UXSree/FhVm5/10/ in the fiddle works for firefox and IE but when it comes to webkit browsers it fails. Has anyone come across this?

        h1{
    text-decoration:underline;
    width:450px;

    }

    sup{
    color:red;
    font-size: 30%;
    }

This is a multiline headingwith superscriptAnd here comes the second part of multiline heading2nd

Upvotes: 0

Views: 1419

Answers (3)

sree
sree

Reputation: 115

got the fine tuned solution... http://jsfiddle.net/UXSree/M5WwA/

h1{ border-bottom: 1px solid #999; display: inline; } div{width:200px;border:1px solid red;}

Upvotes: 1

kapil_dev
kapil_dev

Reputation: 86

Hey here is a perfect solution

h1 {
        text-decoration:underline;
        width:450px;
       display: inline;
    }

    sup {
        color:red;
        font-size: 30%;
        vertical-align: top;
    }

Demo: http://jsfiddle.net/gzQa6/1/

Upvotes: 1

Matthew Trow
Matthew Trow

Reputation: 2852

   h1 {
        text-decoration:underline;
        width:450px;
       display: inline;
    }

    sup {
        color:red;
        font-size: 30%;
        text-decoration:none; display: inline-block;
    }

The above is not an ideal solution, but it does work.

Upvotes: 0

Related Questions