0

In our app, we have a button defined as follows:

{
 xtype       : 'button',
 text        : '<span class="disk">1</span> Define Layout'
}

where disk is described like this:

.disk {
        display: inline-block;
        vertical-align : middle;
        background-color: #FFF;
        margin-right: 5px;
        //margin-bottom: -7px;
        padding: 12px 8px !important;
        height: 25px;
        overflow: hidden;
        width: 25px;
        border-radius: 25px;
        color: #555;
        line-height: 0px;
    }

This works fine in ie9+, ff, and chrome. However, in ie8 all I see is squares. I am aware of the fact that border-radius is not part of the IE8 CSS spec and that there are work arounds like CSS3PIE (assume we can't use this :) ). Also, I know that Sencha Cmd (v4.0.2.67) has image slicing built into the build system, but it only seems to work on Ext components. How do I draw the disk for this particular case?

Android Noob
  • 3,271
  • 4
  • 34
  • 60
  • possible duplicate of [CSS rounded corners in IE8](http://stackoverflow.com/questions/7077331/css-rounded-corners-in-ie8) – Lorenz Meyer Sep 13 '14 at 07:21
  • This is extjs specific. Also, if you read the question more carefully, I've already mentioned CSS3PIE, which means I've already done my research. – Android Noob Sep 13 '14 at 13:58

0 Answers0