Chat room Rank Badge in IE

I have this code for ranks in the chat box and all works well all but in IE the code leaves out the icon and gives a space where it should be.

Code:

.user[style="color:#FF0000"] span:before, #chatbox_members span[style="color:#FF0000"] span:before {
  content:url(http://i722.photobucket.com/albums/ww222/Apechat/1a_1.png)!important;
  margin-left:-16px !important;
  vertical-align: Bottom!important;
}
.user[style="color:#993A0E"] span:before, #chatbox_members span[style="color:#993A0E"] span:before {
  content:url(http://i722.photobucket.com/albums/ww222/Apechat/vqg1.png)!important;
  margin-left:-16px !important;
  vertical-align:Bottom !important;
}

What am i Missing to get this code to work in IE ??

This is what it should look like


much thanks to any one that can help me on this one

APE

Hey @Ape,

This would come down to IE being special ; Instead of keeping the colors in the attributes as they were authored, IE likes to convert them to RGB. So if you really want it to work on IE, you need to include another set of selectors for your groups colors in RGB format :

Code:

user[style="color:#FF0000"] span:before, #chatbox_members span[style="color:#FF0000"] span:before,
.user[style*="rgb(255, 0, 0)"] span:before, #chatbox_members span[style*="rgb(255, 0, 0)"]  span:before {
  content:url(http://i722.photobucket.com/albums/ww222/Apechat/1a_1.png)!important;
  margin-left:-16px !important;
  vertical-align: Bottom!important;
}

.user[style="color:#993A0E"] span:before, #chatbox_members span[style="color:#993A0E"] span:before,
.user[style*="rgb(153, 58, 14)"] span:before, #chatbox_members span[style*="rgb(153, 58, 14)"] span:before {
  content:url(http://i722.photobucket.com/albums/ww222/Apechat/vqg1.png)!important;
  margin-left:-16px !important;
  vertical-align:Bottom !important;
}

This should help if you have anymore groups : http://hex.colorrrs.com/

Also, I recommend just doing this for IE :

Code:

[style*="rgb(153, 58, 14)"]

The asterisk means "contains" so it only looks for the color value instead of a whole match.

@Ange Tuteur the code you gave is not working it messes up the forum skin. i think something is missing but i can't work it out lol

Hum.. I can't figure it out ; the first code box looks valid. You copied it directly, yes ? I might need to take a closer look...

do you want an admin account to look it over ? i added the code as it was here and it made the full CSS system crash i will add it now so you can see

@Ape upon further inspection I was missing a decimal on the first class ( .user ) try now :

Code:

.user[style="color:#FF0000"] span:before, #chatbox_members span[style="color:#FF0000"] span:before,
.user[style*="rgb(255, 0, 0)"] span:before, #chatbox_members span[style*="rgb(255, 0, 0)"] span:before {
  content:url(http://i722.photobucket.com/albums/ww222/Apechat/1a_1.png)!important;
  margin-left:-16px !important;
  vertical-align: Bottom!important;
}

.user[style="color:#993A0E"] span:before, #chatbox_members span[style="color:#993A0E"] span:before,
.user[style*="rgb(153, 58, 14)"] span:before, #chatbox_members span[style*="rgb(153, 58, 14)"] span:before {
  content:url(http://i722.photobucket.com/albums/ww222/Apechat/vqg1.png)!important;
  margin-left:-16px !important;
  vertical-align:Bottom !important;
}

Sorry I did not take a closer look before. I'm coming down from too much coffee. ( jitters and lack of sleep ) Tonight I'll sleep like a baby though..

Nope still the same
with the code you gave the theme looks like


with old code it looks like

I tested it on my one forum, but I encounter no problems or saw anything that could cause one. It's just an assumption, but is what I gave you putting your sheet over the character limit ? If not that, try changing the placement of the code. e.g. place it somewhere else such as the very top or bottom of your sheet to see if the problem persists.

Nope if i put it at the bottom and use all the code i don't get any icon in the chat at all but as soon as i use my old code it is back again but not in IE maybe i could change the code to a javascript ??

or by rank name not color ??

ok found the problem

I had the forum set to
Optimize your CSS YES i removed the YES and PUT it as No and now its working fine

Thank you @Ange Tuteur

APE wrote:ok found the problem

I had the forum set to
Optimize your CSS YES i removed the YES and PUT it as No and now its working fine

Thank you @Ange Tuteur

Oooh I didn't think of that !! I double checked it here and it said "valid" I thought I was going coucou.

Well, I'm glad you figured out the problem !

Bump @Ange Tuteur

@Ape sorry for the delay, I must've missed this.

You want the name + text centered vertically, correct ? if so, this CSS should work :

Code:

#chatbox .cb-avatar {
  float:none !important;
  display:inline-block;
}

it moved the Name and the badge down but the text is not right

Hmm.. I just noticed but in your icon CSS, try changing bottom :

Code:

vertical-align:Bottom !important;

to middle :

Code:

vertical-align:middle !important;

Nope that did not change nothing

Oooh I think I found what it is. Look for this in your CSS :

Code:

.user-msg .user .chatbox-username, #chatbox_members li .chatbox-username {
  font-size:12px;
margin-left:12px !important;
vertical-align: Bottom!important;
}

and change vertical alignment from Bottom to middle.

Thats got it thank you