ExpressionLab - Home

Free CSS Toolbox

2008-12-29T11:48:00Z

Web developers always care about standards compliant coding and cross-browser compatibility. A great tool to help in that is Free CSS Toolbox from Blumentals.

Free CSS Toolbox is a simple, lightweight editor that offers auto-complete and syntax highlighting for CSS code. Main features include:

Syntax checking against various specifications (CSS Level 1, CSS Level 2, CSS Level 2.1, CSS Mobile Profile 1.0)
Syntax checking against various browsers with useful warning/error messages (IE 5/5.5/6/7, Firefox 2.0, Netscape 7/8, Opera 7/8/9)
Code validation with W3C CSS Validator
Code re-formatting with many options
Code compression
Best of all, it's free

By the way, Blumentals offers a more advanced CSS editing tool, Rapid CSS Editor, which costs $29.85 for a personal license and $39.85 for a commercial one.

Running Aptana/Eclipse and InstantRails from a USB Drive

2008-12-13T09:18:00Z

If you are using Aptana Studio for Ruby on Rails development, you may have to repeat several boring tasks to get them up and running on a different computer. First, you need to install Ruby, Rails and MySQL. Then, you need to download and install Java, Aptana Studio and Aptana RadRails plugin. Finally you need to configure Aptana for Rails development. In addition, you may need to install some Aptana plugins and Rails gems. If you don't want to go through all these steps, you can just put everything on a USB drive and go. Here is how.

Create a new folder on your USB drive and name it aptana-live, or anything you want
Go to the Aptana Studio download page and download the Windows standalone Zip File, not the Full Installer. It may be called something like Aptana_Studio_Setup_Windows.zip
Unzip Aptana_Studio_Setup_Windows.zip to the /aptana-live folder
Download and install Java
Copy the folder containing Java Runtime files to the folder /aptana-live/java-files. For me, the Java folder was C:\Program Files\Java\jre1.6.0_07
For Aptana to know the Java location, edit the /aptana-live/AptanaStudio.ini file by adding two lines at the top to be something like this:
```
-vm
.\java-files\jre1.6.0_07\bin\javaw
-name
Aptana
Studio
-vmargs
-Xmx384M
-Xms128M
-Djava.awt.headless=true
```
To take Ruby, Rails and MySQL with you, just download and unzip InstantRails to the folder /aptana-live/InstantRails
Run Aptana by running /aptana-live/AptanaStudio.exe
To install Aptana RadRails plugin:
1. From Aptana "Help" menu, select "Software Updates" > "Find and Install..."
2. Choose "Search for new features to install" and press "Next"
3. Select "Aptana: RadRails Development Environment" and press "Finish"
4. Follow the wizard to the end
To configure Aptana:
1. From Aptana "Window" menu, select "Preferences..."
2. In the the preferences window, select "Rails" > "Configuration" and fill the paths to rails and mongrel scripts: \InstantRails\ruby\bin\rails and \InstantRails\ruby\bin\mongrel_rails
3. In the the preferences window, select "Ruby" > "Installed Interpreters". You may find JRuby selected by default. Press "Add" and fill the path to RubyVM home directory: \InstantRails\ruby. Press "OK"
4. In the the preferences window, select "Ruby" > "Rake" and fill the path to the rake script: \InstantRails\ruby\bin\rake
5. Press "OK"

Now you can just take your USB drive to any computer with a clean Windows installation and continue developing your Rails applications instantly.

Quickly Open Command Prompt Window on Any Folder in Windows

2008-12-13T08:33:00Z

While developing under Windows XP, I frequently open a Command Prompt window and go through many cd commands to change to a specific folder. This gets worse when the folder is deeply nested. So I searched for a better solution that allows accessing the Command Prompt from Windows Explorer. Good news, I found it!

The solution is one of the nice Microsoft PowerToys for Windows XP. As they state, PowerToys are additional programs that developers work on after a product has been released.

