Welcome

This is more of an example of how layout and content should be separated than a demonstration of browser compatibility. If you'd like to get the full contrast between layout being turned on and off, view the demo in IE 5 or Navigator 6.

This window can be closed.

Example Description

I can do either small examples or entire projects—it's difficult to do anything in between. I wanted to make this fully functional with JavaScript and DHTML, but it became too bloated for an example and I removed all interactive functionality. I can come up with original layouts but that takes several days of brainstorming. Much to my surprise, I had an exciting vacation and didn't get a chance to work on this.

Demonstration by Michael Dayah

Windows Interface

This is a fairly efficient rendering of the Windows interface using style sheets and the box model—no tables. There are no real "tricks" (browser-specific markup, exploitation of layout bugs, overlap, etc.) used to accomplish this. To really see the dynamics of the example, try temporarily changing the appearance scheme of a Windows machine in display settings to High Contrast Large or Slate for maximum effect.

Contact: michael @ this domain

Layout Bugs

Whenever I put together anything I find a ton of layout bugs. Opera seems to have trouble floating an element next to an inline box that doesn't have maximum width. IE5.5 tries to inherit the minimum height of a floating box from a nearby inline element. Macintosh IE5's system font descriptor "caption" contains weight, color, and size, but oddly still violates cascading order (author before browser style sheets). IE5.5 also won't display any absolutely positioned boxes if a margin is set for both left- and right-floating boxes and a clear separates them. All of these have been compensated for except Opera's floating box problem. The style sheet is commented with fixes for the various problems. Of course, the whole point of this exercise is to break the style sheet, so go ahead!

Phone: (865) 919-2099