diff --git a/default.css b/default.css index 1e874f6..19b2dd1 100644 --- a/default.css +++ b/default.css @@ -22,7 +22,6 @@ a:hover, a:active, a:focus { text-decoration: none; } - .noshow { display: none; } \ No newline at end of file diff --git a/test/cache/index.html b/test/cache/index.html new file mode 100755 index 0000000..1f2d731 --- /dev/null +++ b/test/cache/index.html @@ -0,0 +1,16 @@ + + + Cache Test + + + + + +
+

+ +

+
+ + + \ No newline at end of file diff --git a/test/cache/touch.php b/test/cache/touch.php new file mode 100755 index 0000000..451e62f --- /dev/null +++ b/test/cache/touch.php @@ -0,0 +1,9 @@ + diff --git a/test/cache/vivaldi.jpg b/test/cache/vivaldi.jpg new file mode 100755 index 0000000..38af819 Binary files /dev/null and b/test/cache/vivaldi.jpg differ diff --git a/test/db-test.php b/test/db-test.php new file mode 100755 index 0000000..52be88b --- /dev/null +++ b/test/db-test.php @@ -0,0 +1,19 @@ + diff --git a/test/float/250px.gif b/test/float/250px.gif new file mode 100755 index 0000000..0920d97 Binary files /dev/null and b/test/float/250px.gif differ diff --git a/test/float/300px.gif b/test/float/300px.gif new file mode 100755 index 0000000..a35e3fa Binary files /dev/null and b/test/float/300px.gif differ diff --git a/test/float/b3tatv.gif b/test/float/b3tatv.gif new file mode 100755 index 0000000..ce8dc03 Binary files /dev/null and b/test/float/b3tatv.gif differ diff --git a/test/float/butterfly.png b/test/float/butterfly.png new file mode 100755 index 0000000..2bfbc9d Binary files /dev/null and b/test/float/butterfly.png differ diff --git a/test/float/float.css b/test/float/float.css new file mode 100755 index 0000000..8ccf679 --- /dev/null +++ b/test/float/float.css @@ -0,0 +1,50 @@ +.content { + width: 60%; + margin: 0 auto; +} + +.center { + text-align: center; +} + +body img { + border: 0; +} + +/* This does not work in FF unless I +set the enclosing block width. */ +.content img { + max-width: 95%; +} + +.imgpost { + display: inline-block; + max-width: 95%; +} + +.imgpost p { + width: 200px; + max-width: 95%; + margin: 0.3em auto; + font-size: small; + +} + +.imgfloat { + max-width: 95%; + margin: 0.25em; + text-align: center; +} + +.imgfloat p { + width: 175px; + max-width: 95%; + font-size: small; + margin: 0; +} + +.picleft { + float: left; + margin-right: 0.5em; + margin-left: 0; +} diff --git a/test/float/float.html b/test/float/float.html new file mode 100755 index 0000000..d685743 --- /dev/null +++ b/test/float/float.html @@ -0,0 +1,38 @@ + + + + + Floating image test case + + + + + + +
+ +

Floated Image

+
+[Image Caption]

[Image Caption]

+
+ +

Image floated to the left with caption and max-width: 95%, works in Opera 8 and MSIE 6 but not in Firefox, +which seems to have problems with the max-width attribute.

+

When the ARPANET was originally created, and for much of its subsequent evolution into the Internet prior to the mass pile-on of the 1990's, access was highly accountable. Every machine on the Internet had a unique Internet Protocol (IP) address, the 32 bit number you usually see written in "dotted quad" form, such as 192.168.114.31. Virtually all machines on the Internet were permanently connected via dedicated leased lines (or on a local network, itself linked to the outside by a leased line). IP addresses were permanently assigned, one per machine, from blocks of contiguous addresses allocated to organisations to whom was delegated the responsibility of assigning addresses within that block. An organisation responsible for an IP address block could, in turn, delegate assignment of addresses within a sub-block to another entity but, in every case, it was possible to determine who was ultimately responsible for an address on the Internet.

+ +

Images centered with captions below

+

Inspired by this article, but I wanted to make the images centered, +not floated left. This works in Opera 8 but not in MSIE 6 or Firefox as they do not seem to support display: inline-block, +also the captions do not align with the images in FF:

+ +
+
[Image Caption]

[Image Caption]

+
[Image Caption]

[Image Caption]

+
[Image Caption]

[Quite a bit longer Image Caption]

+
[Image Caption]

[Image Caption]

+
+ +
+ + + diff --git a/test/float/index.html b/test/float/index.html new file mode 100644 index 0000000..df1268a --- /dev/null +++ b/test/float/index.html @@ -0,0 +1,47 @@ + + + + + + + float + + + +

float

+ ..
+[ 20K Sep 15  2005]  250px.gif
+[ 30K Sep 15  2005]  300px.gif
+[7.0K Sep 15  2005]  b3tatv.gif
+[6.2K Sep 15  2005]  butterfly.png
+[ 629 Sep 16  2005]  float.css
+[2.6K Feb  6  2022]  float.html
+[7.3K Sep 15  2005]  opera.html
+[7.4K Feb  6  2022]  spartanicus.html
+