Just download the Open Command Window Here toy and install it. Once installed, you will find a new item added to the context menu that shows when you right-click any folder. This item will open a Command Prompt window with that folder as your active directory. Nice toy!

If you are using Windows Vista, you don't need to install anything. Just press the SHIFT key when you right-click a folder to get the same option.

Thinking Sphinx in Arabic/Unicode

2008-11-19T19:14:00Z

While using Thinking Sphinx in one of my Rails projects, I needed to search Arabic content. Since Sphinx supports Unicode, I thought that would be easy. But it was not due to the lack of documentation of Unicode support through Thinking Sphinx. So here is what to do to support Arabic (Unicode) search.

After reading a little in Sphinx documentation, I knew that to support non-English languages I had to create a charset_table for Sphinx to use while indexing my data. After some research, I found a nice charset table for several languages. So, I went to the configuration file created by Thinking Sphinx (app/config/development.sphinx.conf) and added an English/Arabic charset_table. I stopped, reindexed and restarted searchd. Then, tried to search Arabic with no luck! I noticed that my new configuration, including charset_table, was gone! Why? Thinking Sphinx regenerates the configuration file before reindexing!

After a lot of research, I discovered that to add your custom configuration, you must create the file app/config/sphinx.yml which Thinking Sphinx will use to override its default configuration. Hey, why didn't any one tell me that?!

After 2 hours of YAML syntax errors, I did it. Here is my sphinx.yml:

development: &my_settings
  enable_star: true
  min_prefix_len: 0
  min_infix_len: 1
  min_word_len: 1
  charset_table: "0..9, a..z, _, A..Z->a..z, U+621..U+63a, U+640..U+64a, U+66e..U+66f, U+671..U+6d3, U+6d5, U+6e5..U+6e6, U+6ee..U+6ef, U+6fa..U+6fc, U+6ff"
test:
  <<: *my_settings
production:
  <<: *my_settings

Other Settings

min_word_len: 1
Setting the minimum indexed word length to 1 means index everything.
min_prefix_len: 0
Setting the minimum word prefix length to index to 0 disables prefix indexing. If set to a positive number, indexer would index all the possible keyword prefixes (ie. word beginnings) in addition to the keywords themselves.
min_infix_len: 1
Setting the minimum infix length to index to 1 asks the indexer to index all the possible keyword infixes (ie. substrings) in addition to the keywords themselves. This allows wildcard searching by 'start*', '*end', and '*middle*' wildcards. However, indexing infixes will make the index grow significantly (because of many more indexed keywords), and will degrade both indexing and searching times. Note that you can't enable both prefix and infex indexing at the same time; that's why I disabled prefix indexing.
enable_star: true
This enables "star-syntax", or wildcard syntax, when searching through indexes which were created with prefix or infix indexing enabled. It only affects searching; so it can be changed without reindexing by simply restarting searchd.

Now, stop, reindex and restart searchd:

rake thinking_sphinx:stop
rake thinking_sphinx:index
rake thinking_sphinx:start

Finally, for the wildcard search to work, your controller should look something like this:

class PostsController < BaseController  
  def search
    @posts = Post.search "*#{params[:search_query]}*"
  end  
end

You should be enjoying Arabic search now.

Replacing Tabs with Spaces in Aptana (Soft Tabs)

2008-11-19T17:27:00Z

While using Haml in Aptana, I had a problem with line indentation. Since Haml uses space indentation to represent the HTML structure (two spaces for each level), indenting multiple lines with the "tab" characters would result in Haml errors. I tried to search for the word "tab" in Aptana's "Preferences" window but didn't find what I wanted. Here is how to enforce Aptana to replace tabs with regular spaces (soft tabs).

From Aptana "Window" menu, select "Preferences..."
In the the preferences window, select "Aptana" > "Editors"
In the "General" tab of the "Editors" window, select "Use spaces" under "Tab Insertion"
Click the "edit" link besides the "Use spaces" option to open the general "Text Editors" window
In the "Text Editors" window, set the "Displayed tab width" to "2"
Press "OK"
Enjoy two-spaces tabs

