Firefox/Safari broke my thread list [Resolved]

[Gremalkyn]

Site in question: here.

Issue:
For some reason in Firefox, the thread list displays at half the size it should. -Image-

In Chrome it's fine.  -Image-

I have tested several parts of my CSS to see if I could diagnose the issue myself, and googled several different search criteria to see if I could find anyone with a similar problem (and quite possibly, solution) to my issue, but I have had no luck.  So now I turn to the folks here. 

Why is Firefox squishing my thread list and how do I fix it? .-.

[Brian]

Looks fine to me in the latest version of Firefox!

[Gremalkyn]

Thanks for replying, Brian.

Just downloaded a newer version of Firefox, 28.0. Still having trouble.

I'm running on a Mac late-2009 laptop, OS. Maverics. I don't know if those specifications help, but I figured I'd go ahead and toss them out since the issue, at least on this end, remains.

If it's a troublesome fix, though, I can ask my users to download a different web browser if the one they have is giving them issues... I would just rather fix as much as possible for the audience if it's a do-able thing. (I guess I need help figuring out the issue then, if it's not global firefox, because I've no idea what's making it do that. Could it be how the site wrapper reads?)

[Brian]

Like I said, I don't seem to be having the issue so chances are it's specific to your PC.

Do you still have the issue in private browsing mode? (Ctrl+Shift+P)

[Gremalkyn]

You may have hinted at it being PC-specific, but that information was never displayed in your previous statement. For someone who's a self-taught amateur coder-hobbyist, 'it looks fine for me' doesn't equate to 'it's probably an issue stemming from your computer/browser combo'. I know that might come off rather ditzy, but I'm an analytical individual and thus need to be spoken to very specifically. Bear with me though, I can do this. xD

On the side of addressing this: checked the forum out in Firefox Private Browsing and the issue persists. If it is an issue with my computer type and browser, it will likely affect more users than just me, which is why I want to get it addressed. If it can be, and I think it can be?

A question: doesn't the coding for the forum itself have to tell the computer / browser how to read the objects / tables on the forum?

Additionally, the thread list on my other test site doesn't get dwarfed by Firefox on this computer. All I know is that it's not all Proboards; really so far it's just been this one test site where I've discovered the thread list squishing problem.

[Brian]

The "like I said" portion of my post was me referring only to the fact that it looked fine on my end, followed by me stating for the first time that it could be specific to your own computer. Sorry if it sounded like I was implying both were in my previous post (though I'm not sure that matters much).

The forum's CSS tells the browser how to render them, but different browsers render things in different ways.

It looks like the browser is simply resizing the content area of the container. I resized it manually with Firefox's dev console and managed to make it look similar to your screenshot. Have you added anything at all recently that coincided with this happening?

[Gremalkyn]

It's okay. ^_^ I'm not offended, it just confused me for a second.

As for recent additions through CSS - I've added a bunch of stuff to the site itself, but this has been an issue for awhile. I had put it on a list of things to request help on once I had worked on as much of the site myself as possible. And then I moved on to the list of issues to address, eventually I came to the part in the list where this issue was examined.

I have added a post break with images, header and footer images to several title bars, added code for special mini-profiles and more, but I don't remember adding anything to the CSS that had changed the pre-defined parameters of the thread list itself. Nothing like 'oh look, I added this and it broke it'... but then I've bounced between Chrome and Firefox so much I could've added something in Chrome without knowing it bugged Firefox out.

Thanks for taking the time to look into and reply to this. I hope your evening goes well! (I'm going to be away a few hours, but will check back when I return.)

[Brian]

Unfortunately I don't have a Mac to test this with, so I have to go purely off of what I see in the developer console when comparing both forums and try narrowing it down based on where the problem could hypothetically exist in any given situation.

If you were to create a new theme on the problem forum and switch to that theme does the issue still exist on that new theme?

[Gremalkyn]

Apologies, the last few days have been a bit different than I expected.

I created a new version to test, as advised.  It is set as the default skin presently. The issue doesn't exist on that theme.

Further, while I never use Safari, I have it installed on my computer. I decided to test it there, too.  The thread list shrinking issue on my main skin appears there too. From my observation it seems that the problem is an issue that Chrome seems to overlook, but other browsers catch it.

Additionally, I have saved a theme that is free of the issue and the main theme to separate text files.  I've been trying to compare the two and address the issue myself, but I have not been able to pinpoint the issue just yet. (I must admit that my coding knowledge is limited.)

-------Edit-------

I've been fidgeting around with this further.  I imported several things to the test theme (though I'm scared I'm going to miss/break something I've spent the last few months working on.) That fear aside I've, I've gone to copying the code and pasting it section by section to see if I could eventually narrow down what the issue was. 

Eventually I was able to narrow down something, but not quite what I was looking for.  Interestingly enough  "@content_area_links_font: inherit;" was part of the problem.  I changed that to: "@content_area_links_font: @content_area_text_font;" and it seems to have fixed part of the issue on the new/test theme. (Visually it stopped squishing my thread list... for some reason). However, that doesn't make sense to me that it would be the main problem.

Still, by logic it seemed it could work in reverse, and I could change "@content_area_links_font: inherit;" to "@content_area_links_font: @content_area_text_font;" on my main skin and get the same non-thread-list-dwarfing result. It didn't work.

I went through the rest of the CSS and can't seem to find anything else out. After getting the test version looking close to the main version (since my test theme is still without dwarfing) I tried to copy everything over from the test to the main to see if that would un-squish.  That didn't work either, and the thread list on the main skin remains squished. 

(I believe that's hinting at the plausibility of the CSS coding in conjunction with something else causing this dwarfing of the threads; that's just an assumption based on results however.)

But, I thought I'd post my findings thus far.

[Gremalkyn]

I don't intend to 'necro' old threads, however this is something I've been working on in my spare time for a few months. I just found the answer. It was a simple fix, and I wanted to post this for people who've struggled with similar issues to mine. This is the fix I found:

I located this line (for me it was around 536):
@content_area_links_font: inherit;

I changed it to:
@content_area_links_font: 10pt verdana;

It worked. I hope anyone else who's been struggling with this issue and came across my thread on google will be able to use this same fix.

Kind regards to the Proboards community. =]
-Gremalkyn