+

+

+ +0 directories, 8 files +

+

+ diff --git a/test/float/opera.html b/test/float/opera.html new file mode 100755 index 0000000..dcfe93b --- /dev/null +++ b/test/float/opera.html @@ -0,0 +1,96 @@ + + + + +Centered Image Gallery with captions - Spartanicus' Web tips + + + + + + + +
+
+
+

Centered Image Gallery with captions

+
+
+

Introduction

+

Centering an image gallery with captions beneath the images that works in most browsers using appropriate markup and CSS for the presentation is not as straightforward as it should be.

+
+
+

Functional markup

+

Around each image/caption pair an image gallery should provide spacing in the visual domain, or pauses in the audio domain. This functionality should be provided via an HTML element who's default properties provide this. Paragraph markup provides the required spacing and/or pause around each image/caption pair, and it's use is semantically appropriate since it marks up the textual alternative for the image and the caption.

+
+
+

Styling

+

Horizontal alignment and distribution of image & caption pairs requires inline-block behaviour, this is provided by the CSS 2.0 inline-table or the CSS 2.1 inline-block display values. One or both is/are supported by IE5.5+, Opera5+ and KHTML browsers (Safari, iCab, Konqueror etc.). MS Internet Explorer first introduced inline-block as a proprietary extension in IE5.5. Recent Opera's and KHTML based browsers also support inline-block now that it has been incorporated in the CSS 2.1 specification. By specifying both values we can cover a fair number of browsers: display:inline-table;display:inline-block.

+
+

What about Gecko based browsers?

+

Firefox, Netscape6+, Mozilla etc. use the Gecko rendering engine which does not support inline-table. Recent Gecko versions have experimental support for inline-block type behaviour via the proprietary -moz-inline-block and -moz-inline-box values, but at the time of writing this support is so buggy that it's unusable for this purpose. Fortunately current Gecko's have a CSS table bug that can be exploited to achieve inline-block type behaviour, if we specify the following sequence: display:table-cell;display:inline-table;display:inline-block, Gecko based browsers will also play ball.

+
+
+

Vertical alignment

+

To get captions wider than the image to wrap the inline-blocks have been given an explicit width, inline-block type elements default to "shrink to fit" behaviour. In the demo below, the longer caption on the first image & caption pair demonstrates vertical alignment. Opera defaults to top aligning the image & caption pairs, IE needs a vertical-align:top specified on the spans to fall in line with Opera. Gecko based browsers bottom align the image & caption pairs. I presume that this is due to the fact that we are relying on a Gecko CSS table bug. I'm not aware of a method to get Gecko to top align.

+
+
+
+

Demo

+ +

The above demo was tested with:

+
    +
  • Opera 5.12, 6.04, 7.11, 7.51, 8.01
  • +
  • IE 5.5, 6.0
  • +
  • Firefox 0.9.2
  • +
  • Mozilla 1.5
  • +
+

I am not able to test with KHTML based browsers (Safari, iCab, Konqueror), but afaik they support inline-table and reasonably recent versions also support inline-block, so it should work in those browsers also.

+

CSS code

+
+
#gallery{text-align:center}
+
#gallery p{display:inline}
+
#gallery span{margin:0 5px 5px 5px; vertical-align:top; width:172px; display:table-cell; display:inline-table; display:inline-block}
+
#gallery p img{margin-bottom:5px}
+
+

HTML code

+
+
<div id="gallery"> +
<p><span><img src="utterfly.png" alt="Butterfly"><br>A Butterfly, A Butterfly, A Butterfly, A Butterfly</span></p>
+
<p><span><img src="utterfly.png" alt="Butterfly"><br>A Butterfly</span></p>
+
<p><span><img src="utterfly.png" alt="Butterfly"><br>A Butterfly</span></p>
+
<p><span><img src="utterfly.png" alt="Butterfly"><br>A Butterfly</span></p>
+
<p><span><img src="utterfly.png" alt="Butterfly"><br>A Butterfly</span></p>
+
<p><span><img src="utterfly.png" alt="Butterfly"><br>A Butterfly</span></p>
+
<p><span><img src="utterfly.png" alt="Butterfly"><br>A Butterfly</span></p>
+
</div> +
+
+
+

Footnotes

+

There are some cross browser differences with regard to the horizontal spacing between the image & caption pairs.

+

For those who want to experiment with the method described above so that it could also be used for elements that default to block level like div, this IE block level element inline-block hack may be of interest.

+
+
+

Credits

+

Thanks to Carl Lindmark who supplied the hack that extended the original code to work in Gecko based browsers.

+
+
+
+ + + diff --git a/test/float/spartanicus.html b/test/float/spartanicus.html new file mode 100755 index 0000000..a4ab7ed --- /dev/null +++ b/test/float/spartanicus.html @@ -0,0 +1,96 @@ + + + + +Centered Image Gallery with captions - Spartanicus' Web tips + + + + + + + +
+
+
+