Haml/Saas Syntax Highlighting in Aptana/Eclipse

2008-11-09T13:39:00Z

UPDATE: Some people reported problems while downloading the files. Now, you can download them from here.

Recently, I have been using Haml in some my Rails projects. It simply makes your views clean and readable. One issue I had was syntax highlighting in my favorite IDE, Aptana Studio. The Haml syntax highlighting support has been stopped a while ago and more issues have raised after Aptana recent updates.

After some research, I found a solution posted by Max Kostovetski, a member of Haml Google group. Now, to the steps:

Download the following files to your hard drive:
From Aptana "Window" menu, select "Preferences..."
In the the preferences window, select "Editors" > "Generic Text"
Press "Add..." to add new file extensions: *.haml and *.sass
For each of the new extensions, click it and press "Browse..." to select the proper lexer file (*.lxr)
For colorization, press "Import..." to import the *.col files
Press "OK"
Enjoy you Haml views

Thinking Sphinx on Windows

2008-11-02T17:46:00Z

In one of my Ruby on Rails projects, I needed a full-text search engine to integrate. And after some research, I decided that Thinking Sphinx is the way to go. It seemed simple, fast and well documented. Unfortunately, I had some issues when tried to get it running on Windows.

The first step is installing Sphinx itself. While this looks simple, it took me five hours to move to the next step!

When I checked Sphinx documentation, it said that I needed Microsoft Visual C/C++ Studio to compile the source code! What? This is another project. After some (a lot of) research, some people suggested that I just needed to download the binaries, not the source code, and add the bin folder to the Windows Path environemnt variable. I tried that, but got errors later when tried to index data. So here is what works:

Go to Sphinx downloads page and download the Win32 release binaries with MySQL support. At the time of writing it is sphinx-0.9.8-win32.zip. Of course, you should get the one with PostgreSQL support if you need it.
Unzip the downloaded file and open the bin folder. Select and copy all files and paste them in your ruby/bin folder. If some files are already exist in your ruby/bin folder, don't replace them.
Install the Thinking Sphinx plugin:

ruby script/plugin install git://github.com/freelancing-god/thinking-sphinx.git

To set a model to be indexed, add some fields and attributes (refer to the primer):

class Post < ActiveRecord::Base  
  define_index do   
    #sphinx fields
    indexes title
  end  
end

Tell Sphinx to index the data:
```
rake thinking_sphinx:index
```
Now, you may get something like this in your console:
```
rake thinking_sphinx:index
Generating Configuration to F:/InstantRails/rails_apps/community/config/development.sphinx.conf
indexer --config F:/InstantRails/rails_apps/community/config/development.sphinx.conf --all
```
It seems that it couldn't continue. To solve this, make sure you copied all the .exe files from sphinx-0.9.8-win32/bin to ruby/bin. If you keep getting the same result, you may need to copy the libmySQL.dll file from mysql/bin to ruby/bin (check this post for details). Now, you should get something like this:
```
Generating Configuration to F:/InstantRails/rails_apps/community/config/development.sphinx.conf
indexer --config F:/InstantRails/rails_apps/community/config/development.sphinx.conf --all
Sphinx 0.9.8-release (r1371)
Copyright (c) 2001-2008, Andrew Aksyonoff

using config file 'F:/InstantRails/rails_apps/community/config/development.sphinx.conf'...
indexing index 'post_core'...
collected 2 docs, 0.0 MB
collected 0 attr values
sorted 0.0 Mvalues, 100.0% done
sorted 0.0 Mhits, 100.0% done
total 2 docs, 27 bytes
total 0.030 sec, 904.37 bytes/sec, 66.99 docs/sec
distributed index 'post' can not be directly indexed; skipping.
```
Also, note the newly generated files:
- config/development.sphinx.conf
- db/sphinx/development/post_core.spa
- db/sphinx/development/post_core.spd
- db/sphinx/development/post_core.sph
- db/sphinx/development/post_core.spi
- db/sphinx/development/post_core.spm
- db/sphinx/development/post_core.spp
Great! But what was that last line about? Don't worry, Pat says it's OK:
A distributed index is made up of other indexes. It doesn't need to be indexed, but Sphinx tries to anyway, and then complains when it can't. I'm not sure about the reasoning for this, but it's not important: You can ignore the error, it doesn't stop anything working, searching and indexing will happen as expected.

