THE PROBLEM:Put simply: Snipe-Hunt development focuses primarily around Chrome now, so some browsers (namely Opera and IE) don't render the new design properly. In other words, IT'S BROKE.
Put technically: Snipe-Hunt employs a lot of absolute positioning in combination with floats. Whether it's Opera or Chrome handling this (im)properly, I don't know. My personal bias leans towards Opera doing it properly, since it's been known to support standards to the degree of breaking various websites over its lifetime (DON'T I KNOW IT). But either way, what you end up with is a bunch of improperly positioned objects.
You also don't get rounded corners, because no browser properly supports the CSS3 'border-radius' style at the moment to my knowledge. Firefox implemented their own proprietary style for it for the time being (-moz-border-radius), as did Apple (-webkit-border-radius). Chrome uses the same rendering engine as Safari, so they of course share those proprietary extensions. Opera on the other hand doesn't tend to implement proprietary extensions due to their (arguably anal) philosophy of strict standards support, so they wait until they can properly implement an official standard rather than inventing yet another non-standard style for people to learn. And then we have IE, which despite IE8 being much better than its predecessors, is still rather lacking in various modern features.
THE SOLUTION: (for Opera, at least)
Remove some unnecessary absolute positioning, pad some margins, remove some scrollbars, and stick some SVG imagery in to mimic rounded corners. You end up with a pretty nice solution, and arguably in some cases nicer-looking than Chrome's version.
See for yourself.Download the UserJS fix for Opera.Note that this only fixes the news page, not the rest of the site. But the only other page which is significantly broken in Opera is the Staff page, and how often are you gonna look at that? The rest of the site simply won't have rounded edges, for the most part. At least, until I possibly take a notion to fix that too during some episode of boredom.
Installing these kinds of scripts is easy, in case you've never done it. In Opera, go to Tools, Preferences. From there, go to the Advanced tab, then to the Content section, and click the Javascript Options button. At the bottom you'll see a form for "User Javascript Files". Set this to wherever you want to store your scripts. I set it to "C:\UserJS" personally. Then save the .js script into that directory, and you should be good to go.
BLABBING:The SVG part is really the biggest reason I fooled with this in the first place, because I've wanted to experiment with embedding them into a UserJS script for a while. I also wanted to experiment with methods for easier rounded corners. Both of which I might eventually use in my
Fychan add-on for 4chan.
SVG images are "Scalable Vector Graphics", which are basically XML files with specifications for shapes and patterns and such. As their name implies, they should appear the same at any size, as opposed to traditional bitmap-style images. Their support across browsers is still pretty limited, but once more browsers catch on, it's going to be a pretty awesome alternative to using Flash for certain things. What I did in this case was create a rectangular image with rounded corners, and specify that as the background image for the news entry DIV tags.
As you can tell in the
preview screenshot, the SVG corners are much more fluid than Chrome's proprietary border-radius method. Firefox's are pretty good too though. I just guesstimated at appropriate border width when making those SVGs for Opera, because it doesn't work quite the same as simply specifying a radius like in the CSS tag.
Ironically, the two most broken browsers in this case, Opera and IE, are apparently the only two which support scrollbar decoration. So, with the fix applied, Opera arguably ends up looking best since the scroll bars blend in nicely. I don't think I realized before that Chome and Firefox wouldn't let you do that. I coulda sworn Firefox used to. Oh well.
So yeah. I learned a trick, Snipe-Hunt got a fix, and Fybertech got a post about rounded corner workarounds that might benefit somebody else digging through Google. Not bad for an hour's work!
