Enable Caching in Firefox for Faster Web Sites

Using an .htaccess file to specify that images should be cached is one way to speed up the time it takes for your web pages to appear. Those of us still using older browsers will thank you for using an Expires Header in .htaccess to manage caching.

Yet another good reason to upgrade your browser is to take advantage of newer features. Caching of images and other often-used files can be controlled by your browser.

IE 9 apparently has caching defaulted to ON. Firefox 5 does not.

Here’s how to enable caching in Firefox.

  • Type “about:config” in the address bar and hit enter.
  • Accept the warning by clicking on the “I’ll be careful, I promise!” button.
  • Scroll down to ‘browser.cache.disk.enable’ and double click. You will see the value in the fourth column toggle from false to true, if caching was not enabled already.
  • Scroll down to ‘browser.cache.memory.enable’ and double click to enable by setting it to true.

That’s it! The performance of your Firefox browser will speed up, noticeably so. After enabling caching, the time to download pages from a client’s site went from 6-10 seconds to 2-3 seconds!

CSS Rounds Corners in Firefox, But Not in IE8

Firefox/Mozilla browsers are gaining shares of the browser market and for good reason. Upbeat features let the user take complete control of their browsing experience, which is one main reason behind their gaining popularity. Add-On tools can help most any website developer to see that their site is put together in a valid way and that has pushed Firefox use among developers to probably a very high level. I still have yet to hear another web developer state that they prefer IE over Firefox, and I’m pretty sure that all of us have cursed IE6!

Firefox also champions the use of future CSS, which are CSS features that will only be seen by IE users at some time in the future. Ok, I made that up, but since Internet Explorer is playing the catchup game, I think it’s only fitting to point out an example.

Looking at some CSS basics…we have a way to draw a box around some content. It’s called the border property. The top, left, right and bottom sides of the box can be assigned diferent values for the width, style and color. Each of these values can be assigned separately or all at once.


.box {
border-width: 1px;
border-style: solid;
border-color: #000;

All together, in the order width, style, color:

.box {
border: 1px solid #d1d1d1;

If you want to have different widths, styles or colors for your box, then you’ll have to use the properties that target each side, like so:

.box {
border-left: 1px dashed #000;
border-right: 2px solid #5ca3b7;
border-top: 1px dashed #000;
border-bottom: 2px solid #5ca3b7;

That’s nice, but sometimes we really don’t want the square boxy look. Rounded corners are nice, aren’t they? Well, our Firefox users can see rounded corners for the same box that we’ve built for our menu. All we have to do is add one property to the menu, called the -moz-border-radius, and specify its size. IE simply ignores this property, so those boxes will show pointed corners.

.roundedbox {

The 10 pixel radius is the size of the rounded corner. We probably want to add a little padding to the menu box so the content isn’t smashed against the border, so we’ll set that at 10 px, too.

Here’s a menu box that will show rounded corners in Firefox/Mozilla browsers:

.roundedbox {
border:1px solid #5ca3b7;

There are ways to get the rounded corner look in IE browsers, but it’s a bit more work. For now, we’ll continue to use the -moz-border-radius property in appreciation of our Firefox users.

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.

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.