Start a Sphinx searchd daemon:

rake thinking_sphinx:start

You should get something like this:

searchd --config F:/InstantRails/rails_apps/community/config/development.sphinx.conf
[Wed Oct 29 14:26:44.390 2008] [ 2796] WARNING: forcing --console mode on Windows
[Wed Oct 29 14:26:44.390 2008] [ 2796] using config file 'F:/InstantRails/rails_apps/community/config/development.sphinx.conf'...
[Wed Oct 29 14:26:44.406 2008] [ 2796] creating server socket on 127.0.0.1:3312
[Wed Oct 29 14:26:44.406 2008] [ 2796] accepting connections

Now, you are ready to search. To test it, you can modify the index action as follows:

class PostsController < BaseController
  def index
    @posts = Post.search params[:search]
  end  
end

And your view may look like this:

<% for post in @posts %>
  <h2><%=h post.subject %></h2>
  <%=h post.body %>
<% end %>

Now, navigate to /posts?search=myword where myword is a string that can be found in the title of some of your posts. You should see that the results are filtered according to the keyword sent.

Congratulations! You are thinking sphinx on Windows.

Installing CommunityEngine on Rails 2.1

2008-10-26T16:01:00Z

In a previous post, I talked about why we chose CommunityEngine. And due to the lack of documentation and several issues I had, I thought it would be useful to go through the installation steps and handling some issues.

Requirements

Required gems

Rails 2.1.0
rake 0.8.1
rmagick
hpricot
htmlentities
RedCloth
haml
aws-s3 (if using Amazon S3 for photos)

Notes for Windows users

hpricot:

gem install hpricot ––source http://code.whytheluckystiff.net

rmagick:

Download the latest version of rmagick-win32. At the time of writing, it is RMagick-2.6.0-ImageMagick-6.4.3-6-Q8.zip
Extract the zipped file and run the installer
Install the gem you downloaded:

gem install rmagick --local

Restart Windows

Installation

Create a new Rails app:

rails community -d mysql

Install the engines plugin:

ruby script/plugin install git://github.com/lazyatom/engines.git

Put the community engine plugin into plugins directory:

git clone --depth 1 git://github.com/bborn/communityengine.git vendor/plugins/community_engine

Create the databases:

rake db:create:all

Rename public/index.html to index_backup.html

Modify your environment.rb to look like the following:


RAILS_GEM_VERSION = '2.1.0' unless defined? RAILS_GEM_VERSION
require File.join(File.dirname(__FILE__), '../vendor/plugins/engines/boot')
Rails::Initializer.run do |config|

#resource_hacks required here to ensure routes like /:login_slug work
config.plugins = [:engines, :community_engine, :white_list, :all]
config.plugin_paths += ["#{RAILS_ROOT}/vendor/plugins/community_engine/engine_plugins"]
...
end
require "#{RAILS_ROOT}/vendor/plugins/community_engine/engine_config/boot.rb"

Modify all environment files ('development.rb', 'test.rb', and 'production.rb') by adding:

APP_URL = "http://localhost:3000"

Modify your routes.rb by adding this after any of your own existing routes, but before the default rails routes:

map.from_plugin :community_engine
map.connect ':controller/:action/:id'
map.connect ':controller/:action/:id.:format'

Generate the community engine migrations:

ruby script/generate plugin_migration

Migrate the database:

rake db:migrate

Run your tests:

rake test

Run CommunityEngine test:

rake community_engine:test

Start the server:

ruby script/server

