The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Chat room Rank Badge in IE

View previous topic View next topic Go down

Solved Chat room Rank Badge in IE

Post by APE on 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


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

APE




APE
Manager
Manager

Male Posts : 8622
Reputation : 754
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by APE on 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




APE
Manager
Manager

Male Posts : 8622
Reputation : 754
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by APE on 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




APE
Manager
Manager

Male Posts : 8622
Reputation : 754
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by APE on September 15th 2015, 12:15 am

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


with old code it looks like




APE
Manager
Manager

Male Posts : 8622
Reputation : 754
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by APE on 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 ??




APE
Manager
Manager

Male Posts : 8622
Reputation : 754
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by APE on 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





APE
Manager
Manager

Male Posts : 8622
Reputation : 754
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur on 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 !

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by APE on 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




APE
Manager
Manager

Male Posts : 8622
Reputation : 754
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by APE on September 18th 2015, 12:32 am





APE
Manager
Manager

Male Posts : 8622
Reputation : 754
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by APE on September 18th 2015, 8:06 pm

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




APE
Manager
Manager

Male Posts : 8622
Reputation : 754
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by APE on September 18th 2015, 8:25 pm

Nope that did not change nothing Sad




APE
Manager
Manager

Male Posts : 8622
Reputation : 754
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chat room Rank Badge in IE

Post by APE on September 18th 2015, 11:52 pm

Thats got it thank you

Topic solved and archived




APE
Manager
Manager

Male Posts : 8622
Reputation : 754
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

View previous topic View next topic Back to top


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