We help IT Professionals succeed at work.

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;
}

Open in new window

Comment
Watch Question

"wysihat.js which is a HTML editor built on top of Prototype"
why use such a niche platform?  Other people using other editors have no problem with CSS.

I would start by removing ALL CSS features starting with a -ve sign.  These were for older mozilla issues and now that IE has been supposedly "fixed" to be more compatible, these might be giving trouble.

You might comment out or remove all the editor_toolbar code too.  The rest looks OK.  Run it stripped down without those potential problems and see how it works.  Of course, save the old file to restore to.
Internet Explorer has different rules for setting default padding and margins than  standards compliant browsers, so you need to use a conditional style sheet for each version of IE that users might be using.
A very good article is here:
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
 Read especially option number 3, Use conditional comments.

Just be sure that in your list of style sheets, the IE CSS is listed last since if there are multiple styles for the same element, browsers will obey the last one they run into.
You only need to include the elements that need to be changed in the conditional style sheet. It is very effective!

Here is another very helpful tutorial about this:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Author

Commented:
Guys, thanks for the replies. I do not like wysihat.js too but I have to work with it due to a determination from the architects. Hence, have no choice.
The solution to the problem was not CSS. It was the fact that the wysihat code has problems with IE8.

Hence, adding <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> within the <head> tag of the page fixes the issue.