• View
• Edit
• History
• Attach
• Print

PmWiki-Divs

PlainBlog Skin < Skins > Pmwiki-dt (A simple tableless skin for PmWiki)   (talk? | users? | test page | RWD? | set as default | unset | validate: HTML, CSS)

Description

pmwiki-divs is a skin in the style of the pmwiki default skin, but uses only divisions and css styling for the general layout, and no tables. Install in the usual manner for skins by unzipping to your pub/skins/ folder and set in config.php:

Notes

Technical Notes

Feel free to skip these technical notes unless you're interested.

The pmwiki-divs skin uses a variety of techniques to manage well-known browser incompatabilities:

Double-wrapping: Most sections are double-wrapped in divs. The outer divs (called "frames") contain position and length css rules; the inner divs (called "liners") contain visible rendering rules (borders, margins, padding, background colors). One of the reasons for this separation is that browsers have incompatible ways of calculating lengths, such as width. For example some calculate width inside borders; some outside borders. By assigning length specifications to divs with no border, margin, or padding information, there can logically be no difference among browsers in calculating these values.

Internet Explorer hacks: The inner divs contain visible rendering information. These also have notorious compatability issues, particlarly with Internet Explorer. The most common way of dealing with these has been through "hacks" (using parsing bugs to isolate IE version-specific rules, some of which are themselves bugs to fight bugs). The layout-IE.css file contains these hacks. For example * html he\ight:0 throws IE 6 into a "box model" which is more compatible with other browsers (the backslash prevents the rule from being read by IE 5.5; the * html prevents the rule from being read by IE7). The other rules compensate for other rendering issues such as the IE "peekaboo" bug (text randomly appears and disappears during resizing in the presence of a background color and an image), the IE "jumping italics" bug (a block "jumps" down to the nearest location not occupied by a floating div to compensate for wrapping issues related to a couple of extra pixels required to accomodate the "lean" of italics letters), and others.

The main design problem, and its solution:

The dividing border illusion: The main problem was consistently rendering the 1-pixel line between the left and right columns. This was solved by having the adjacent borders overlap (through margin-left:-1px for example). As a special case, the "background-drape" div was inserted behind the right column, and "pulled down" to the bottom of the longest of the left or right columns by inserting the footer in this div -- the footer having a "clear:both" rule that forces it underneath the longest of the two columns, and a margin-left negative value to pull it to the left border of the page. The "background-drape" div renders the very bottom of the dividing line, as well as the background color of the right column when the right column content is shorter than the left column content.

Release Notes

• 2006-09-03a: Added text-align:right to #wikihead in pmwiki-divs.css for ie5mac's sake (searchbox was on top of logo).
• 2006-09-03: initial release, for further testing.

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See also

Comments

Contributors

• Originally created by Henrik Bechmann (henrik.bechmann@sympatico.ca)
• HansB