Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

I have a problem with my CSS code. Buttons look differently in IE7 and FF

Here are my buttons:
enter image description here

Here is my code:

.list-common-wrapper .button-unfixed .button-unfixed-normal[disabled] .button-background, #id-chart-editor-active-event .button-unfixed .button-unfixed-normal[disabled] .button-background, .three-lists .button-unfixed .button-unfixed-normal[disabled] .button-background {
    background: url("../images/button/btn_var_bg.gif") no-repeat scroll left -120px transparent;
    color: #777777;
    cursor: default;
    text-decoration: none;
}
list.css (line 122)
.list-common-wrapper .button-unfixed .button-unfixed-normal .button-background, #id-chart-editor-active-event .button-unfixed .button-unfixed-normal .button-background, #id-profile-editor-move-attributes-buttons .button-unfixed .button-unfixed-normal .button-background {
    color: #333333;
    cursor: pointer;
}
list.css (line 132)
.button-unfixed-normal .button-background {
    background: url("../images/button/btn_var_bg.gif") no-repeat scroll left 0 transparent;
    display: block;
    padding: 2px 8px 4px 12px;
}
button.css (line 111)
Inherited froma.button-unfixed-def #
.list-common-wrapper .button-unfixed .button-unfixed-normal[disabled], #id-chart-editor-active-event .button-unfixed .button-unfixed-normal[disabled], #id-profile-editor-move-attributes-buttons .button-unfixed .button-unfixed-normal[disabled] {
    color: #777777;
    cursor: default;
    text-decoration: none;
}
list.css (line 142)
.list-common-wrapper .button-unfixed .button-unfixed-def {
    font-size: 12px;
    line-height: 130%;
}
list.css (line 163)
.button-unfixed .button-unfixed-normal {
    color: #333333;
    text-decoration: none;
}
button.css (line 104)
.button-unfixed .button-unfixed-def {
    cursor: default;
    font-size: 12px;
    line-height: 130%;
}
button.css (line 93)
a {
    color: #175DB5;
    text-decoration: underline;
}

It shows that the color #777777 is displayed differently in IE7 and FF (look at the arrow):

share|improve this question
2  
You already asked this question in SO and it would be nice if you show your working code because it could be only IE-7 issue. –  Jack Apr 26 '12 at 6:18
    
couple of questions from my side how your btn_var_bg.gif looks,the given color:#777777 supposed to be the text color. and please share a url so we can see exactly what's happening –  Jack Apr 26 '12 at 6:23
1  
We need to see the HTML and why oh why are you a) listing line numbers and b) listing them in a seemingly random order? (Also, this is a code question...not graphic design...wrong site) –  DA01 Apr 26 '12 at 6:39
    
Please do not cross-post between stack exchange sites. –  Farray Apr 26 '12 at 15:54
add comment

closed as off topic by Jack, DA01, Joonas, Farray Apr 26 '12 at 15:52

Questions on Graphic Design Stack Exchange are expected to relate to graphic design within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

Firefox is a color managed browser. Internet Explorer is not.

There's nothing you can do to force IE to be color managed. You can merely complain to Microsoft that their browser (like always) is behind the times.

You can try removing the color profile (or convert to sRGB) for the button background. The reason you're getting a mismatch is IE is not managing the image color, so it fails to match the standard hex color.

share|improve this answer
1  
"their browser...is behind the times". Note that he is asking about a 6 year old browser, which by definition is behind the times. Edit: Just checked... FF didn't support color profiles until FF3, which was released 2 years after IE7. No excuses for IE8, but the question specifically mentions IE7. –  Farray Apr 26 '12 at 5:06
    
Yeah there was no mention of the FF version and it's now at 12... so.... ???? :) –  Scott Apr 26 '12 at 5:33
    
"Convert to sRGB" — That won't help, as the values in the file will be destructively converted to sRGB. Colour management only works if the file contains a profile and the viewer recognises and uses the profile. –  Marc Edwards Apr 27 '12 at 1:32
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.