Made in DenmarkFusce fringilla egestas. Aliquam convallis risus.e-mailBest viewed in a browser!
Emulating XHTML 2.0
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae nisl. Phasellus tincidunt. Phasellus semper mollis leo. Ut id sem. Nunc rutrum, neque a viverra interdum, quam nisi aliquam mauris, eu pretium turpis magna elementum lectus. Etiam eget urna. Donec aliquet lacus eu diam. Sed sodales enim sit amet nunc. Nullam volutpat, ante id accumsan posuere, elit nisi dapibus nisl, non luctus sapien lectus eu arcu.
This is not (quite) HTML...This is an <l> (line) element.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae eros. Pellentesque varius aliquet mi. Donec et lacus nec tortor blandit lobortis. Vivamus non velit. Duis lacinia nisl sit amet orci vulputate mollis. Quisque ut sem. Nullam id orci sit amet turpis accumsan tempus. Donec nulla mauris, molestie pharetra, tincidunt ut, vulputate vitae, leo.
...but (more or less) XML
Aenean imperdiet nulla et lectus. Mauris adipiscing, justo eget pharetra eleifend, nulla tortor varius orci.Ac elementum sapien est aliquam arcu.
Ut euismod metus in lectus.
Works only in Gecko & OperaHappy Christmas, New Year and all that stuff!The text in italic should not be visible... but as you're reading it, it probably is!
Fusce non lacus. Maecenas dictum, metus at ultricies cursus, felis elit pretium dolor, in consequat nunc lectus sed est. Fusce eu nisl non quam dapibus ultricies. Integer interdum varius lacus. Suspendisse mollis molestie elit. Phasellus pulvinar fermentum dui. Vivamus a metus id eros varius mollis. Curabitur hendrerit dui ac tellus. Pellentesque varius aliquet mi. Donec et lacus nec tortor blandit lobortis. Vivamus non velit. Duis lacinia nisl sit amet orci vulputate mollis. Quisque ut sem.NewsAliquam erat volutpat fermentum. Curabitur hendrerit dui ac tellus.Read more...Fusce fringilla egestas arcu. Aliquam convallis aliquet risus.Read more...Etiam eget urna. Donec aliquet lacus eu diam. Sed sodales enim sit amet nunc.Read more...Duis lacinia nisl sit amet orci vulputate mollis.Read more...Donec vitae nisl. Phasellus tincidunt. Phasellus semper mollis leo.Read more...BottomWhat?You really scrolled all the way down?OK!You may go back to the top.Source"HTML" code:<!DOCTYPE HTML>
<!-- ensures Standard Mode! -->
<html>
<head>
<metahttp-equiv="Content-type"content="text/html; charset=iso-8859-1"/>
<title>XHTML 2.0 preview</title>
<linkrel="shortcut icon"href="/favicon.ico"/>
<linktype="text/css"rel="stylesheet"href="./invalid.css"/>
<styletype="text/css">
@import "syntaxHighlight.css";
@import "invalidPreWrapHack.css";
</style>
</head>
<body>
<hid="logo">XHTML 2.0 demo</h>
<nl>
<label>Menu</label>
<li><ahref="./">Demos</a></li>
<li><ahref="../webdesign.html">Tools</a></li>
<li><ahref="#">Nothing</a></li>
<li><ahref="#">Still nothing</a></li>
<label>Info</label>
<li>
<para>Made in Denmark</para><!-- <p> breaks the layout. Replaced by <para>! -->
<para>Fusce fringilla egestas. Aliquam convallis risus.</para>
<para><ahref="mailto:somebody@somewhere">e-mail</a></para>
<para>Best viewed in a browser!</para>
</li>
</nl>
<sectionid="main">
<h>Emulating XHTML 2.0</h>
<para>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae nisl. Phasellus tincidunt. Phasellus semper mollis leo. Ut id sem. Nunc rutrum, neque a viverra interdum, quam nisi aliquam mauris, eu pretium turpis magna elementum lectus. Etiam eget urna. Donec aliquet lacus eu diam. Sed sodales enim sit amet nunc. Nullam volutpat, ante id accumsan posuere, elit nisi dapibus nisl, non luctus sapien lectus eu arcu.
</para>
<sectionclass="sub">
<h>This is not (quite) HTML...</h>
<para>
<l>This is an <l> (line) element.</l>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae eros. Pellentesque varius aliquet mi. Donec et lacus nec tortor blandit lobortis. Vivamus non velit. Duis lacinia nisl sit amet orci vulputate mollis. Quisque ut sem. Nullam id orci sit amet turpis accumsan tempus. Donec nulla mauris, molestie pharetra, tincidunt ut, vulputate vitae, leo.
</para>
<separator></separator><!-- Fallback! <separator/> won't work in Opera -->
<h>...but (more or less) XML</h>
<para>
Aenean imperdiet nulla et lectus. Mauris adipiscing, justo eget pharetra eleifend, nulla tortor varius orci.<l>Ac elementum sapien est aliquam arcu.</l>
Ut euismod metus in lectus.
</para>
</section>
<hhref="http://www.opera.com"title="[ HREF test... ]">Works only in Gecko & Opera</h>
<!-- href still only works on <a>! -->
<para>
<imgsrc="dims.jpg"alt="Santa"title="Mean Santa!"><l>Happy Christmas, New Year and all that stuff!</l><l>The text in italic should not be visible... but as you're reading it, it probably is!</l> </img><!-- doesn't work! Text should not be visible when the image is...-->
Fusce non lacus. Maecenas dictum, metus at ultricies cursus, felis elit pretium dolor, in consequat nunc lectus sed est. Fusce eu nisl non quam dapibus ultricies. Integer interdum varius lacus. Suspendisse mollis molestie elit. Phasellus pulvinar fermentum dui. Vivamus a metus id eros varius mollis. Curabitur hendrerit dui ac tellus. Pellentesque varius aliquet mi. Donec et lacus nec tortor blandit lobortis. Vivamus non velit. Duis lacinia nisl sit amet orci vulputate mollis. Quisque ut sem.</para>
</section>
<sectionid="new">
<h>News</h>
<para><h>Aliquam</h> erat volutpat fermentum. Curabitur hendrerit dui ac tellus.<l><ahref="#">Read more...</a></l></para>
<para><h>Fusce</h> fringilla egestas arcu. Aliquam convallis aliquet risus.<l><ahref="#">Read more...</a></l></para>
<para><h>Etiam eget urna.</h> Donec aliquet lacus eu diam. Sed sodales enim sit amet nunc.<l><ahref="#">Read more...</a></l></para>
<para><h>Duis lacinia</h> nisl sit amet orci vulputate mollis.<l><ahref="#">Read more...</a></l></para>
<para><h>Donec</h> vitae nisl. Phasellus tincidunt. Phasellus semper mollis leo.<l><ahref="#">Read more...</a></l></para>
</section>
<sectionid="lol">
<h>Bottom</h>
<para><h>What?</h>You really scrolled all the way down?</para>
<para><h>OK!</h>You may go back to the <ahref="#logo">top</a>.</para>
</section>
<sectionid="source">
<h>Source</h>
<separator></separator>
<sectionid="markup">
<h>"HTML" code:</h>
<paraclass="code">
<?php
include("./fixCode.php");
include("./syntaxHighlight.php");
$htmlfile = join ("", file ("./invalid.html"));
$sc = new sourcecode;
echo $sc->html($htmlfile);
?>
</para>
</section>
<separator></separator>
<sectionid="CSS">
<h>CSS code:</h>
<paraclass="code">
<?php
$htmlfile = join ("", file ("./invalid.css"));
$sc = new sourcecode;
echo $sc->html($htmlfile);
?>
</para>
</section>
</section>
</body>
</html>
CSS code:* { padding:0; margin:0; border-style:none;}
*[href] { set-link-source: attr(href); -use-link-source: current; -moz-binding:url(htmlBindings.xml#link); }
html
{ border:6px #a9bd25 double; padding:0; margin:1em; background:white url(tuxfili.jpg) fixed; color:black; font-family:verdana, arial, helvetica, sans-serif; }
body
{ position:relative; padding:1em; border:solid 2px #a9bd25; margin:3em 6em 3em 3em; background:white url(./banner4.jpg) left top repeat-x; color:black; font-size:.9em; }
para /* <p> replaced by <para> */
{ display:block; padding:.3em; }
nl
/*{ display:block; position:absolute; right:-70px; top:73px; width:140px; height:400px; border:solid 2px #a9bd25; background:white; color:black; font-size:.9em; }*/
{ display:block; position:fixed; right:40px; top:110px; z-index:20; width:140px; border:solid 2px #a9bd25; background:white; color:black; font-size:.9em; }
label
{ display:list-item; list-style:none; height:16px; padding:2px 10px 7px; background:#e0eb97; color:black; text-align:center; font-size:1.1em; font-weight:bold; }
label a
{ background-color:inherit; color:black; text-decoration:none; }
label a:hover, #new l a:hover, nl li>para a:hover, #lol para a:hover
{ background-color:inherit; color:red; }
nl li
{ margin:0; display:list-item; padding:0; list-style:none; }
nl li>a
{ display:block; width:125px; height:23px; padding-top:3px; padding-left:15px; border-bottom:solid 1px #d2e26a; background:white; color:black; text-decoration:none; }
nl li>a:hover
{ background:#f6f9e1 /* url(banner4.jpg) no-repeat */; color:black; }
nl li>para
{ padding:.5em 1em; font-size:.8em; }
section
{ display:block; padding:.5em 4em .5em .5em; margin:.5em; }
section section
{ margin-left:1.5em; font-size:.85em;}
section section para
{ }
h
{ display:block; margin:.5em 0; font-weight:bold; font-size:1.3em; text-align:center; clear:both; }
h#logo
{ padding:0; margin:0 0 1em; background:transparent !important; color:white; font-size:2.5em; font-style:normal; }
section h
{ text-align:left; background:none; }
section h[href]
{ text-decoration:underline; width:20em; }
section h[href]:hover
{ background-color:inherit; color:red; cursor:pointer; }
l
{ display:block; padding-left:1.2em; font-style:italic; }
#new l
{ text-indent:0; }
separator
{ display:block; /*width:85%; */margin:1em auto; border-bottom:solid 1px; }
section section>separator
{ width:15em; border-bottom:double; }
img
{ margin:0 2em 0 1em; padding:0; float:right; }
.code
{ font-size:.85em; }
pre
{ width:90%; overflow:auto; padding:0; margin:auto }
section#new
{ display:block; position:absolute; right:-70px; top:380px; width:140px; padding:0 0 1em; border:solid 2px #a9bd25; margin:0; background:white; color:black; font-size:.8em; }
section#lol
{ display:block; position:absolute; right:-70px; bottom:-25px; height:150px /*top:4000px*/; width:140px; padding:0 0 1em; border:solid 2px #a9bd25; margin:0; background:white; color:black; font-size:.8em; }
#new>h, #lol>h
{ height:16px; padding:4px 10px 7px; margin:0; background:#e0eb97; color:black; text-align:center; font-size:1.2em; }
#new para>h, #lol para>h
{ font-size:1.2em; margin:3px 0; }
#new para, #lol para
{ padding:.5em 1em; font-size:.9em; }
#source>h
{ text-align:center; }
#source section h
{ text-align:left; }
#source para
{ font-style:normal; }
