SCAdia: CSS Test Page

SCAdia CSS Test Page

Most Recent Updates April XLII (2008)

You have stumbled on the page I use for testing the CSS formatting of SCAdia. On this page I do a little bit of most of the trickier sorts of CSS formatting that SCAdia uses, so I can see how well different browsers handle my code.

I've tried to format SCAdia to be as straightforward as possible, so that the most standards-compliant browsers will have the least problem. Naturally, that means I have more trouble with Internet Explorer than anything else.

FLUSH: This is a regular default paragraph, except that the first line isn't indented like the preceding paragraph. The regular Emphasized, Strong, and Citation formatting should work within this paragraph.

HILITE: This paragraph contains several lines in the highlighting color, to see how the background color applies to inline text. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

HILITE: This entire paragraph should be backed with the highlighting color, but a few sentences in the middle should be backed with the regular background color. The regular Emphasized, Strong, and Citation formatting should work within this paragraph. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

ADDED: This paragraph is formatted as an addition to existing text. The regular Emphasized, Strong, and Citation formatting should work within this paragraph. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

CENTER BLACK HIDE: Lines of this paragraph should be centered in the column. Two sentences should be unreadable until they are selected text: one because it is in the background color, and one because it is black on black. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

FLEFT: This paragraph should contain a left-justified image with text wrapping down the right. [Everything on this page is a test image.] Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

FRIGHT: This paragraph should contain a right-justified image with text wrapping down the left. [Everything on this page is a test image.] Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

SIDEBAR WID1: This paragraph should have a narrow sidebar to the right. There should be a clear break after this paragraph and sidebar. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

CLEAR: This paragraph should have a clear break above it. and nothing floating beside it.

SIDEBAR HILITE WID2: This paragraph should have a medium-width sidebar to the right, in the highlighting color. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

CLEAR: This paragraph should have a clear break above it. and nothing floating beside it.

SIDEBAR PLAQUE WID3: This paragraph should have the widest class of sidebar to the right, in the bordered format used for buttons and such. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

MINDENT: The two following paragraphs should show slight successive increases in the left margin.

Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat.

Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

INDENT: The two following paragraphs should show larger successive increases in the left margin.

DINDENT: The two following paragraphs should show successive increases in both left and right margins.

CAPTION FRIGHT BOXED: This block should be bordered in black, with a caption centered below it in blue. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua.

This is the caption. The regular Emphasized, Strong, and Citation formatting should work within this caption.

CAPTION FRIGHT CLEAR: This short paragraph should have a captioned box to the right. There should be a clear break before the next paragraph. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua.

[Everything on this page is a test image.]

This is the caption. The regular Emphasized, Strong, and Citation formatting should work within this caption.

ILLO FRIGHT CLEAR: This short paragraph should have a captioned image to the right. There should be a clear break before the next paragraph.

CAPTION: SIGN: This paragraph should be in a bordered box, with a blue caption below it. The regular Emphasized, Strong, and Citation formatting should work within this box. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat.

CAPTION: This is the caption. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua.

This paragraph shouldn't appear on screen. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat.

PRINTONLY: No text should appear on screen in the box at the right, but it should appear if you do a print preview. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat.

READABLE: This paragraph and several following should be indented 4em on the left and 8em on the right. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

FLEFT UNREADLEFT: This paragraph should contain an embedded image left-justified against the overall column margin (rather than the paragraph margin) with text wrapping down the right. [Everything on this page is a test image.] Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

FRIGHT UNREADABLE: This paragraph should contain an embedded image right-justified against the overall column margin (rather than the paragraph margin) with text wrapping down the left. [Everything on this page is a test image.] Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

FLEFT UNREADLEFT (by DIV): This paragraph should be preceded by an image left-justified against the overall column margin (rather than the paragraph margin) with text wrapping down the right. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

FRIGHT UNREADABLE (by DIV): This paragraph should be preceded by an image right-justified against the overall column margin (rather than the paragraph margin) with text wrapping down the left. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

SIDEBAR UNREADABLE WID1: This paragraph should have a narrow sidebar against the primary right margin. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

