2

I'm trying to create a ribbon overlay for a <div> using CSS and Bootstrap's glyphicons. I'm able to build the ribbon itself with no issues (I think!), but when I attempt to place a glyph <i> as the ribbon text, I end up with an extra <i> element magically inserted after every <div> on the page. Using regular text instead of an <i> works as expected.

enter image description here

Seen on Ubuntu using Chrome and Firefox.

JSFiddle: http://jsfiddle.net/57Wbd/3/

<body>
  <div class="box">
    <div class="ribbon">
      <div class="txt">
          <i class="glyphicon glyphicon-exclamation-sign"/>
      </div>
    </div>
  </div>
</body>

.box {
    position: relative;
    background-color: #808080;
    width: 355px;
    height: 132px;
}
.ribbon {
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
    border: 48px solid transparent;
    border-bottom: 48px solid #ffe500;
    position: absolute;
    top: -32px;
    right: -72px;
    width: 192px;
    color: white;
}
.ribbon .txt {
    position: absolute;
    top: 16px;
}

what might be going on here and how do I fix it?

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Dan O
  • 6,022
  • 2
  • 32
  • 50

1 Answers1

4

Use a validator.

The end tag for your <i> is missing. Error recovery closing and reopening it so you have one around each piece of all the rest of your content.

You aren't writing an XHTML document served as application/xhtml+xml therefore you can't use <foo /> as a substitute for <foo></foo>.

(And you shouldn't use an <i> for that anyway).

Community
  • 1
  • 1
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335