How do I get Internet Explorer & Opera to display this text correctly

Question

This web page div displays correctly in Firefox and Chrome

But looks ugly in Internet Explorer and Opera

My HTML Code is:

            <div class="newAd">
                <span id="newAdButton">
                    Create a new advert for FREE!
                </span>
            </div>

And the CSS is:

.newAd {
    margin: 0 auto;
    margin-bottom: 25px;
    margin-top: 20px;
    width: 500px;
}

#newAdButton {
    margin: 10px 30px 10px 30px;
    padding: 10px 40px 10px 40px;
    background-color: #88FF88;
    color: #000000;
    font-size: 27px;
    border-radius: 20px;
    border: 5px solid #00FF00;
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    -o-border-radius: 20px;
    cursor: pointer;
    word-spacing: 0px;
}

Please how can I make it work for IE and Opera? Thanks.

Answer 1

You can use button tag instead of span and apply id to button tag. Hopefully it'll display properly.

Answer 2

The problem is the border you are using for that container. Firefox and chrome have it outer while apparently IE and safari have it inner (as a test you can remove the border and see what happens). Try using box-sizing:border-box; for your #newAdButton.