CODEWITHSUNDEEP
htmlcssinternet-explorer
wh0
wh0

Reputation: 279

Space between span elements in IE11

Before you disregard this question as removing the white space between the span elements will help me, let me assure you this particular issue is a bit different.

Issue: There is very small gap between span elements occurring only in IE11 only at certain width of the screen, which BTW is not an issue due to white space between span elements.

Code:

          <table width="100%" height="50" cellspacing="0" cellpadding="0">
              <tbody>
                 <tr height="15">
                    <td nowrap="nowrap" style="text-align: center;">
                        <button >
                       <span class="buttonLeft"></span><span class="buttonMiddle"><span class="buttonText" >Reset Page</span></span><span class="buttonRight"></span>  
                       </button>
                    </td>
                 </tr>
              </tbody>
           </table>

code :

button {
    background: none;
    border:none;
}
.buttonLeft, .buttonMiddle, .buttonRight {
    background-color: #23609D;
    height: 20px;
    vertical-align: middle;
    padding-top: 2px;
    height: 22px;
    display: block;
    float: left;
}
.buttonRight, .buttonLeft {
    width: 10px;
}
.buttonLeft {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.buttonRight {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.buttonText {
    white-space: nowrap;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: block;
    margin-top: 2px;
}

Here is the fiddle for the same jsfiddle

You may not notice the issue at first, try re-sizing the Result section of the fiddle, you will be able to identify the issue.

You can see the resultant as below.

Issue

The issue can be solved by removing the style="text-align: center;"

on the td element in the above code or by removing the border-radius styles.

Since the same markup is being used at numerous places in my project, I really don't think changing the markup is the best way to go around.

I'm looking for a CSS solution or if not solution at least the reason behind this odd behavior.

Upvotes: 2

Views: 1640

Answers (1)

EdenSource
EdenSource

Reputation: 3387

I just add negative margin of 1px for both left and right SPANs :

span.buttonLeft {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    margin-right:-1px;
}
span.buttonRight {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-left:-1px;
}

And add a padding to your .buttonText span in order to give 1px free around your text :

span.buttonText {
    display: block;
    margin-top: 2px;
    padding:0 1px;
}

This solution works, even if it isn't a clean way to do. What happens here ? 2 SPANs are overlapping on the middle one (1px).

(Sorry, JSFiddle seems to be out of order, so I cannot provide a live Demo)

Upvotes: 2

Related Questions