Go to /signup to create a new user
To set a user as admin:

rake community_engine:make_admin email=user@foo.com

To activate the user, follow the activation link sent in the email (or appeared in the log after creating the user) or use this query:

update users set activated_at = current_date where id = 1

Enjoy!

Common Issues

On Windows, if the app run without any css and the console shows a warning: Couldn't create the public file structure for plugin 'community_engine', modify engines.rb,line 147 to be:

base_target_dir = File.join(destination, File.dirname(source_files.first).gsub!(source, ""))

If you get a warning: DEPRECATION WARNING: You're using the Ruby-based MySQL library that ships with Rails. This library will be REMOVED FROM RAILS 2.2, do this:

gem install mysql

Customization

Do NOT edit any file of CommunityEngine plugin so you can replace it when updates are available in the future
You can edit app/config/application.yml to override the default configuration defined in /vendor/plugins/community_engine/engine_config/application.yml
Any views you create in your app directory will override those in /vendor/plugins/community_engine/app/views
Creating an identically-named controller in your application's app/controllers directory, mixes your code with CommunityEngine's (your code takes precedence)

To mix models code, you must require the CommunityEngine's model first (check this). Otherwise, your model would completely replace CommunityEngine's. For example: app/models/country.rb

require_dependency "#{RAILS_ROOT}/vendor/plugins/community_engine/app/models/country.rb"

class Country < ActiveRecord::Base  
  def self.find_countries
    find(:all, :order => "name")
  end  
end

For more info, check the readme file of CommunityEngine: /vendor/plugins/community_engine/README.markdown

Resources

Home Page: http://www.communityengine.org/
GitHub: http://github.com/bborn/communityengine/tree/master
Documentation: http://www.communityengine.org/documentation.html
Google Group: http://www.communityengine.org/group.html

We Chose CommunityEngine for a Rails Social Network

2008-10-21T11:35:00Z

Last week, I and Mosta were about to start a new project at eSpace, a social network in Rails. And instead of reinventing the wheel, we decided to check the available solutions to choose one to build on. Here is why we chose CommunityEngine.

The main reason is that CommunityEngine offers a huge list of features that are, by the way, not mentioned on their website!

Here is the list we discovered after installing it and checking the code:

Authentication (sign up, activation, log in)
Roles: admin, moderator, member
Internationalization support
Theme support
User profiles, avatars
Basic forums (Beast forums) with moderation and monitorship
Friendships and activity feeds
User search
Blogs with categories and tagging
Send post to friend
Adding a poll to a post
Social bookmarking links
Photo uploading and tagging
Invitations
Events
Contests
Clippings - visual bookmarking
Favoriting of clippings and blog posts
Commenting on blogs, profiles, photos, and clippings
Comment notification by e-mail
Simple ad management
Rich text editing
Administration
Statistics

Of course, we needed many other features but that was just a great start. And the good news is that CommunityEngine is a plugin that can be easily added to an existing application and can be updated when new updates are available. Also, it uses Rails Engines making it easy to customize.

On the other hand, currently we are trying to resolve some issues:

Upgrading to Rails 2.1.1, as both CommunityEngine and Rails Engines didn't upgraded it. We are on Rails 2.1.0 now.
Supporting PostgreSQL, as we got some errors with some queries when we tried to run on it.
Little test errors on Windows machines!

Later, hopefully :-), we may talk about how to handle these issues.

tog, An Open Source Social Network Platform for Ruby on Rails

2008-10-13T07:11:00Z

Few months ago, I have talked about some helpful open source solutions for building a social network with Ruby on Rails. Today, a new member has joined the family. Unlike other solutions, tog doesn't believe in generic social networks. Instead, tog is a collection of useful plugins that can easily add social network features to your Ruby on Rails application.

In addition to these useful plugins, tog is released under the unrestrictive MIT license and was designed to make developing and integrating new plugins easy.

One thing I noticed is that the current plugins don't provide a discussion board or forums functionality. May be this would be my contribution :-)

Here is a summary of the currently available plugins and features included:

tog_core

Base controllers for member and admin actions
Base dashboards controller (public, member and admin)
Dependency declaration for common social features (comments, tags, activity, etc.)
Abuse and comments management
Configuration management
Helpers for user interface, config access, etc.
Patches and libraries
System wide searching functionality

tog_user

Login, logout and signup processes
Password reminder
Activation process
recaptcha support
User login or email as key
Administration interface

tog_social

Profiles (including photos)
Groups (including images)
Moderated and open groups
Public and private groups
Invitations for joining a group
Bi-directional friendships
Followers and fan friendships

tog_conversatio

Multiblog system
Multiauthors blogs
Atom subscriptions
Blog’s archives
Tag clouds per blog and global
Draft & published status

tog_mail

Multiple folders
Send messages to your friend list
Send messages to a given user

tog_picto

Photos grouped in photosets
Photoset-defined privacy
Multiple sized for each photos
Comentable, rateable and taggable photos and photosets

tog_vault

Pages
Children pages
Helper for include pages on views
HTML editor
Small publication workflow (draft-approved-published)

Microsoft Windows Cloud

2008-10-03T07:24:00Z

Last Wednesday, Microsoft CEO Steve Ballmer announced releasing a new operating system within a month. The new operating system is not a replacement of Windows 7. It is not intended for normal users neither. Instead, it is intended for developers of Internet-based applications. So, the code name is Windows Cloud.

"We need a new operating system designed for the cloud and we will introduce one in about four weeks, we’ll even have a name to give you by then. But let’s just call it for the purposes of today Windows Cloud," Ballmer said

Cloud computing is Internet based development and the cloud is a metaphor for the Internet and is an abstraction for the complex infrastructure it conceals.

Will Windows Cloud include Internet-based versions of the regular Windows applications? May be!

eSpace Launches Jsoor.. Jsoor Lanches Alsaha

2008-09-21T12:59:00Z

Today, eSpace has launched Jsoor, the new spin-off that will offer web development services. Interestingly, on its first day, Jsoor has launched the new version of Alsaha, the largest Arabic online community.

It seems that a lot of new surprises are coming soon.

Installing Mephisto 0.8 on Rails 2

2008-09-17T05:50:00Z

Finally I'm done with installing and running mephisto for ExpressionLab. ExpressionLab now is powered by mephisto. However, It was not that easy so I thought documenting it may help me in the future and may save someone else's time. Actually, a lot of time.

Well, if you don't know, mephisto is a simple, elegant and free Ruby on Rails blogging system that can run fantastic websites like the one you are reading now :)

Unfortunately, due to the lack of documentation, especially after releasing mephisto 0.8 that supports Rails 2, it took me a long time to get it installed and running. The good news is that I will show you how I did it. So, to the tutorial...

First of all, you should know that mephisto 0.8 has some issues with Ruby 1.8.7. So you will have to downgrade to Ruby 1.8.6 if already upgraded. Actually, Rails itself recommends Ruby 1.8.6.
To download mephisto 0.8, I tried github but it did not install successfully. Finally, I found a working version at RailsPlayground. So, go to your hosting shell and download it from http://downloads.railsplayground.net/mephisto-0.8-railsplayground.zip

Now, extract the file you downloaded:

unzip mephisto-0.8-railsplayground.zip

Then, rename the folder:

mv mephisto-0.8 mephisto

Log in to your hosting control panel and create a database, say mephisto_db, and a database user, say mephisto_dbuser. Then, make sure to assign the user to the databse with all privileges.

Rename the file database.example.yml to database.yml:

mv mephisto/config/database.example.yml mephisto/config/database.ym

Edit the config/database.yml and update the production database definition to match the database and database user you created:

vi mephisto/config/database.yml

production:
  adapter: mysql
  database: mephisto_db
  username: mephisto_dbuser
  password: yourpassword
  host: localhost

Update your application with latest Rails:
```
cd mephisto
rake rails:update
```
Create mephisto's database tables:
```
rake db:bootstrap RAILS_ENV=production
```
To install mephisto on your main domain, yoursite.com for example, you will need to create a symbolic link from your public_html direcotry to mephisto’s public directory. Remember to backup your public_html first:
```
mv public_html public_html_backup
ln -s ~/mephisto/public ~/public_html
```
Congratulations! You can access your blog using this URL (the slash at the end is a MUST):
yoursite.com/mephisto/
And the admin site is:
yoursite.com/mephisto/admin/
To install mephisto on a subdomain, blog.yoursite.com for example, just login to your hosting control panel and create a new subdomain that points to mephisto/public. Now, you can access your blog using this URL (the slash at the end is a MUST):
blog.yoursite.com/
And the admin site is:
blog.yoursite.com/admin/
To access the admin site, use the username:admin and password:test

Now, click the "Create new article" at the top to create your first article. You may get an error

Invalid encoding... bla bla bla

Don't worry, I've made the search for you. The solution is to edit the vendor/plugins/permalink_fu/lib/permalink_fu.rb as follows:

Change line 9 to:

s = Iconv.iconv(translation_to, translation_from, str).to_s

Change line 90 to:

PermalinkFu.translation_to = 'ascii//ignore//translit'

Now, with your second try to add your first article, you may get another error:

Define INLINEDIR or HOME in your environment and try again

The solution is to edit the mephisto/config/initializers/custom.rb to add this:

ASSET_IMAGE_PROCESSOR = :none

Now, the third trial should work.

Congratulation! You've just created your first article on mephisto.

Now, you should change your password. And I recommend you also change your login name as it will appear as the author name for your articles.

Next time, I may talk about some useful plugins that you can install on your mephisto.

Why 100% width may damage the layout

2008-08-04T04:00:00Z

One of the common mistakes developers make when creating layouts is specifying a width of 100% when they need the block element to take the full width of its parent element.

#footer {
  width: 100%;
  margin: 7px;
  padding: 5px;
  border: 1px solid #CCC;
}

Why is this a mistake? Because, according to the W3C box model, when a width or height is explicitly specified for any block-level element, it should determine only the width or height of the content within the box, with the padding, borders, and margins applied afterward. So, if you try to add a padding, border or margin to that block, the content will either overflow or push elements wider than they should be.

The solution is simply not to specify an explicit width for your block. Instead, leave it with its default value, auto, which will make it expand as you want. Now, you can specify any padding, border and margin values with no problems.

#footer {
  margin: 7px;
  padding: 5px;
  border: 1px solid #CCC;
}

But if you really need to specify an explicit width for your block, you can use a nested block as described here.

How to avoid the IE box model bug

2008-08-03T06:44:00Z

One of the common bugs of IE is the box model bug which affects the box model of any HTML block-level element when the page is in quirks mode. In brief, IE includes the padding when calculating the width of the block. Personally, I found this very logical and don't like to consider it a bug. But since it violates the W3C standards, it is a bug.

One simple approach to avoid this bug is to avoid specifying both width and padding or border for an element. How?

Say you have a sidebar block for which you need to specify a width, a border and a padding.

<style type="text/css">
  #sidebar {
    background-color: #CCCCCC;
    padding: 5px;
    width: 183px;
    border: 1px solid #000000;
  }
</style>
<div id="sidebar">
  Content for sidebar goes here.
</div>

Here is the result in Firefox and IE:

To avoid the bug, you can simply add a child block to the sidebar. Then, specify the width for the sidebar and specify the border and padding for the child block.

<style type="text/css">
  #sidebar {
    background-color: #CCCCCC;
    width: 183px;
  }
  #sidebar_content {
    padding: 5px;
    border: 1px solid #000000;
  }
</style>
<div id="sidebar">
  <div id="sidebar_content">
    Content for sidebar goes here.
  </div>
</div>

Now, you get the same results for both Firefox and IE with exactly the same width you specified in your CSS code.