Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 Differences in positioning - chrome vs firefox

My co-admin is using Firefox and has a lot of visual issues with the site that I cannot seem to explain.

I first discovered that Firefox was rendering custom web fonts to be bolder and larger than they normally are, which seems to be a common issue that Firefox has as each browser will render them differently.

Now it seems that the positioning I'm using for images works in Google Chrome (my browser) as intended, but is shifted by a few pixels in Firefox, which causes an issue with the display.

Chrome (working as intended):
Firefox (not working as intended):

I haven't touched Firefox in years but nonetheless, I want to have my site as cross-compatible as possible. Is there any fix for this that anyone knows about? It's not a jcink related issue per say but I'm at a loss here.

Quick Edit: I'm using the following code in my CSS:

@-moz-document url-prefix() {
   .brdimg-6, brdimg-7{

It's a good fix for when the site detects that someone is running Firefox, but really is there no better fix?

This post has been edited by The Leviathan: Jun 6 2018, 11:43 AM

And I stood upon the sand of the sea, and saw a beast rise up out of the sea, having seven heads and ten horns, and upon his horns ten crowns, and upon his heads the name of blasphemy. - Revelation 13:1-18

blood red. snow white.
Cross-browser issues are complicated, and Chrome has a habit of making it slightly worse. Different browsers tends to cycle in and out of being this way, but last I looked into it Chrome tries to 'fix' a certain amount of broken code - it's slightly more forgiving about certain things, and when we code in Chrome we get used to those things being right, even if they technically aren't. On top of that there are literally just different bugs and implementations certain browsers have, and it leads to a lot of frustration and confusion.

Long story short, using things like this to target the browser tend to be the most effective method, right after the method checking in multiple browsers as the skin is designed - though let me be completely honest, and admit that I forget to do that and have these issues all the time.

That being said, in terms of things like 'this browser tends to make most fonts bolder' I wouldn't stress about it too much, given that people using the browser are probably used to that behavior even if it feels out of place to people who don't use the browser.

tl;dr Yes, there's a good chance that's the best fix.

This post has been edited by owl: Jun 6 2018, 04:00 PM

Kindly do not contact me on Discord or PM me for support.

user posted image
There is a suggestion I can make that will ensure you coding is a little more flexible and much easier to work with overall. I suggest looking into flex tables. You've got a lot of paragraph tags in use for spacing and nothing else. You've got floats and margins as well. Using flexbox you'll be able to pretty much do everything much more neatly. I also recommend not using paragraph tags as spacers and instead going for margins on the tags themselves.
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll