CODEWITHSUNDEEP
htmlcssinternet-exploreropera
Jevison7x
Jevison7x

Reputation: 737

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

This web page div displays correctly in Firefox and Chrome

enter image description here

But looks ugly in Internet Explorer and Opera

enter image description here

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.

Upvotes: 1

Views: 64

Answers (2)

Akshay Kulkarni
Akshay Kulkarni

Reputation: 740

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

Upvotes: 3

Gho
Gho

Reputation: 568

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.

Upvotes: 1

Related Questions