Problems with IE and CSS buttons

Hello,

I am trying to use wysihat.js which is a HTML editor built on top of Prototype. When, defining CSS classes for it, the button classes work great on Firefox but not on IE. Did a lot of research online and I was not able to figure it out although I've tried to change the code quite a lot. Basically, the images are being hidden on IE.

Basically, the buttons such as bold that has an image only work on Firefox, not on IE. How can I fix that? On IE8 Developer tools I can see the CSS classes and all their properties fine, there does not seem to have an error to it.

Can anyone help?

Thanks.

.textField {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-color: #ccc;
border-width: 1px;
border-style: solid;
padding: 2px 1px 2px 1px;
*padding: 2px 1px 2px 1px;
}

textarea {
font-family: $!{preferences.GetPreference('WebAccess.Fonts.Normal.Family')}, Segoe UI, Corbel, Verdana, Arial, Helvetica, sans-serif;
font-size: $!{preferences.GetPreference('WebAccess.Fonts.Normal.Size')}pt;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: solid 1px #ccc;
}


.editor_toolbar {
background-color: #eee;
-moz-border-radius-topright: 3px;
-moz-border-radius-topleft: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
border: solid 1px #ccc;
border-bottom: none;
margin-right:1px;
height: 58px;
vertical-align: bottom;
}

.editor_toolbar .button {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
height: 18px;
width: 18px;
text-indent: -100em;
cursor: pointer;
float: left;
margin-top: 1px;
margin-left: 1px;
vertical-align: bottom;
border: solid 1px #eee;
}


.editor_toolbar .button.bold {
background: #eee url('../content/images/grey-html-toolbar.gif') no-repeat scroll 0 0;
}
.editor_toolbar .button.underline {
background: #eee url('../content/images/grey-html-toolbar.gif') no-repeat scroll -32px 0;
}
.editor_toolbar .button.italic {
background: #eee url('../content/images/grey-html-toolbar.gif') no-repeat scroll -16px 0;
}
.editor_toolbar .button.insertunorderedlist {
background: #eee url('../content/images/grey-html-toolbar.gif') no-repeat scroll -64px 0;
}
.editor_toolbar .button.insertorderedlist {
background: #eee url('../content/images/grey-html-toolbar.gif') no-repeat scroll -48px 0;
}
.editor_toolbar .button.alignselectionleft {
background: #eee url('../content/images/grey-html-toolbar.gif') no-repeat scroll -80px 0;
}
.editor_toolbar .button.alignselectioncenter {
background: #eee url('../content/images/grey-html-toolbar.gif') no-repeat scroll -96px 0;
}
.editor_toolbar .button.alignselectionright {
background: #eee url('../content/images/grey-html-toolbar.gif') no-repeat scroll -112px 0;
}
.editor_toolbar .button.alignSelected {
background: #eee url('../content/images/grey-html-toolbar.gif') no-repeat scroll -128px 0;
}

Select all Open in new window