2004-06-16

Rendering Bugs and My Blog

As I've said before, I refuse to put in special exceptions in my web page for Internet Explorer to render it correctly. Although it's currently by far the most used browser on the Internet, it's several years outdated in many important areas. I don't personally have a problem with not making an effort to support it, because weblogs are about making statements, and that's just what I'm doing.

There is a bit of a problem, however. The other two major browsers — Mozilla and Opera — also have rendering bugs on my site (although to much much lesser degree). And to be fair, I'm not making special exceptions for them either. When web sites are made to conform to browsers and when browsers are made to conform to websites, we run into compatibility problems, and that's the biggest problem on the Internet right now, with Internet Explorer. Because everyone tried to conform to IE, Microsoft was able to get away with making up new (and in most cases, useless) webpage features that no other browser had, nor intended to support. Most of these features already existed, but had different names or ways to use them. By creating its own standards, Internet Explorer was simply rallying up an army of websites that just didn't work in real browsers. This is good for Microsoft, but bad for the Internet. They got so secure with their popularity that they decided it wasn't worth the effort to keep the browser up-to-date with the real standards. Without standards, you run into compatibility problems, and some things simply won't work in whatever tool you're using.

I kind of went off topic there. Anyway, the point that I'm trying to make is that websites and browsers should conform to standards, without bias for each other. Websites should be made so that they would render correctly in a browser that has 100% compliance with the standards, and browsers should render websites exactly how the World Wide Web Consortium says that they should be rendered. That way, everything works.

Unfortunately, when you get to something as large and complex as the Internet, it is extremely difficult, if not realistically impossible, to support the standards 100%. The rendering engine will pretty much always have bugs. Mozilla and Opera both have bugs that affect this weblog.

Mozilla seems to occasionally get some positions off by a pixel or two. If you look at the sidebar, sometimes the red horizontal lines that are supposed to appear beneath each list of links doesn't appear. Now hover over the links. Sometimes the grey highlight extends vertically one pixel too far, or doesn't extend far enough. Sometimes when you hover over the last link in a list, the highlight will cover up the red line. Look by the posted by text at the bottom of each blog post. The border below it should be two pixels, but sometimes it's only one. These are the results of a bug in Mozilla or its Gecko rendering engine, not the site itself. It doesn't render my site as the standards say it should be rendered, so I'm not making any exception for it.

In Opera, hover over a link in the sidebar. You will notice that the content below it shifts downward, and that the highlight box has a two-pixel-thick bottom border. Now move your mouse directly from that link to the link above it. The content goes back up. Move your mouse off to the side, and you'll notice that the border between the two links is gone. Here's what seems to be the problem: All but the first link in each list has a top border. When you hover over a link, it should give itself a border all around. Because this would normally produce a double bottom border and also be a pixel taller than before, I made it so that the link immediately after a hovered-over sibling would lose its top border while its sibling is being hovered over. This is done with CSS, not scripting, so the browser is the one that makes the actual modifications to the page display as the events happen. However, when you hover over a link, Opera knows that that link may need rerendering, but doesn't even think about the next sibling, so it stays the same. When you move your mouse up to the previous one, it does update the link after the hovered-over one, because it actually received an event (it lost hover). At that time, it sees that it is the next sibling of a hovered-over link, so it removes its border. However, when you move your mouse out to the side, it doesn't realize that it's supposed to be updated again, and so it doesn't get its border back. Note that hovering over it causes it to update again, so you can just move your mouse down the list of links and back out and it'll appear correct again.

Until these browser bugs are fixed, you'll just have to deal with them. My site works; it's the browsers that don't.

0 comments

Post new comment

Comment moderation policy: Your comment will be reviewed before it is added to the site. This is in response to spam and other forms of abuse. I gladly accept comments containing criticism as long as the language is clean.

This weblog is powered by Blogger.