Centered Image Gallery with captions

+
+
+

Introduction

+

Centering an image gallery with captions beneath the images that works in most browsers using appropriate markup and CSS for the presentation is not as straightforward as it should be.

+
+
+

Functional markup

+

Around each image/caption pair an image gallery should provide spacing in the visual domain, or pauses in the audio domain. This functionality should be provided via an HTML element who's default properties provide this. Paragraph markup provides the required spacing and/or pause around each image/caption pair, and it's use is semantically appropriate since it marks up the textual alternative for the image and the caption.

+
+
+

Styling

+

Horizontal alignment and distribution of image & caption pairs requires inline-block behaviour, this is provided by the CSS 2.0 inline-table or the CSS 2.1 inline-block display values. One or both is/are supported by IE5.5+, Opera5+ and KHTML browsers (Safari, iCab, Konqueror etc.). MS Internet Explorer first introduced inline-block as a proprietary extension in IE5.5. Recent Opera's and KHTML based browsers also support inline-block now that it has been incorporated in the CSS 2.1 specification. By specifying both values we can cover a fair number of browsers: display:inline-table;display:inline-block.

+
+

What about Gecko based browsers?

+

Firefox, Netscape6+, Mozilla etc. use the Gecko rendering engine which does not support inline-table. Recent Gecko versions have experimental support for inline-block type behaviour via the proprietary -moz-inline-block and -moz-inline-box values, but at the time of writing this support is so buggy that it's unusable for this purpose. Fortunately current Gecko's have a CSS table bug that can be exploited to achieve inline-block type behaviour, if we specify the following sequence: display:table-cell;display:inline-table;display:inline-block, Gecko based browsers will also play ball.

+
+
+

Vertical alignment

+

To get captions wider than the image to wrap the inline-blocks have been given an explicit width, inline-block type elements default to "shrink to fit" behaviour. In the demo below, the longer caption on the first image & caption pair demonstrates vertical alignment. Opera defaults to top aligning the image & caption pairs, IE needs a vertical-align:top specified on the spans to fall in line with Opera. Gecko based browsers bottom align the image & caption pairs. I presume that this is due to the fact that we are relying on a Gecko CSS table bug. I'm not aware of a method to get Gecko to top align.

+
+
+
+

Demo

+ +

The above demo was tested with:

+
    +
  • Opera 5.12, 6.04, 7.11, 7.51, 8.01
  • +
  • IE 5.5, 6.0
  • +
  • Firefox 0.9.2
  • +
  • Mozilla 1.5
  • +
+

I am not able to test with KHTML based browsers (Safari, iCab, Konqueror), but afaik they support inline-table and reasonably recent versions also support inline-block, so it should work in those browsers also.

+

CSS code

+
+
#gallery{text-align:center}
+
#gallery p{display:inline}
+
#gallery span{margin:0 5px 5px 5px; vertical-align:top; width:172px; display:table-cell; display:inline-table; display:inline-block}
+
#gallery p img{margin-bottom:5px}
+
+

HTML code

+
+
<div id="gallery"> +
<p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly, A Butterfly, A Butterfly, A Butterfly</span></p>
+
<p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p>
+
<p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p>
+
<p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p>
+
<p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p>
+
<p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p>
+
<p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p>
+
</div> +
+
+
+

Footnotes

+

There are some cross browser differences with regard to the horizontal spacing between the image & caption pairs.

+

For those who want to experiment with the method described above so that it could also be used for elements that default to block level like div, this IE block level element inline-block hack may be of interest.

+
+
+

Credits

+

Thanks to Carl Lindmark who supplied the hack that extended the original code to work in Gecko based browsers.

+
+
+
+ + + diff --git a/test/index.html b/test/index.html index dd69647..e7d5ae8 100644 --- a/test/index.html +++ b/test/index.html @@ -29,19 +29,23 @@

test

..
+[   0 Oct  7 18:31]  cache
+[   0 Oct  7 18:28]  float
[   0 Jul  9 12:51]  focus
[   0 Jul  9 12:45]  js
[   0 Jul  9 12:45]  login
[   0 Jul  9 12:45]  pdf
[   0 Jul  9 12:45]  referrer
-[   0 Oct  7 18:00]  test-links
+[   0 Oct  7 18:29]  test-links
[   0 Jul  9 12:45]  translate
[   0 Oct  7 17:59]  video-mkv-aac
+[ 383 Feb  8  2022]  db-test.php
+[ 366 Oct  5 23:07]  test-favicon.php


-8 directories, 0 files +10 directories, 2 files

diff --git a/test/test-favicon.php b/test/test-favicon.php new file mode 100755 index 0000000..2aab4e0 --- /dev/null +++ b/test/test-favicon.php @@ -0,0 +1,16 @@ + + + + + + HTML Test Page + + + + Favicon Test Page + +