Search code examples
javascripthtmlinternet-explorercsscss3pie

IE8 crashes when styling input[type=submit] with CSS3 PIE


Sometimes the page works and you need to refresh the page to see it crash.

You can see a live sample here: http://rcnhca.org.uk/sites/first_steps/account/ (ie7 works fine, I am not supporting ie6)

I am attempting to style my submit button with the following values:

a.button, input.button {
    border: 2px solid #3A90A7;
    border-radius: 5px 5px 5px 5px;
    color: #202D32;
    display: block;
    float: left;
    height: 2.6em;
    line-height: 2.6em;
    margin: 0.667em 0.333em;
    padding: 0 1em;
    position: relative;
    text-decoration: none;
}

a.button:hover, input.button:hover{
    border: #202d32 solid 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
}

input[type=submit] {
    behavior: url(http://rcnhca.org.uk/sites/first_steps/PIE.htc);
    position: relative;
    -pie-poll:true;
}

a.button:hover, input.button:hover{
    -pie-box-shadow: none;
}

.button {
    -pie-background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
}

.button.active {
    -pie-background: linear-gradient(top, #b7b7b7 0%,#b7b7b7 8%,#e5e5e5 8%,#ffffff 100%);
}

Finally, the submit button in all it's glory:

<input id="submitbtn" class="button omega" type="submit" value="Create your account" name="submit">

Does anyone know what could be causing this crash? I don't get any information apart from a script is causing the page to run slowly.


Solution

  • With some more testing I found the answer to this problem, it wasn't the fact that it was submit button but that it was some kind of form button and I gave it font-size.

    If I remove the font-size property on the element then IE8 stops crashing and I'm a happy bunny.

    Apologies as I didn't include the part of the CSS which had the font-size (It's a big file, I glazed over it).