Sometimes the simplest items end up making the best blog posts. Lately I’ve really started to enjoy giving a mouse-over effect to each row in a table. (This could be in part because I frequently include links in my tables.) This practice certainly can’t replace the techniques that a web designer uses to make tables legible when the mouse pointer is off on some other part of the screen, but I think of it as a nice little extra.
Today I came across a CSS bug that I had never seen before. Apparently, in IE6/7 there are circumstances under which certain form elements will inherit the margin of the tag they appear in. In my case, I had a contact form where each element was inside a paragraph tag with a left margin of 85 pixels and a grey background. In Firefox and Opera, the form appeared correctly, but here’s how things looked in IE:
Fortunately there is a thread at Webmaster World that explains the phenomenon pretty well, and has several ways to address the problem. I was able to get all browsers to render the page like this:
I’ve been building sites long enough that it isn’t very often I come across a CSS glitch that I’ve never seen before.
For my money, a standardista in the web design arena is someone who will let nothing stand in the way of having perfectly compliant code. It should strictly validate as HTML (or XHTML). Any CSS files should also validate. If the customer wants or would benefit from a feature that can’t be accomplished in a standards-compliant manner, than the standardista will refuse to create it. Sort of flies in the face of the customer-is-always-right school of thought, doesn’t it?
I like being able to call Javascript code from a link. It offers great flexibility in designing an interactive user experience. Sure I could restrict myself to the events associated with form elements, but sometimes interaction with a link is the best solution. Of course with form elements we understand exactly how the onClick event works, but a link already has its own version of the onClick event built in. So what exactly happens when our link tag has both onClick and href attributes?
As web designers, we are stuck with the fact that not every browser resolves style sheets the same way. Regardless we are expected to come up with code that appears and functions the same whether visitors are using IE, Firefox, Netscape, Opera, Safari, or the next hot browser we don’t even know about yet.
The discrepancies between Internet Explorer and the rest of the pack seem to generate the most wailing and gnashing of teeth. The good news is that the imminent release of IE7 addresses many of the problems of its predecessors. It still isn’t strictly compliant with the CSS standard (but that can be said of other major browsers, as well).
In retrospect, I’m amazed how many years I went as a web designer without understanding a single thing about doctype tags. I’d seen them when I looked at the source code for other pages. Dreamweaver included one every time I created a new file. Here was a piece of code Macromedia felt important enough to include by default on every html document. What was it for? I’m a little chagrined to say I just didn’t care. What mattered to me was my page worked in my browser of choice. In the other major browsers it looked and functioned more or less the same. Over time that solution started to become less satisfying.
The Internet is truly miraculous. By defining a standard collection of tags and specifying how each should behave, the community ensured that all third-party browsers would render a web site exactly the same. Um… yeah.
I’ll go along with the part about the Internet being miraculous, but browsers rendering web sites the same? There isn’t even a universal consensus on HTML tags and their attributes. Don’t even think about Javascript or CSS. (Yes, IE6, I’m looking at you.)
What’s the answer? You could just throw blinking red text at the top of your site that reads, “This site is best viewed in MyFavoriteBrowser. Download it now!” Well, unless your product or service is directly related to a particular browser, this reeks of incompetence. It looks like you don’t have the chops to design a site that will operate correctly in all the major modern browsers.
XHTML •
CSS •
Theme: Calm Earth by The Web Shop •
WordPress.com •
RSS Feed
