Landscape theme test version 2

A.E.Veltstra
2005/02/03
Purpose of this theme:
To create a spatial scene behind the article texts, giving the impression of 3d-space instead of paper. For those who see this article as a tranquil green box with black text, there’s a screenshot of how css2-styled browsers render this page.
Jump to Known Bugs
Changes from last version:
  • 2005/02/03 Mozilla 1.8 alpha 6, Firefox 1.0, Opera 8 previews (Win, Mac) released. Also tested on the latest version of Safari (Mac). Added a line of style code to have Opera 8 for Mac show the images, too. Bug reported. Made the article background a bit more transparant for Internet Explorer.
  • 2004/08/15 Safari 1.0.3 released (security update). Opera 7.54 released (security update).
Used technology:
XHTML 1.0 Transitional, CSS2 (Positioning), EcmaScript (JavaScript) (using Dom2), a graphics creator (Expression 3), a graphics editor (GraphicConverter) and a text editor (Tex-Edit Plus).
How do the roll-overs work?
The corners consist of table cells with hyperlinks, with their appearance changed using cascading style sheets. When hovered by the mouse pointer, their background images change. Absolute positioning has been chosen over fixed positioning because of incompatibility with the world’s most used browser.
How do you preload the images?
By setting the corner background images to the hover images, those hover images preload. When the corner hyperlinks load, they also load the static images, overlapping the images in their containers, making them invisible.

Note the key word, “overlapping”. The hyperlink images don’t replace their container images, but overlap them. Thus both the static and the hover images load while (normally) only the static ones show initially.

This technique has a second advantage: on hovering, the image changing shows no flickering. The images do get swapped, but it looks as though the hover image overlays the background image.
How do the menus appear?
By manipulating the DOM using cross-browser EcmaScript, the menus will show on activating (clicking) the corners, and hide on activating the close button in the menu, or activating the article. If the browser doesn’t support EcmaScript, the user lucks out and doesn’t see the menus. For them, activating the link in the corners navigates to the respective menus.
What about that transparancy?
Three different kinds of transparancy (transparency, as w3c and appearantly a lot of US Americans like to call it) are used in this layout:
  1. Perceived transparancy: the corner images look transparant. However, they aren’t.
  2. For all Alpha-Transparancy enabled browsers (Opera, Safari, Mozilla etc.) the article and the menus have a small, repeated background image which uses alpha-transparancy. Changing the transparancy means replacing that image.
  3. Internet Explorer until this day isn’t able to deal with Alpha-Transparancy in images without adding some kind of style hack that will, of course, only work in Internet Explorer. Thus, for that browser specifically an invalid style-sheet was made, using Microsoft’s proprietary Alpha-Filter mark-up. Changing transparancy means changing the value in that filter.
Known bugs:
These bugs probably don’t stem from my coding, but from bad browser behaviour. If any of these bugs do stem from my coding, feel free to inform me.

Camino (v0.8) 2004062308 (Mac)
  • Draws the article container scrollbar through the right hand menu paddings.
  • No keyboard scrolling (page up, page down, top, bottom) in the article container.
Firefox 0.9.3 (Gecko/20040803) (Mac)
  • Draws the article container scrollbar through the right hand menu paddings.
  • No keyboard scrolling (page up, page down, top, bottom) in the article container.
  • Moves the backdrop images after clicking on them to invoke the menus (new bug!).
Firefox 1.0 (Gecko/20041107) (Win)
  • No keyboard scrolling (page up, page down, top, bottom) in the article container. (Regression, as this problem was not present in Firebird 0.7!)
  • No scrollmouse scrolling.
Internet Explorer (Mac)
  • Shows the simple style, as intended.
Internet Explorer (Win)
  • None.
Lynx (Win)
  • None. Not styled, but for Lynx, that’s normal.
Mozilla 1.8a2 (Gecko/20040714) (Mac)
  • No keyboard scrolling (page up, page down, top, bottom) in the article container.
  • In-page hyperlink jump to “Known Bugs” doesn’t work. (Regression.)
Mozilla 1.8a6 (Gecko/20050111) (Win)
  • None.
Opera 6 (Mac)
  • Shows simple style, no problems.
  • (The illegal cookie problem isn’t caused by Opera but by my host, Tripod.)
Opera 8 PR1 (Mac)
  • In-page hyperlink jump to “Known Bugs” doesn’t work. (Known issue in Opera.)
  • Backdrop images only show after setting a 1px border on the corner table cells (bug reported as 162989).
Opera 8 PR4 (7401) (Win)
  • In-page hyperlink jump to “Known Bugs” doesn’t work. (Known issue in Opera.)
  • Allows for keyboard scrolling in the article, but only after clicking in it.
Safari 1.0.3 (85.8) (Mac)
  • No render updates for OsX 10.2.8.
  • No text selection in article.
  • In-page hyperlink jump to “Known Bugs” doesn’t work.
  • No keyboard scrolling (page up, page down, top, bottom) in the article container.
  • Has difficulty rendering the alpha-blend transparancy. Article container too opaque.
  • Understands it needs to do something with the acronym tag, just doesn’t know what. Renders them italic (instead of underlined, like competitive browsers) and forgets to show the explanative title.
If you have a browser that isn’t mentioned here, please send me the rendering results.
H C
M W