SIDEBAR UNREADABLE HILITE WID2: This paragraph should have a medium sidebar against the primary right margin, in the highlighting color. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

FRIGHT UNREADABLE PLAQUE WID3: This paragraph should have the widest class of sidebar against the primary right margin, in the bordered format used for buttons and such. (The paragraph text is explicitly right-justified to show the effect.) Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

This is a normal FLUSH paragraph to establish a left margin.

This is a basic list element without any extra formatting. The items should not be spaced far apart. The bullets should be indented somewhat from the left border. The regular Emphasized, Strong, and Citation formatting should work within this item.
Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua.
This sublist also uses default formatting.
- Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat.
- Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

This is a normal FLUSH paragraph to establish a left margin.

PLAIN LOOSE: These list elements should have no bullets or numbers. They should be spaced apart like regular paragraphs. Indentation should match a default bulleted list.
Lorem ipsum dolor sit, amet,
consectetur.
Adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat.

This is a normal FLUSH paragraph to establish a left margin.

UL HANG: These list elements should have the first line overhung to the left. The bullet should be clear of the first bit of text, and nearer to the left border than a default list.
Lorem ipsum dolor sit, amet,
consectetur.
1. OL HANG: These list elements should have the first line overhung to the left. The number should be clear of the first bit of text.
2. Lorem ipsum dolor sit, amet,
3. consectetur.
4. Adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat.
5. There are a number of extra items.
6. This tests behavior when the number goes over 1 digit.
7. Quis aute iure reprehenderit.
8. In voluptate velit esse cillum.
9. Dolore eu fugiat nulla pariatur exceptur sint.
10. Obcaecat cupiditat non proident sunt in culpa.
11. Qui officia deserunt mollit anim.
12. Id est laborum. Adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat.
Adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru exercitation ullam co laboris nisi ut aliquid ex ea commod consequat.

This is a normal FLUSH paragraph to establish a left margin.

UL ROSTER: This is a special style used for lists where each individual list item has several short paragraphs specially formatted. The first line should be emphasized.
P: Paragraph text should be formatted normally, but without first-line indentation or normal spacing between paragraphs.

DIV P: Paragraphs within a DIV are indented and italicized, with the first line overhung. The regular Emphasized, Strong, and Citation formatting should work within this paragraph.

Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua.

Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.

P: Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur exceptur sint, obcaecat cupiditat non proident sunt in culpa, qui officia deserunt mollit anim, id est laborum.
UNOFF: This is the second list element. It should begin with a bullet. This entire element should be inset somewhat from the first one.

DIV P: This is a brief data item.

DIV P: This is another data item, made long enough to wrap around. Lorem ipsum dolor sit, amet, consectetur, adipisci elit, sed eius mod tempor incidunt, ut labore et dolore magna aliqua.

P: This is a paragraph of explanatory or descriptive text. It has no special formatting. The regular Emphasized, Strong, and Citation formatting should work within this paragraph.

· Top of Page · · SCAdia Home Page · · Practical Articles · · Research Articles · · Histories & Tales · · Oddments & Pastimes · · Grumblings & Other Opinions · · "The Creative Mundane" · · Mail Feedback & Guest Book · · Updates & Revisions · · Frequently-Asked Questions · · Available PDF Downloads · · Technical Web Geek Stuff ·

SCAdia: Copyright © 2000, 2001, 2002, 2005, 2007, 2008, Seamas Mac Daibhid. All rights reserved. Except where otherwise specified, reproduction or redistribution of this material in any form is prohibited. SCAdia is written and edited by Seamas Mac Daibhid. Some material is used by permission of other authors; copyright resides with them and will be noted where appropriate.

SCAdia is not an official web site of the Society for Creative Anachronism, Inc.. and does not delineate official Society policy. While much of the material on SCAdia is instructional or educational, much of it is provided entirely for entertainment. SCAdia makes no claim to support the Society's substantially educational purpose, and should not be considered to reflect upon the Society directly. SCAdia is also not an official web site of the Shire of Smythkepe or the Kingdom of Gleann Abhann.