mikeage.net Logo
mikeage.net/tag/tip/page/3/

mikeage.net @ ו׳ שבט תשע״ח

Posts Tagged ‘Tip’

Nested Lists in XHTML

‍‍ז׳ מנחם אב תשס״ה - Friday, August 12th, 2005

Quick Overview

If you want to nest lists in HTML, you probably did something like the following (although you may not have done the indenting)

&lt;ul&gt;<br />
&nbsp;&nbsp;&lt;li&gt;List Item 1&lt;/li&gt;<br />
&nbsp;&nbsp;&lt;ul&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Sublist Item 1&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Sublist Item 2&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Subsublist Item 1&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Sublist Item 3&lt;/li&gt;<br />
&nbsp;&nbsp;&lt;/ul&gt;<br />
&nbsp;&nbsp;&lt;li&gt;List item 2&lt;/li&gt;<br />
&nbsp;&nbsp;&lt;li&gt;List Item 3&lt;/li&gt;<br />
&lt;/ul&gt;<br />

In XHTML, this is not valid (the w3 validator will complain about "document type does not allow element "ul" here; assuming missing "li" start-tag". The reason is that an nested &lt;ul&gt; belongs within an &lt;li&gt; tag. You might worry that this would put a higher level bullet on the sublist-- it doesn't. The key is you don't close the &lt;li&gt; tag from the previous entry until after the sublist finishes. Compare the following. (note that both are syntactically correct XHTML)

Code Output
&lt;ul&gt;<br />
&lt;li&gt;List Item 1<br />
&lt;ul&gt;<br />
&lt;li&gt;Sublist Item 1&lt;/li&gt;<br />
&lt;li&gt;Sublist Item 2<br />
&lt;ul&gt;<br />
&lt;li&gt;Subsublist Item 1&lt;/li&gt;<br />
&lt;/ul&gt;&lt;/li&gt;<br />
&lt;li&gt;Sublist Item 3&lt;/li&gt;<br />
&lt;/ul&gt;&lt;/li&gt;<br />
&lt;li&gt;List item 2&lt;/li&gt;<br />
&lt;li&gt;List Item 3&lt;/li&gt;<br />
&lt;/ul&gt;<br />
  • List Item 1
    • Sublist Item 1
    • Sublist Item 2
      • Subsublist Item 1
    • Sublist Item 3
  • List item 2
  • List Item 3
Versus
&lt;ul&gt;<br />
&lt;li&gt;List Item 1&lt;/li&gt;<br />

&lt;li&gt;&lt;ul&gt;<br />
&lt;li&gt;Sublist Item 1&lt;/li&gt;<br />
&lt;li&gt;Sublist Item 2&lt;/li&gt;<br />
&lt;li&gt;
&lt;ul&gt;<br />
&lt;li&gt;Subsublist Item 1&lt;/li&gt;<br />
&lt;/ul&gt;&lt;/li&gt;<br />
&lt;li&gt;Sublist Item 3&lt;/li&gt;<br />
&lt;/ul&gt;&lt;/li&gt;<br />
&lt;li&gt;List item 2&lt;/li&gt;<br />
&lt;li&gt;List Item 3&lt;/li&gt;<br />
&lt;/ul&gt;<br />

  • List Item 1
    • Sublist Item 1
    • Sublist Item 2
      • Subsublist Item 1
    • Sublist Item 3
  • List item 2
  • List Item 3

Enjoy.

Full Width Tables in IE6

‍‍ז׳ מנחם אב תשס״ה - Friday, August 12th, 2005

Quick Overview

Internet Explorer 6.0 (and possibly earlier) has a buggy CSS interperter. The biggest problem is the broken "box model", which is documented in enough other places. However, one other major problem is that tables do not inherit div's width. Thus, in my page, which has a left sidebar, if I declare a <table width="100%"> in the main window, it will make the table 100% of the full screen, which, since there's a sidebar, pushes it off the edge.

Correct In Mozilla (for this layout)

<div id="LeftMenu"">
...
</div>
<div id="Content">
<table width="100%">
...
</table>
</div>

This is exactly what we want. However, it fails in IE.

Correct In IE (for this layout)

<div id="LeftMenu">
...
</div>
<div id="Content">
<div style="width:100%">
<table width="100%">
...
</table>
</div>
</div>

Mozilla also renders this correctly.

Enjoy.

Hiding E-Mail addresses with JavaScript

‍‍ז׳ מנחם אב תשס״ה - Friday, August 12th, 2005

Quick Overview

Many people put a link on their homepage to email them directly. This is done using a link with the form mailto:address@domain.com. The problem is that many spambots pick up on this sort of thing. This document will show how to hide an email from spambots, while displaying it to a user

How Do I?

Insert the following into your page wherever you want your email address to appear:

&lt;script type="text/javascript"&gt;<br />
&lt;!--<br />
varE=('email@' + 'domain.com')<br />
document.write(' &lt;A href="mailto:' + varE + '"&gt;' + varE +
'&lt;/a&gt;')<br />
//--&gt;&lt;/script&gt;

This prints a link dynamically, but since most spambots don't process JavaScript, they can't see it. Also note that by creating the string using varE=('email@' + 'mikeage.net'), they can't see it by looking through the source.

Enjoy.

XHTML Compatible Image Flip

‍‍ז׳ מנחם אב תשס״ה - Friday, August 12th, 2005

Quick Overview

Many sites nowadays (this one included) use an image flip for links. That is, an image displays one thing before it's clicked, and a different image when the mouse is hovering over it. The classic implementation is not valid XHTML 1.1, however, as it uses depreciated
JavaScript. Here's how to do it properly.

Header

Put the following code in your &lt;head&gt;...&lt;/head&gt; section.

&lt;script type=&quot;text/javascript&quot;&gt;<br />
&lt;!-- <br />
function swap(id,img) {<br />
document.images[id].src=img;<br />
}<br />
--&gt;<br />
&lt;/script&gt;

Main Document

Then, place the following code in your document

&lt;a href=&quot;page.html&quot; class=&quot;noborder&quot;<br />
onmouseover=&quot;swap('uniqid','image-flipped.png')&quot;<br />
onmouseout=&quot;swap('uniqid','image-original.png')&quot;&gt;<br />
&lt;img id=&quot;uniqid&quot; src=&quot;image-original.png&quot; alt=&quot;Alt T
ext&quot; /&gt;<br />
&lt;/a&gt;

The uniqid must be defined uniquely for each imageflip on a page. The class=&quot;noborder&quot; is a CSS class I defined to remove the box most browsers put around a link (e.g., on the mikeage.net logo above).

Enjoy.

SSH Keys, the Easy Way

‍‍ז׳ מנחם אב תשס״ה - Friday, August 12th, 2005

Quick Overview

You should be familiar with the basics of public key authentication for ssh. Implementing it is actually pretty easy, and remarkably useful. However, connecting between OpenSSH servers (linux) and commercial SSH2 (not the SSH2 protocol, but the ssh2 program) servers (like the one on many older solaris machines) can be quirky. So we'll cover it here.

OpenSSH -> OpenSSH

Notation Note

In general, we will be connecting from local to remote. Replace those names with your machine (e.g., in this example, the local machine is breeze, and the remote machine is mikeage.net). Also note that this process will have to be done in two directions, so you can go from LOCAL->HOST and then back from HOST->LOCAL.

Setting it up

What we're doing How Where
1. Generate SSH Keys ssh-keygen -t dsa -f .ssh/id_dsa breeze
2. Copy Public Key to the Remote Machine scp .ssh/id_dsa.pub mikeage.net: breeze
3. Add Public Key to the list of keys cat id_dsa.pub >> .ssh/authorized_keys2 mikeage.net
4. Set up permissions chmod 640 .ssh/authorized_keys2 mikeage.net

You can now ssh from breeze to mikeage.net without a password. Make sure never to let anyone get your private key file (keep permissions at 600). Public keys can (and should) be publically available.

OpenSSH -> SSH2

From OpenSSH (breeze), to SSH2 (solaris.mikeage.net)

The assumption is that the above has already been done. Note that following the public key ideas, the public key from breeze will be on solaris.mikeage.net. Since, however, SSH2 cannot read an OpenSSH key, we have to do a few tiny little changes first.

What we're doing How Where
1. Convert SSH Public Key ssh-keygen -e, then tell it where the public key is breeze
2. Create the public key file on the SSH2 machine vi .ssh2/id_dsa.breeze, then paste it in. mikeage.net
3. Add Public Key to the list of keys echo "key id_dsa.breeze" >> .ssh2/authorization mikeage.net

Done.

SSH2 -> OpenSSH

From SSH2 (mikeage.net), to OpenSSH2 (breeze)

Now, we'll need to generate a new set of keys on the SSH2 machine, and send its public key to the openssh machine. Again, we'll need to do some converting of the public key, this time to OpenSSH form.

Note that I recently updated this section to make it a little clearer.

What we're doing How Where
1. Create SSH Keys ssh-keygen -t dsa mikeage.net
2. Tell SSH2 who it is (don't ask) echo "idkey id_dsa_1024_a" >> .ssh2/identification mikeage.net
3. Set permissions chmod 600 .ssh2/idkey id_dsa_1024_a.pub .ssh2/identification mikeage.net
4. Copy the public key to the OpenSSH machine scp .ssh/id_dsa_1024_a.pub breeze: mikeage.net
5. Convert the public key, and add it ssh-keygen -i -f id_dsa_1024_a.pub >> .ssh/authorized_keys2 breeze

Enjoy.

Quick Map
Content +
Personal +
Archives +
Site Stuff +
RBS Weather +
Search +
Recent Images

Valid XHTML 1.1!
Printer Friendly Page
 

Last Modified: September 04, 2006 @ 02:11 CST

Memory(TRUE): 2097152/2097152
Memory(FALSE): 3054416/3064400