Proper use of HTML and CSS

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Hello everyone!

These lines were inspired by the "DIV without line breaks" posted by
Johnny Two Dogs on June 22.

I know it is an old issue, but I want to share a few remarks that could
be of interest for many members of this group.

A brief summary is given below. However, you may want to take a look
back at the original posting before continuing.

The problem was the replacement of some-text with some-other-text. Each
piece of text was wrapped in its own div, each pair of divs being
hosted in a column of a three column table. The replacement should
occur at a mouse click on an additional anchor. The replacement itself
would be carried out by hiding or revealing the appropriate div via a
javascript function. A simplified representation of the problem is
given below:

<a onclick="do-the-swapping">click-here-to-do-the-swap</a>

I am not going to explain the difference between visibility and display
that prompted Johnny's question - there were 12 posts about this at the
time (which makes mine the 13th Yuck!).

Instead I want to question if that complicated structure was really
needed. Let me explain this a little.

If you think of the innerText property that just about any html element
holding text exposes, then that heavy html structure can be reduced to:


The swap routine's duty would thus be to check if td.innerText equals
or not some-text and replace it with some-other-text accordingly (see
code snippet below).

As far as I know, both Internet Explorer and Netscape do support the
innerText property. For the browsers that do not support it, but at
least support the DOM (why bother if they don't?), one more step is

Quoted text here. Click to load it
case) is a node. To capture the text content of the node, one could use
this scheme:

1. get a reference to the node
   some-node = document.getElementById('id-of-td-element').firstChild;

2. compare text content of the node with some-text and swap it
    if = some-text then = some-other-text
    else = some-text

The use of the anchors (links) to trigger the swapping action, is a
matter of taste, perhaps a project requirement, and I only want to show
that, if desired, one could get rid of them too, making the html even

First, we must provide the user with a clue that something is clickable
in our table. Nothing easier. We could use the onMouseOver event with
some code like this:

<td id="td1"

But why clutter our html with such mile-long javascript code, when we
could use a very simple css rule instead:

.clickMe {cursor: hand;}

<td id="td1" class="clickMe">some-text</td>

Finally, the triggering of the swapping process itself can be done
using the onClick event:

<td id="td1" onclick="javascript:swap-them();">some-text</td>

These said, here's what I think to be a light solution to Johnny's
problem (doctype and other stuff omitted):

td {cursor: hand;} /* assume only one table in the html file */
function swapEm(elem, newValue, oldValue)
{elem.innerText = ( oldValue == elem.innerText )? newValue : oldValue;}
<table width="100%" border="1" cellspacing="0" cellpadding="4">
<td id="cell1" onclick="javascript:swapEm(this,'Changed 1','Original
1');">Original 1</td>
<td id="cell2" onclick="javascript:swapEm(this,'Changed 2','Original
2');">Original 2</td>
<td id="cell3" onclick="javascript:swapEm(this,'Changed 3','Original
3');">Original 3</td>

In the event your boss insists to keep that complicated structure, css
might also help make things easier. Using the className property, one
could create css rules similar with these:

.concealed {display: none;}
.revealed {display: block; visibility: visible;}

<td><div class="revealed">some-text</div><div

and then use the className in the comparison routine. Of course, here
we deal with multiple objects and thus the comparison routine should
look something similar to that posted by RobG, using td.className
instead of (this is really a matter of taste,
whichever better suits you).

These said, I hope I gave you something interesting to think about and
wish everybody Happy HTML Programming!

Re: Proper use of HTML and CSS

MB wrote:
Quoted text here. Click to load it

A mouseover effect is not a useful clue that a page element is
clickable. To be useful, a clue has to be apparent when the user's
*eyes* are on the element, not when the *cursor* is on it. If you
haven't already given him reason to think the element is clickable, why
would you assume a user would *ever* run the cursor over it?

Re: Proper use of HTML and CSS

Thanks for noticing this 'small' omission! The style sheet should've
also included the td {text-decoration: underline ;} rule, which is
obtainable WITHOUT extra elements (i.e. the anchor element). This was
actually the idea of my posting: light html and simple css rules.

Harlan Messinger wrote:
Quoted text here. Click to load it

Re: Proper use of HTML and CSS

To better undestand what I mean by simplier html code, consider the
original posting:

<li><a href="#" onClick="java-script-code;">click column 1 to change
<li><a href="#" onClick="java-script-code;">click column 2 to change
<li><a href="#" onClick="java-script-code;">click column 3 to change

In my version, one could say <p>Click values in the table to see them
changing</p> which is noticeable shorter. (This could be a clue for the
case they do not want the values in the table to be underlined)

Re: Proper use of HTML and CSS

MB wrote:
Quoted text here. Click to load it
Quoted text here. Click to load it

Microsoft's proprietary innerText is not widely supported beyond IE -
it is not supported in Firefox or Safari.

Quoted text here. Click to load it

Given that any browser since IE 5 that supports innerText will almost
certainly support DOM, it may be the better choice particularly if the
structure is simple (as per your example).  The non-standard but
widely supported innerHTML with a regular expression can also be used
to good effect to simulate innerText.

DOM 3 nodes have a textContent attribute, but support is not yet


Quoted text here. Click to load it


Quoted text here. Click to load it

The use of the javascript pseudo protocol here is unnecessary (unless
some other scripting language has been used previously). Removing it
nearly halves the code (if you're concerned about 'lightness' :-) ).



Site Timeline