HTML & XHTML

Various important things I noticed when writing HTML & CSS code.

HTML

Forms

If you use the GET method on a form, on the action URL, don't give an URL already containing variables encoded in GET style. The browser will just rebuild the URL when you submit the form, and thus the variables will be ignored. Eg, something like:

<form action="myurl.html?myVariable=yes&myCounter=3" method="GET"><button type="submit></button></form>

won't work. If you want to pass variables and use a GET method, just create hidden input fields.

Tables

• <div> elements are not permitted, only and .

Inner Frames (iframes)

• DISCLAIMER: iframes are bad; do not use them if you can avoid that.

• POSTing to an iframe from the outside is possible, see the code below:

  <iframe src='form_handler.php' frameborder="0"  name="reference_tag" />

  <form method='post' action='form_handler.php' target='reference_tag'>
      <input type='text' value='Random text'>
      <input type='submit'>
  </form>

Note that the src attribute on the iframe is not mandatory with this technique.

CSS

Margins, paddings and borders on a table

Margins don't seem to work at all with table elements (it would work with the table itself, though). Paddings seem to work only with elements, not . So the recommended way to specify spacings between elements in a table is through the specific 'border-spacing' property. Note that this property should be applied to the table element, not the . Note that the border property, specifying the border of the cell, should be on the contrary applied to each cell, like this:

table.with_borders td {border: 1px solid black; padding: 3px;}

If you write this, borders will have in fact most of the time 2 pixels, because the borders will not be merged between two cells. If you want them to merge (and thus always have only 1 pixel), use border-collapse: collapse; in your table element.

You can specify certain properties to be applied to an entire column in a table (for exemple the 'border' property). However not all properties can be such applied, apparently. For example, I don't know how to apply the text-align property to an entire column (or if it is even possible).

Selectors

To apply an "AND" on a selector in CSS (for example, to apply a style to elements belonging to two classes), just repeat the normal selector, like this:

*.first_class.second_class

This would probably also work on class and ID, etc (untested yet):

*.first_class#my_id

To select every column in a table except the first one, use the following selector:

tr td + td

To eliminate the first row from the selector, just add tr +:

tr + tr td + td

Display

• Note that display: inline; does not restrict the width whatsoever. This means that if you have a <div> element with display: inline, and a child that creates a block element like <p>, the child element will take all the place available. This will actually nullify the effect of the parent display: inline property.

• display: inline-block; is currently NOT supported on Firefox (although support is already implemented in CVS as of May 2007), and only partially supported in IE. This means: do not use it.