The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Chat room Rank Badge in IE

2 posters

Go down

Solved Chat room Rank Badge in IE

Post by Ape September 13th 2015, 11:10 pm

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
Chat room Rank Badge in IE Captur25

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

APE


Chat room Rank Badge in IE Left1212Chat room Rank Badge in IE Center11Chat room Rank Badge in IE Right112
Chat room Rank Badge in IE Ape_b110
Chat room Rank Badge in IE Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19417
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur September 14th 2015, 6:27 am

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
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ape September 14th 2015, 10:42 pm

@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


Chat room Rank Badge in IE Left1212Chat room Rank Badge in IE Center11Chat room Rank Badge in IE Right112
Chat room Rank Badge in IE Ape_b110
Chat room Rank Badge in IE Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19417
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur September 14th 2015, 11:44 pm

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... blackeye
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ape September 14th 2015, 11:45 pm

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 Wink


Chat room Rank Badge in IE Left1212Chat room Rank Badge in IE Center11Chat room Rank Badge in IE Right112
Chat room Rank Badge in IE Ape_b110
Chat room Rank Badge in IE Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19417
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur September 15th 2015, 12:07 am

@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 ) Rolling Eyes Tonight I'll sleep like a baby though.. Razz
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ape September 15th 2015, 12:15 am

Nope still the same
with the code you gave the theme looks like
Chat room Rank Badge in IE Captur27

with old code it looks like
Chat room Rank Badge in IE Captur28


Chat room Rank Badge in IE Left1212Chat room Rank Badge in IE Center11Chat room Rank Badge in IE Right112
Chat room Rank Badge in IE Ape_b110
Chat room Rank Badge in IE Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19417
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur September 15th 2015, 10:54 am

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ape September 16th 2015, 1:21 am

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 ??


Chat room Rank Badge in IE Left1212Chat room Rank Badge in IE Center11Chat room Rank Badge in IE Right112
Chat room Rank Badge in IE Ape_b110
Chat room Rank Badge in IE Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19417
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ape September 16th 2015, 1:31 am

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



Chat room Rank Badge in IE Left1212Chat room Rank Badge in IE Center11Chat room Rank Badge in IE Right112
Chat room Rank Badge in IE Ape_b110
Chat room Rank Badge in IE Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19417
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur September 16th 2015, 1:34 am

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

Well, I'm glad you figured out the problem ! Chat room Rank Badge in IE 1852325475
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ape September 16th 2015, 3:33 am

just one more thing if you have time lol

how to i center this more so it's more in line as you can see it's sort of up high
Chat room Rank Badge in IE Captur29


Chat room Rank Badge in IE Left1212Chat room Rank Badge in IE Center11Chat room Rank Badge in IE Right112
Chat room Rank Badge in IE Ape_b110
Chat room Rank Badge in IE Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19417
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ape September 18th 2015, 12:32 am



Chat room Rank Badge in IE Left1212Chat room Rank Badge in IE Center11Chat room Rank Badge in IE Right112
Chat room Rank Badge in IE Ape_b110
Chat room Rank Badge in IE Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19417
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur September 18th 2015, 1:08 pm

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

You want the name + text centered vertically, correct ? if so, this CSS should work :
Code:
#chatbox .cb-avatar {
  float:none !important;
  display:inline-block;
}
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ape September 18th 2015, 8:06 pm

it moved the Name and the badge down but the text is not right Sad
Chat room Rank Badge in IE Captur31


Chat room Rank Badge in IE Left1212Chat room Rank Badge in IE Center11Chat room Rank Badge in IE Right112
Chat room Rank Badge in IE Ape_b110
Chat room Rank Badge in IE Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19417
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur September 18th 2015, 8:21 pm

Hmm.. I just noticed but in your icon CSS, try changing bottom :
Code:
vertical-align:Bottom !important;

to middle :
Code:
vertical-align:middle !important;
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ape September 18th 2015, 8:25 pm

Nope that did not change nothing Sad


Chat room Rank Badge in IE Left1212Chat room Rank Badge in IE Center11Chat room Rank Badge in IE Right112
Chat room Rank Badge in IE Ape_b110
Chat room Rank Badge in IE Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19417
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur September 18th 2015, 9:47 pm

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ape September 18th 2015, 11:52 pm

Thats got it thank you

Topic solved and archived


Chat room Rank Badge in IE Left1212Chat room Rank Badge in IE Center11Chat room Rank Badge in IE Right112
Chat room Rank Badge in IE Ape_b110
Chat room Rank Badge in IE Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19417
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum