MaggsWeb:7

Form fields need to line up. OK. Historically this was achieved using a table, and masses of markup. Although that’s still acceptable and would not fail validation, there is an easier and better way that uses less code and where using the correct tags will also cause the ‘name’ field become focused when you clicked the ‘name’ label.

Using CSS we can achieve this using less code, while providing improved usability.

[More]

These are a wicked (and widely underused) way to wrap similar actions together with a nice little header.
When I first saw them in use I tried to recreate them using CSS, a background image, overlapping layers… Wooaah – Cool Head!! Noah was using these…

[More]

CSS makes repetitive tagging easier, so start out with something simple that will save time – Formatting Text – but do it properly and use ‘ems’.
[More]

Find switching between IE and FF annoying? Does the site jump sideways all the time? This is because IE will ALWAYS reduce the window size and display the scroll bar, even if it is not used. FF wont display it unless it is required (as it should be).
OK, this is the ‘wrong way solution’, but it solves the problem. Force the scrollbar in FF.
[More]

OK, Bear with this, its quite handy when you understand it.

Block Elements

 <div>, <p>, <h1>, <form>, <ul>, and <li>

* Always begin on a new line
* Height, line-height and top and bottom margins can be manipulated
* Width defaults to 100% of their containing element, unless a width is specified

Inline elements

<span>, <a>, <label>, <input>, <img>, <strong> and <em>

* Begin on the same line
* Height, line-height and top and bottom margins can’t be changed
* Width is as long as the text/image and can’t be manipulated

[More]

Reducing the file size and physical size of CSS files
[More]

Implementing a W3C valid, cross-browser compatible CSS2 ‘Box Model’, overcoming the bugs in IE without hacking.
[More]

If you use images in links, then you (like the rest of the world) probably hate the blue outline that they are given by default by being inside an <a href tag, so you add border=0 to every <img tag.  Fine. It works.

But here is a far nicer, cleaner solution that will save yourself valuable characters.  Add it to the stylesheet!

[More]