Kireatic

As some of you may well know, I am a web-based coder, as I style my job description. Translated, this entails both the functional bit of websites, the stuff that makes it work, and the pretty bit, the templates, as well as databases and a smattering of other technologies to compliment the two.

This blog isn’t using one of my designs – I rather like this one, and I’m too lazy to code one for myself, where I neither get paid nor recognized for my efforts – but my most recent piece of WordPress templating is the new website for Welcome to Flavour Country, a gaming clan. I’ve been coding the site as if it was being constructed from the ground up, then inserting WordPress functions to give it functionality. When I design a website from scratch in this fashion, I create a mockup in Photoshop first before coding the CSS to match it pixel to pixel. However, it is at this stage you reach the bane of any web designers life. What happens on the users browser.

The main browsers currently in use are:

What I call IE-Current, the semi-autoupdating version of Internet Explorer which is basically IE7+. Saves me remembering it’s version number.

Firefox

Safari

Chrome

Opera

and IE6.

Each of these browsers, for the most part, has it’s own quirks in the way they render CSS, which is to be expected, and for many things, fine. For example, all of the above render text – standard text, fully defined using CSS with as many parameters as possible – slightly differently. So, you don’t expect text to be an exact science, fine. But what about containers?

Now this is where it gets annoying. WtFC, for example, is 1280px wide, this being the resolution of the majority of the sites visitors, with a minority with higher resolutions, and less than 1% of traffic with smaller – and that’s mobile browsers mostly, and will get it’s own design later on. So, the container needs to be set to “width: 1280px”. Technically yes, so any browser which is sitting in a window of 1280px or wider will not have horizonal scrollers.
IE-Current, Firefox and Opera all do. I can tell you why, it involves the sidebars and their positioning and padding (no, margins aren’t an option). With the containers overflow hidden however, this should be ignored…and yet the scrollers persist. Currently there’s a temporary fix involving max-width, but this shouldn’t be the case. Width is an ABSOLUTE, especially when defined in pixels and applied to a DIV element. The quirks of a browser shouldn’t cause that. Now, it’s caused by what is an overlap of CSS rules, but the container should override all underlying rules with the correct overflow setting. However, only Chrome and Safari do this correctly. Inexcusable, the rest of you. This leads to much browser jumping just to get the basics right – and I haven’t started on the next issue yet.

Say hello to @font-face. Most CSS coding applications won’t recognize this tag – and with fair reason, it’s a CSS3 tag. So, I didn’t expect many browsers to support it. What it does is downloads a custom font to the user, allowing you to use any font you can legally distribute on your website, a long desired feature of the web. Much to my surprise, all current browsers supported custom fonts, even IE-6! However, here’s the rub. While Firefox, Chrome, Safari and Opera supported font-face, IE in all it’s incarnations wanted a custom browser only tag, and for the font to be in a propretery Microsoft format. Hahahahano, Microsoft. This was annoying, so I opted to set Veranda, the closest web-font to what the other browsers would be seeing, as IE’s font. Annoying.

But IE wasn’t the only one doing this ‘custom tag’. Another CSS3 feature is border-radius. It’s wonderful, it allows for rounded corners without images. But it only works in Chrome when tested. A further 3 additional tags gave functionality to most of the other browsers, except IE-Current and 6, who don’t “do” rounded corners.

This repeats itself a number of times, including numerous instances of CSS2 tags (supposedly the current standard). I appreciate the need to create tags when the don’t exist, guys. But firstly, some inter-browser cooperation would be good. Designers won’t use a tag that only works in ONE browser. Secondly, when the tag DOES appear in CSS, support it. Don’t ignore it because you have your own.

And IE-Current users, change browser. It’s still got a few security holes, and it doesn’t render right SO often. Far to many hacks required, I’m just not supporting IE on a few of my sites, WtFC included.

IE6 users, get off the Internet, now.

Well done Google for Chrome. Almost there. Just sort out extensions, and keep on keeping up with CSS3.

Same to you Apple for Safari, but less ninja’ing it onto PC’s please.

Mozilla, you need to fix your tags. Firefox is a great browser, but it needs a clean out. Getting some depreciated tags in there now (hint rounded corners hint).

Opera, advertise some more.

Microsoft. Bugger off!