asked on

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

scrathcyboy

"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.

nanharbison

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/

CarlosScheidecker

ASKER

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.

ASKER CERTIFIED SOLUTION

CarlosScheidecker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial