Border and background image not showing

Question

http://jsfiddle.net/xhydk70v/

.ui-dialog-container {
    padding:18px;
}
.ui-dialog-success-container {
    position:relative;
    top:-5px;
    left:-35px;
    border:2px solid #91e375;
    border-radius:10px;
    color:#000;
}
.ui-dialog-error-container {
    position:relative;
    top:-5px;
    left:-35px;
    border:2px solid #ff598e;
    border-radius:10px;
    color:#000;
}
.ui-dialog-success-image {
    position:relative;
    top:-20px;
    left:-17px;
    float:left;
    width:32px;
    height:32px;
    background-image: url(/public/img/icon-dialogsuccess.png);
    background-position: top left;
    background-repeat: no-repeat;
    z-index:5;
}
.ui-dialog-error-image {
    position:relative;
    top:-20px;
    left:-17px;
    float:left;
    width:32px;
    height:32px;
    background-image: url(/public/img/icon-dialogerror.png);
    background-position: top left;
    background-repeat: no-repeat;
    z-index:5;
}

<div class="ui-dialog-container">
    <div class="ui-dialog-error-image"></div>
    <div class="ui-dialog-error-container">test</div>
</div>
<br />
<div class="ui-dialog-container">
    <div class="ui-dialog-succes-image"></div>
    <div class="ui-dialog-succes-container">test</div>
</div>

Can someone explain to me why the "success div" isn't showing the border? On my live environment it also isn't showing the image, while the error one is, just as the border. I am going crazy I believe, since I cannot see what is wrong.

Answer 1

you misspelled sucess in your html

Change:

<div class="ui-dialog-container">
<div class="ui-dialog-succes-image"></div>
<div class="ui-dialog-succes-container">test</div>

To:

<div class="ui-dialog-container">
<div class="ui-dialog-success-image"></div>
<div class="ui-dialog-success-container">test</div>