MyBB Community Forums

Hi guy's,

Just did a whole set of emoticons personalize for my forum and they are a tad bigger at 28x28 px and i am trying to figure how to centre them with the text.
I have tried a few html modifications to margin and align and nothing seem to change the alignment, maybe i was on the wrong template!

open this /jscripts/sceditor/styles/jquery.sceditor.mybb.css
and find image css like this

img {
  max-width: 100%;
}

and add vertical-align: middle;  like this

img {
  max-width: 100%;
  vertical-align: middle;
}

Unfortunately it didn't work maybe there is another css template to locate?

EDIT: I have modify the img code with the vertical align; in all css in styles folder and so far nothing work.

---

OK i was able to make this work but only in firefox web dev tools and as you can see on the screen capture the emoticon is perfectly align with the text and i have already change this jquery.sceditor.mybb.css with the correct code in css but it doesn't work so something must be overriding this so any clue?

---

Last thing i have tried was to make a global stylesheet for the theme with the following lines and still no luck and i cannot figure why it's not working!

img {
  max-width: 100%;
  vertical-align: middle;
}

---

OK i am trying like a nut to troubleshoot this issue and i found out that it is working with Chrome since i made an account and i made a post and the emoticon was perfectly align but in Firefox it is not align!

Any clue about why this is only working in Chrome and not Firefox?

---

OK i finally figure it out after spending 2 hr reading and it was the darn firefox cache that need to be cleared! This was misleading since there is a real issue with vertical align in firefox that don't show in other browsers an i went on a reading marathon for nothing!

Thank Mostafa i have mark your post as the solution.

Oh well now after each change i will take the habit to clear firefox cache!

Regards Peter

Local cache can bite you.  I'd get in the habit of hard refreshing after changes.

(2022-11-17, 11:07 AM)nixer55 Wrote: [ -> ]Local cache can bite you.  I'd get in the habit of hard refreshing after changes.

Yeah it's a real bummer!

Don't forget a smilie (img) will always break the line-height of text, regardless of the vertical alignment - as long as the img do not fit the absolute font size in px.
Better use img-smilies with an equal size to your font-size to keep the height balance.
Best use SVG with height:1em

For just a little visual eye candy of smilies in text lines, CSS vertical-align is simple and best practise.

[ETS]

(2022-11-17, 11:21 PM)[ExiTuS] Wrote: [ -> ]Don't forget a smilie (img) will always break the line-height of text, regardless of the vertical alignment - as long as the img do not fit the absolute font size in px.
Better use img-smilies with an equal size to your font-size to keep the height balance.
Best use SVG with height:1em

For just a little visual eye candy of smilies in text lines, CSS vertical-align is simple and best practise.

[ETS]

Thank for the tips and i made them all as .svg since they look good at any size.

Regards Peter