Raible Designs

What I learned from this weekend's re-design

This past weekend, I re-designed the Content Viewer's interface I wrote for OnPoint Digital. The major motivation behind the mini-project was to make the CV compatible with IE 5.5 and Opera 6 on Linux. It was a nightmare because of the lack of DHTML support in Opera, and also because of IE. So I came to the conclusion that I hate IE, Opera and Safari. My main reason is because they do everything so different - why don't they adhere to standards (Mozilla does)?! It makes web development so much harder when you have to test 5 browsers on 3 platforms. Hopefully I'm a better developer from the experience, and here's a short list of things I learned.

• The CSS rule "position: fixed" doesn't work in IE, but works in all other browsers. This is a great rule, allowing you to pin an element to a location in a page. For instance, you can have a floating menu or footer using this. You can achieve similar functionality in IE using CSS Expressions (a non-standard extension). For instance, to keep a footer at the bottom of a page, you could use something like this:
  
  
  div#footer {
    position: absolute;
    top: expression(document.body.scrollTop + document.body.clientHeight - offsetHeight);
    left: expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);
  }
  
  
• If you're using standards-compliant mode in IE 6, you have to use document.documentElement in place of document.body above.
• Using standards-compliant mode in IE with frames will just create headaches for you and you'll end up with a horizontal scrollbar unless you make the body's width 95%. An easier way is to remove the doctype and not go with standards-compliant mode.
• If you're supporting IE 6 and IE 5.5, remove the XHTML doctype (which makes IE 6 standards compliant) - this will make the two browser's behavior more consistent.
• Opera 6 doesn't recognize the "background: transparent" css rule for <button>'s.
• Opera 7 doesn't recognize the "width: 65px" css rule for buttons. Maybe this is only when you have an image on the button. I found that my buttons in Opera 7 were only as wide as the images on them.
• In Opera 6, you can't copy the contents of one <div> to another <div>. With all the other browsers, it's easy using document.getElementById('divId').innerHTML. This does not exist in Opera - I'm still hoping to find a similar way of doing this.
• Opera 7 and Safari have strange position bugs or maybe they're more standards-compliant than the other browsers, but I doubt it. In Opera 7, I have a buttons div that ends up at the top left corner of the header, when they should be aligned more in the middle and 100px from the left. In Safari, this same buttons <div> stacks the <button>'s on top of each other, rather than side-by-side, like you'd expect a row of buttons to look.

I'm glad I don't need to support Opera 7 or Safari for the app, but it's annoying that they behave so differently. Camino, of course, works great, and so does Mozilla. You write your JavaScript or CSS according to the standards, and it works in Mozilla, perfectly. What a beautiful browser.