CODEWITHSUNDEEP
csstwitter-bootstrap
anipard
anipard

Reputation: 164

Bootstrap: span inside span doesn't display right on Firefox and IE

Using this HTML below:

<span class="label label-default record"> Total <span class="label badge-number">12</span></span><br>
<span class="label label-warning record"> Pending <span class="label badge-number">5</span></span><br>
<span class="label label-success record"> Active <span class="label badge-number">6</span></span><br>
<span class="label label-important record"> Inactive <span class="label badge-number">1</span></span>

and CSS:

.record {
width: 84px;
height: 16px;
padding: 3px 0 3px 5px;
margin-bottom:2px;
}

.badge-number {
background-color: #666;
width: 26px;
height: 18px;
float: right;
text-align: right;
margin: -3px 0 0 0;
-webkit-border-bottom-left-radius:0;
-moz-border-bottom-left-radius:0;
border-bottom-left-radius:0;
-webkit-border-top-left-radius:0;
-moz-border-top-left-radius:0;
border-top-left-radius:0;
}

http://jsfiddle.net/eWSRX/

At left is what I get on Chrome (latest version) and at right is on Firefox (v24) and IE8

screenshot

Screenshot from Chrome is what I intended..

Upvotes: 1

Views: 1489

Answers (1)

isherwood
isherwood

Reputation: 61143

There's no need to nest elements to get what you're after. Twitter didn't intend for that, and it's causing more headaches than you need. Here's one option:

http://jsfiddle.net/eWSRX/1/

<span class="label label-default record"> Total </span>
<span class="label badge-number">12</span>
...

.label {
    float: left; /* OR display: inline-block */
    height: 18px;
    padding: 3px;
}
.record {
    width: 84px;
    margin-bottom:2px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}
.badge-number {
    background-color: #666;
    width: 26px;
    text-align: right;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}

Upvotes: 1

Related Questions