Simple CSS gridding

I thought I wrote this article a while ago, but it seems to have disappeared. Anyway, in this session we will be creating a simple generic CSS gridding system that will allow your site to be split up into columns. Columns make it easier for visitors to follow your content and provides a clear structure to use with your site.

This is a sort of CSS framework, but it is very easy to use – with notations such as the below:

<div class="spans-4 columns"></div>

That will create a division that spans four columns. Simple. But what is there to it?


Server troubles

Recently we’ve had some troubles with our server – we ran out of disc space and were stuck in stasis with the machine refusing remote connections. However, things are fixed and back to normal now, in time to save us from visitor and search engine ranking oblivion. So, enjoy!

Conditionals and function execution in PHP

Just an interesting thing I discovered – if you place a series of functions in a conditional with AND comparison, they are executed sequentially and as soon as one returns false the conditional is exited, without executing the others.

For example, consider this if statement:

if (function1() && function2()) { }

In this statement, first function1() is run. If it returns true, the interpreter goes on to execute function2(), but if it returns false then function2() is not called! This means that in the following case nothing will be output.

function function1() {
    return false;
function function2() {
    echo "Function2 was run!";
    return true;
if (function1() && function2()) echo "Both true";

Checkboxes and passing multiple values through arrays

When creating a form, one way to get users to select a conbination of elements out of several is to use a series of checkboxes. On the server end, however, without going to the length of naming each checkbox individually then running through all of them (which could get irritating when there are lots of checkboxes or they are generated dynamically), how do you know which ones have been selected?

The answer is to use one name for all the checkboxes in each group, but to put at the end of the names the two characters [] – which indicate that they belong to an array. Then, when you recieve the form, the checked values will simply have populated an array with the same name as the name you gave the checkboxes.

Option 1: <input type="checkbox" name="check[]" value="option1" />
Option 2: <input type="checkbox" name="check[]" value="option2" />
Option 3: <input type="checkbox" name="check[]" value="option3" />
Option 4: <input type="checkbox" name="check[]" value="option4" />

Flood control in PHP

Many web applications allow users to add content, such as posting on forums or commenting on blogs. Here is a way to make sure no-one floods the input by repeating the same action over and over again in a short space of time.

For this, we’ll be using the clients’ IP (v4) addresses to determine who they are. First, we’ll set up a small table (fcontrol) which will store IP addresses and the last time they did certain actions (in this case, commenting on a blog and registering for an account) as UNIX timestamps.


Really simple PHP pagination

Recently, the post count became so high for this blog that I had to implement pagination for them. Pagination can be quite troublesome sometimes, but eventually I came up with a really simple solution.

For the page, we simply use the querystring. In this example, let us use $_GET['page'] to initiallize the $page variable. If the GET var isn’t set we default to page 1.

$page = isset($_GET['page']) ? (int) $_GET['page'] : 1;


Semantic markup and the sea of divisions

Many times I have heard people say “Don’t use tables for layout, use divisions and CSS”, or “I’m going to make my site using divs and CSS”. While this is true, and you shouldn’t use tables for many perfectly valid reasons, it must be kept in mind that there is more to HTML than the <div> tag.

Divisions are very useful when creating CSS-based designs because they are semantically neutral. This means that they have no meaning, and therefore can be used anywhere (where they are syntactically valid). However, a purely divisioned HTML document is a very un-semantic document.


Output buffering and static content inclusion - PHP

When I started making this site, I was thinking up of a new way to make the inclusion system for including (i.e. through include()) the static header and footer’s HTML for each dynamic page that was displayed.

The problem was, I couldn’t go by my old way of include("header"); include("content"); include("footer"), because I wanted a variable title for each content page, and the only place to set that was in the content file, but it needed to be echoed in the header’s markup.


The weirdness of SGML

Recently, I was browsing through the HTML 4.01 Strict DTD and some other material on SGML, and I was suprised to find just how … accepting HTML is. After some exploration, I discovered even the following document validates (all of it is shown).

<HEAD<TITLE>Test</> <BODY<P<IMG SRC=test.jpg ALT=validation> This document validates... somehow...

This uses the “obscure” feature of SGML-based languages known as SHORTTAGS – which means that if unambiguous enough tags don’t have to be closed, and if necessary they can be closed with </>, instead of stating the full name.

However, hardly any of us exploit these features, so, this is yet another reason to use XHTML – because we almost do so anyway, most of the time! Unless you need to save space, that is…

IE6 overflow:visible bug

When we redesigned the RoundedDesign site, there were several interesting things I discovered, as I tried to make the site work in the omni-irritating Internet Explorer 6. One of these was the problem IE 6 has with the overflow:visible CSS property.

in IE 6, if you give a fixed-height element the overflow:visible property, instead of keeping the element at the height you gave it IE will expand that element. This is what happened to my menu, for instead of allowing the tabs to overlap the border of the body it pushed the bottom of the header down. Irritating!

However, after searching for a while I found a good (if slightly weird) solution: if you give the element overflow:hidden and its child that overflows position:relative, IE 6 will consider this overflow:visible. This unfortunately doesn’t happen in IE 5.5 and under, but since their market share is so low we don’t really need to consider them.

Therefore, the fix is simple. Say you had the .overflows element (100px) inside the .fixedheight element (50px) then you just have to use an IE 6-only hack (such as my favourite, the star hack), to assign overflow:hidden to .fixedheight and position:relative to .overflows.

/* Normal CSS */
.fixedheight { height:50px; overflow:visible; }
.overflows { height:100px; }
/* IE 6 CSS */
* html .fixedheight { overflow:hidden; }
* html .overflows { position:relative; }

Simple but weird.