CSS: Box Model Problem/Hack

The problem caused by different browsers way of interpreting a CSS element has emerge the need of CSS hack. The box model hack was developed by Tantek Celik, the lead developer of Internet Explorer for the Mac to solve the issue on IE 5 border and padding problem. The total width of the box SHOULD be calculated by adding the border thickness on the left and right, the padding on the left and right and the width of the content. Thus, Consider the following code:

background: #ff8132;
border: 5px solid #ff0000;
padding: 15px;
width: 100px;

The above code should create a box with a 5-pixel border and 15 pixels of padding around the content which has a 100 pixel width. This gave a total width of 140 pixels.

Unfortunately, some common browsers ( IE 6 and below) interpret this code incorrectly, Instead of applying the width to the content area, the width restrains the overall box size, so that the border and padding subtracted from the over width! So we are left with a box 100pixels width, but a content area only 60 pixel wide!!( width - left and right border+padding = 60 pixel)

This cause cross browser issues when displaying the same box on for example, IE and Firefox! Firefox will display a box of total width 140 pixel while IE will only display the same box with a total width of 100 pixel! To fix this, we need to use a hack, that is, we have to intentionally introduce code that doesn't work in one browser so that both boxes have the same width.(writting  a code that work in IE but fail in firefox so that both of them have 140 pixel)

We will be taking advantage of a bug in IE that causes it to ignore certain CSS so that it set the true width:

background: #ff8132;
border: 5px solid #ff0000;
padding: 15px;
<span style="color: #ff0000;">voice-family: "\"}"\";
voice-family: inherit;</span>
width: 100px;

But this will caused problems in Opera unless we add a definition after the above code

<code>html>body #test{
width: 100px;

This allows browsers that understand the parent/child selector grouping to correctly interpret your code. Nowadays, with IE 7 came along, this problem will not be shown on the newer browser but for older browser on old pc this is still a problem. Other than the box model problem, presently there are still problems exist on today browsers due to different implementation and interpretation by these browsers. The need of CSS hack is still needed so that cross browser issues caused by CSS can be eliminated.

Point to consider when building a dynamic site

Understanding layout on Web

All web layouts have two basic parts. The first part is the content area while the other part is filler. Based on this balance, there are four broad categories of web layout.

  • Unrestrained. The content is allowed to stretch horizontally from the left edge to the right edge of the window and vertically down to the bottom edge of the window which eliminate the needof filler.
  • Fixed width. The content is given a set fixed size on its width, restraining the content horizontally.
  • Fixed height. The content area is given a fixed length on its height, restraining it vertically.
  • Fixed size. Both height and width are given a fixed width restraining the content regardless of screen size.

Understanding Hypertext, Navigation  and Controls

  • Navigation: these are links used to move the visitor between different general sections and pages within the site
  • Controls: these are links or buttons used to perform a specific action, such as submit a form
  • Hypertext: these are links used to display additional information about the specific text being linked.

Four D's of Web Design

  1. Define
  2. Design
  3. Develop
  4. Deploy


In order to start designing a site, one have to collect, identify, and distill the information that will make up your site.

  • Collect your content
  • know your audience
  • establish your goals
  • plan features and interactivity
  • consider the graphic design style

These are the points must be taken into consideration when defining and planning the site.


  • Outline the site
  • create a site map
  • Sketch the layout grid
  • create a storyboard
  • define the look and feel

these are the points needed before designing the site.


  • prepare the content
  • create the code
  • create a template
  • Assemble the pages
  • test your site


The web site may be built and tested and its now ready to go live!

HTML: Values and Units

Length values

Length values come in two varieties:

  • Relative lengths, which vary depending on the computer being used.
  • Absolute values, which remain constant regardless of the hardware and software being used.

Relative lengths values:

  • em: Em dash
  • ex: x-height
  • px: pixel

Absolute length values:

  • pt: Point
  • pc: Picas
  • mm: millimeters
  • cm: centimeters
  • in: Inches

Color values

