Question

This is how my css looks like:

.rounded-box{
  border-radius: 5px;
  background-color: #e4f4fd;
  font-size: 16px;
  margin-top: 18px;
  border: 1px solid #dedef7;
  padding: 18px;
  text-shadow: 1px 1px 0 white;
  display: inline-block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}


h3 {
    text-shadow: 1px 1px 0 white;
    margin: 10px;
}

And this is how my html looks like:

    <div class="rounded-box">
            <h3>some text here</h3>
            <h3>some text here</h3>
    </div>

For some reason in IE8 (haven’t tested it yet in other IEs) the rounded-box sits on top of the text. When I load the page a see for a fraction of the second my text then the rounded box covers the text.

(All the other browsers display the text as I intended on top of the rounded-box)

Any ides?

Answer 1

The problem was with jquery.curvycorners.min.js. When I eliminated it from my HTML page the problem went way.

On top of that it eliminated a problem I had in another page where I had a text field that would not show up in IE 8.