Wrapper Div Not A Full Page with Firefox But Looks Right in IE7

Errors inevitably find their way into your files while you’re developing new themes or basically while doing anything with CSS.

Once an error is fixed jot down a note as to how you got the look you were going for and that in itself should help you remember what you did correctly. So, here’s a CSS tip for myself and maybe a few other developers interested in creating WordPress themes.

I was checking out how a border would look around the whole page and this error became obvious. Maybe not an error per se, but the output was not the same between Firefox 2.0 (Fx) and Internet Explorer 7.0 (IE7) so something needed to be fixed.

Problem was that the wrapper div, which should hold everything between the opening and closing body tags, did not extend all the way down the page to envelope the footer in Fx, but it looked as expected in IE7. I could tell there was a difference in output between the two browsers because I used <border: 2px solid #f00;> in the css stylesheet for #wrapper. That should have put a bright red rectangle around the wrapper, and in essence the entire WP page.


Firefox 2.0 didn’t let the #wrapper div enclose the entire page. Notice the red line at the top of the image and the dark grey background for the post.


IE 7 filled the page as expected without the use of a clearing div. Notice the red box around everything and the lighter color to the post.

Divs were properly closed as the XHTML code grabbed from View Source validated ok.

The solution I found was to insert a spacer clearing div just after the end of the footer div. Somehow that forced the #wrapper to go all the way to the bottom of the page in Firefox.

New CSS entry:

.spacer {
clear: both !important;

New XHTML entry added at end of footer.php:

<div class="spacer"> </div>

Now, for the time being everything looks identical between Firefox and Internet Explorer 7.

Easy Install of WordPress on Vista Home Premium for Local Testing

WordPress software was easily installed on Windows Vista Home Premium in about 5 minutes after the server (Apache) and database (MySql) software were installed via XAMPP. This easy install of WordPress was modified slightly from directions shared by GeeksAreSexy at Blogspot. Thanks, Kiltak!

I used the XAMPP setup and worked with phpMyAdmin (a software package that comes with XAMPP for ease of database use) for about a week before installing the blogging software as I wanted to make sure that everything was working as it should.

Here are my basic steps for installing WP:

  1. Download and install XAMPP.
  2. Download latest version of WordPress.
  3. With XAMPP control panel turn on Apache and MySql services.
  4. Open phpMyAdmin and create a new database called wordpress.
  5. Modify the file named wp-config-sample.php to include your database name, username and password, which are most likely “wordpress”, “root”, and “”, respectively.
  6. Browse to http://localhost/wordpress/wp-admin/install.php, enter your blog name and email address and click on install.
  7. Sign in to your new blog and create a post!

Image Default Location for WordPress

Posting images in WordPress is easy enough, but you have to know the path the the image directory for the images to appear in your posts. Duh!

Using a local install of WordPress for developing new themes I tried to add an image folder to the theme directory of the current theme. Images did not appear in the posts. That makes sense because the images in posts are independent of the theme you are currently using. Changing a theme for the blog’s look would require using a different theme directory and therefore, it would make no sense to use the current theme directory to store images for the entire blog.

A suitable location for WP images is a new directory inside the wordpress directory in htdocs when running XAMPP, not inside the WordPress theme directory.

With an image directory called “img” the relative path to images would be img/filename.jpg for example.

The path on my machine is C:\xampp\htdocs\wordpress\img\filename.jpg.

The properties of a displayed image show http://localhost/wordpress/img/filename.jpg as the image’s url.

Images for posts cannot be found with Firefox using relative addresses, at least on my local XAMMP setup on Vista Home Premium. Instead, use the absolute URL for images placed in your own image folder in the wordpress directory.

Install WordPress in CPanel with Fantastico

Installing WordPress via CPanel is fairly straightforward. Log in to your CPanel admin area. Click on Fantastico near the bottom of the CPanel screen.

CPanel admin area.

This screenshot is from CPanel version 10.

Fantastico is a collection of scripts that will install various bits of software on your website. You can install discussion boards, guestbooks, galleries, and of course, blogging software like WordPress.

Fantastico admin area.

The Fantastico admin area has many scripts to offer.

Click on WordPress listed under Blogs.

WordPress installation.

WordPress installation requires about 5 MB for starters.

A short description of WordPress appears with a link to the homepage (wordpress.org) and forums, as well as a list of current installations in the given domain, if any exist. Although it’s not too apparent that it’s a link (at least on my screen), click on New Installation. The current WordPress version is indicated in parentheses, so in my case, version 2.3.2 will be installed.

Installation screen for WordPress under Fantastico.

The domain name will be filled in automatically, but if you want to install your blog on a subdomain fill in the directory of your choice. WordPress will create the new folder needed so just enter a folder name.

Enter your chosen admin username and password and write them down in a safe place.

Under Base Configuration enter an admin nickname, email address, website name and website description. The site name and description can be changed later in the stylesheet of the theme you choose for your blog. More on that later!

At the bottom of the installation form you need to enter your email account information in order to blog by email. I suggest refraining from actually use this tempting feature until you have properly hardened your WordPress blog against intruders. Also, a dedicated and secret email address will have to be created for posting to your blog via email. Regardless of whether you want to blog by email or not, you’ll have to enter your email info in order to install the blogging software.

A caution from the creators at wordpress.org:

Note: It is strongly recommended that you use a “secret” address – that is, an email account name that is very difficult to guess and only known to you. Any email sent to this address will automatically be posted to your blog.

Get familiar with WordPress first before trying any of the advanced techniques, like blogging by email. It will be that much easier to figure out what’s going on when you are already familiar with the basics of using WordPress.

When you’re ready to install your blog, click on Install WordPress.

WordPress install page 2.

Make a note of the database and MySQL user that were created for your blog.

Also, the URL for access to the blog and the location of the install are noted. Click on Finish Installation to complete the install of WordPress.

Final installation screen for WordPress.

Final installation screen for installing WordPress via Fantastico.

Make a note of the username and password for the admin area and the full URL for the admin area. Take a moment to enter your email address in the box and click on Send E-mail to receive a copy of the details of your blog installation.

Now, go to your http://domain.com/wp-admin/ admin area, enter your admin username and password, tick the “Remember me” checkbox and click on Login.

WordPress Dashboard - the palce to start your blogging adventure.

WordPress Dashboard – the place to start your blogging adventure.

The WordPress admin area opens up to the Dashboard which gives you a standard menu area at the top of the page, links for fast access to common tasks in the middle, a box showing the latest comment and posting activity on the right, and the latest notice pertaining to security updates under “WordPress Development Blog.”

Keep an eye on the latest developments and security releases.

Keep an eye on the latest developments and security releases.

Explore the Dashboard menu and try writing a post!