Color can be written in different way,

  • rgb(R#, G#, B#)
  • rgb(R%, G%, B%)
  • name


The behavior of percentage value depends on the property being used.


A uniform resource locator (URL) is the unique address of something on the Web.  URL can be written so that it cancel itself

<a href="#">Link</a>


<a href="javascript: void('')">Link</a>

In some situation placing any URL in the href will interfer with the DHTML functions so the latter code will be used instead. These function simply tells the link to do absolutely nothing.

Regular Expression

Regular Expression is used to search and manipulate text based on patterns in javascript. Here are the basic that we need to know in order to proceed further.

Regular Expression Basic

A normal regular expression will look like this


The above code will match "vsadfABCasd", "abcScw" or any combination that contain 'abc' regardless of case sensitive due to 'gi' given at the end of the pattern where the meaning are describe below,

gDo global pattern matching.
iDo case-insensitive pattern matching.

Some characters don't match themselves, but are metacharacters. You can match these characters literally by placing a backslash in front of them. For example, "" matches a backslash and "$" matches a dollar-sign. Here's the list of metacharacters:

 | () [ { ^ $ * + ? .

A backslash also turns an alphanumeric character into a metacharacter. So whenever you see a backslash followed by an alphanumeric character:

d D w W t s 3

you can get the meaning of the above metacharacter and a list of javascript regular express methods from here.


Any of those strings can trigger a match. That is, the preceding expression matches all of the following strings:

  • "Homer"
  • "Bart"
  • "Lisa Simpson"
  • "Simpson, Marge"

You can group various sorts with parentheses, as in the following expression:

/(Homer|Marge|Bart|Lisa|Maggie) Simpson/

this way it will match only "Lisa Simpson".

Defining Regular expression

One way to define a regular expression is to simply assign it to a variable:

var varName = /PATTERN/[g|i|gi];

Here's an example:

var child = /(Bart|Lisa|Maggie) Simpson/i;

Another way to create a regular expression is to define it as an instance of the global RegExp object:

var varName = new RegExp("PATTERN", ["g"|"i"|"gi"]);

Once again, the modifiers are optional. Now, take a look at the same regular expression defined in another fashion:

var child = new RegExp("(Bart|Lisa|Maggie) Simpson", "i");


Quantifiers say how many of the previous substring should match in a row. Here are a few quantifiers:

* + ? {4,8} {5,}

Quantifiers can only be put after atoms, assertions with width. They attach only to the previous atom, so if you want a quantifier to apply to multiple characters, you must group them together, like this:


This pattern matches "BartBartBart", whereas the following pattern matches the string "Barttt":


Greedy and Non-Greedy

i found this very useful when dealing with more than one exact match. '*', '+', and '?' qualifiers are all greedy; they match as much text as possible which is not desired sometimes; if <.*> is matched against '


', it will match the entire string, and not just '

'. So if we just want '

' we can add'?' after the qualifier to make it perform the match in non-greedy or minimal fashion; as few characters as possible will be matched.


A lookahead matches only if the preceding subexpression is followed by the pattern, but the pattern is not part of the match. The subexpression is the part of the regular expression which will be matched. I found this pretty useful when i want to exclude certain words during pattern matching.

(?=pattern) matches only if there is a following pattern in input.
(?!pattern) matches only if there is not a following pattern in input.

E.g: /Vista(?=pro)/ matches 'Vista' only if 'Vista' is followed by 'pro'.

E.g: /Vista(?!pro)/ matches 'Vista' only if 'Vista' is not followed by 'pro'.


Backreferences are references to the same thing as a previously captured match. n is a positive nonzero integer telling the browser which captured match to reference to.

/(S)1(1)+/g matches all occurrences of three equal non-whitespace characters following each other.
/<(S+).*>(.*)/ matches any tag.

E.g: /<(S+).*>(.*)/ matches '

' in "text

Character Set

Matches any of the contained characters. A range of characters may be defined by using a hyphen.

[characters] matches any of the contained characters.
[^characters] negates the character set and matches all but the contained characters

E.g: /[abcd]/ matches any of the characters 'a', 'b', 'c', 'd' and may be abbreviated to /[a-d]/. Ranges must be in ascending order, otherwise they will throw an error. (E.g: /[d-a]/ will throw an error.)
/[^0-9]/ matches all characters but digits.


The following regular expression matches something similar to an HTML tag.


so "
" will be a match!

The following regular expression matches matches a string (at least four-characters long) whose first two characters are also its last two characters, but in reverse order.


so "abcdefba" will be a match!
The following regular expression will swap the first two words of a string

s/(S+)s+(S+)/$2 $1/

In JavaScript this would be:

str = str.replace(/(S+)s+(S+)/, "$2 $1");

here shows how some of the regular express methods are used.

Tutorial: Making a template for concrete5

I will try to show you how to create a simple concrete5 template! You can also learn it yourself by watching this video on c5 website.

Firstly, download a template from any template site and save it on your computer. For my example, i will visit http://www.freewebsitetemplates.com/ and download the template 'Music shop template'.

template location

Once the downloaded file has been unzip you should see the following files,


In order to make c5 recognize our template, we will have to make a little changes on this static html template.

Firstly, we have to change the file 'index.html' to 'default.php'

Secondly, we have to add a new .txt file called 'description.txt'. This file will describe our template on C5. Note that the first line will be the name of the template and the second line will be the description of our template as shown below.


Thirdly, we will add a thumbnail for our new template. This thumbnail should be the size 120x90 graphic image, .png extension and name thumbnail.png.


This is all we need for our new template to be recognize by C5 but we still have an important thing we will need to do before the template work flawless with C5! We will need to edit the content of 'default.php' that we have changed previously. The following shows the changes made on the file.



This might get a bit complicated but i will try to explain it clearly. The above picture highlighted in red boxes is the command given to C5 so that C5 is able to distinct which areas are editable.

    $a = new Area('Main Content 1);

We see the above code shown on the second picture highlighted boxes. This tells C5 which part is editable and the editable area is a content area with the name 'Main Content 1'.

    $a = new Area('header nav');

This tells C5 that this is a navigation bar on the header level which gave it the name 'header nav'. If another name is given, it will be categorized as a new type. Thus, there are a few standard names used in C5 to allow C5 to identify what does the editable area represent.

<?php Loader::element('header_required'); ?>

This is the most important instruction for our template! Without this, the edit bar will not be shown on top of our new template! We placed this between the tag as shown on the first picture above.


Lastly, this code is placed on EVERY src or href that tells the template where to retrieve our css/javascript/images. Thus, for every html code written with src="" or href="" to retrieve css/javascript/images we must place the above code to tell the template where is our new location in C5.


The picture above shows the end result files that should be contained in the template file we have downloaded after all of the changes we have made.

Once you get the files shown on the above picture, we will copy this template folder to c5 'theme' folder. Then proceed to login to your c5 control panel account and go to section 'Pages and Themes' you will see a new theme that we have just created!


Click install and activate it! viola~

if you edit the new theme you will see the below result.


Hope this helps =)

Update: 1st April 2009

i have recently created a concrete5 for someone at cocoonsg.com. They have fully ultilized the ability of c5 which i'm quite impressed with~