Inconsistent Widths Across Browsers

I’m dealing with an interesting issue that appears to have just started this morning. Yesterday, all three browsers looked identical, when displaying my forum. Now, it appears that the table.topic-list element is rendering at two different widths. In Chrome (Mac and Windows) and Safari (Mac), I see a width value of 1284px, but on Firefox (Mac and Windows), I see a width value of 1110px. This is interesting, because the width value is 100%. What makes things even more interesting, is that changing this value, or the width properties of other elements and classes does not appear to make any difference. Here is a summary of the problem:

Safari (Incorrect)

[details=Chrome (Incorrect)]


[/details]

Firefox (Correct)

I am no CSS noob, but I feel like I am missing something super easy or obvious here. If anyone else wants to take a crack at forcing all three browsers to render the same width value on my forum, the link is below:

Yes, I am using a CSS theme, but nowhere in my files do I set the table.topic-list width, nor modify it in any way. I would also be very hesitant to disable my live CSS, as this is pretty jarring for users.

Thoughts? Prayers? Magic?

Seriously, though, if anyone can help, I’m all ears.

It’s caused by the a.onebox element in the excerpt for this topic: http://discuss.topazlabs.com/t/life-s-a-jungle-the-macro-world-of-christian-ziegler/15920 - it’s too long, and it breaks layout.

you can fix by moving that link to a separate line, or adding that domain to the onebox domains.

2 Likes

Nailed it. Man, I was stabbing away for a good hour before I gave up, and I was overlooking that entirely.

I added the domain to the whitelist for the onebox, which seems to have solved the problem. However, I did notice that in order for me to get it to actually convert to the onebox, I had to add a character after the link, and modify the post. It displayed correctly, then I removed the extra character. All still good, after removing that extra character.

This is handy to know, because our users do not link to external sites very often. Any time that I see this issue crop up, I at least know where to look.

Any possible explanation as to why this didn’t have a problem on Firefox?

I think Firefox forces links to wrap despite the CSS rule to not break words in the link. (There should be a fix for this in the Topic Previews plugin, in fact, I’ll look into as I have already contributed to that great plugin.)

3 Likes

Ah, that makes sense. I have been studying FE web stuff, but haven’t dove too deep into the differences between browsers, yet. It looks like I need to quit procrastinating on that, and research some of these quirky differences. I’ve been writing the styles to take the various browsers into consideration, but only because I was told I needed to (lol). I suppose it’s time I found out exactly why.

Thanks for your help. I’m not sure if this issue would occur if I were not using the Topic Previews plugin, as you noted I am employing it on my site. However, it is hard enough to track down (or at least it was to me), that this thread may help someone else.