Our Blog

CSS Programming and IE6, Part 1: Checking Compatibility

Like nearly all web designers, I detest making sites work in IE6. The browser is ancient; it released in 2001! There is absolutely no reason for anybody to still be using it.

Unfortunately, for some reason, people still do. This means we have to make our websites accessible to IE6 or lose a  fairly sizable minority of our users. With plain HTML, this generally isn’t a big issue, but IE6 understandably has somewhat limited CSS support (it is, after all, over nine years old!) This naturally leads to websites that are essentially unreadable to users who’ve never upgraded. In the near future, as computers running Windows XP (which shipped with IE6) reach the end of their lives, it should become irrelevant, but for now there are a few things you can watch for to keep your sites accessible.

First off, of course, is to check how the site currently looks. Chances are, you don’t have IE6 installed on your computer, but there are sites that will show you how it looks; I use netrenderer. It won’t look the same as it does in other browsers, but if it reads reasonably well, you probably want to just call it good.

But suppose it’s totally screwed up. In that case, you probably want to import an IE6-specific stylesheet that fixes the major issues; you can do so using the following code. (Remember to put this after your other style sheets are imported so that it overrides them).

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />

If you want to target every version of IE from six on down, you can instead use [if lte IE 6]. Throwing in an if statement like this allows you to serve up a simple stripped-down stylesheet that early browsers can understand, while keeping the extra code out of the main style sheet that everyone else will download.

Creating Equal (Fixed Width) Columns With CSS

Suppose you’re designing a webpage where content is in multiple columns, each of thich has a different background. It looks pretty stupid if the columns end in different places, doesn’t it? If you program WordPress themes or similar, it can look REALLY bad. So how can you make sure the columns line up?

If each column has a fixed width, it’s actually pretty easy.  Put all of the columns inside a fixed-width container, and set the background for that container to be a repeat-y image that has the appropriate background color for each part of the row. This technique was popularized by Dan Cederholm in 2004, in his article on Faux Columns.

When the columns have variable widths, it’s a bit more difficult. But that’s an issue for another post.

The CSS !important Specifier

One of the challenges people new to Cascading Style Sheets face is figuring out why the rule they just coded doesn’t seem to be doing anything. Once you start building more complex websites, it’s likely that several rules will apply to a single HTML tag. In some cases, all of the styles can be applied; for example, you could say that everything in your content area will be colored green, then say that your paragraphs will have size 12 font, and you’ll end up with green, size 12 text. But what happens when styles contradict?

As it happens, you can (mostly) figure out which style will take precedence by doing a little math. If you’ve used an inline style applied directly to the element in question, it has weight 1000 (and almost certainly wins). Otherwise, add up 100 for each ID in the style, 10 for each class, and 1 for each element. Psuedo-classes (such as :hover) cound the same as real classes, as do attribute selectors (such as [type=”submit”]) Psuedo-elements (such as :first-letter count the same as real elements. Highest number wins!

In case of a tie, whichever specifier is encountered last is considered to be more important. This applies to both internal and external styles, so if you import several external style sheets, whichever one is important last will win all ties.

So what do you do if your new style doesn’t seem to be working? Well, from a practical standpoint, the first thing to do is make sure you haven’t mistyped anything, maybe mistyped a class name or used a . where you need a #. After that, the best thing to do is to make your selector more specific – that is, add more IDs and classes to give it greater weight –  so that it will override the less specific selectors.

However, if you have a style that absolutely MUST apply in all situations, you can use the !important selector.  (Does anybody else read that as saying “not important”?) This selector applies only to one particular property, not the entire block. For example, suppose I have this code:

#container {
color: black !important;
font-family: ‘Cambria’, ‘Times New Roman’;

#content {
color: red;
font-family:Arial, Helvetica, sans-serif;

Any text that is inside the content box, which is inside the container, will be in Arial…but it will be black.

The !important statement should be used only sparingly; not only do you not want two !important statements to ever apply to the same line of code, but it’s a real pain to have your selector not working because there’s an !important line somewhere in your external style sheets!

Meet Our Newest Staff Member

William Springer
Web Consultant

Since teaching himself to program at age eight, William has never been far from computers. After completing his bachelor’s and master’s degrees in computer science at the University of Colorado, William taught for two years before attending Colorado State University for his PhD.

After a number of years in academia, William was anxious to get out and do something; he decided to pursue his long-time interest in web design and joined his wife Brit at One Ear Productions, where he is currently specializing in CSS and SEO amoung other internet interests.

In his spare time, William enjoys playing heavy economic board games and reading science fiction. For the last few years he has also been very interested in digital photography, and is currently studying high dynamic range photography.

Partnership with Wild Critter Media

Moonlight Designs Studio is proud to announce the partnership between Moonlight Designs Studio and Wild Critter Media.  Like us Wild Critter Media provides the best solutions for their clients. We are excited to form this partnership as we have been working together for the past few months now testing out the waters.  What makes it easy is that we have the same goals/ideas for our clients.  We look forward to building a life long partnership and working on projects together.

If you would like us to provide you a quote on your project please contact us!

WordPress: Themes and Child Themes

A WordPress theme is what defines the look and feel of a site; while the WordPress CMS provides most of the functionality, the theme makes the site look good. So what is a WordPress theme anyway?

A theme is simply a collection of .php and .css files that tell WordPress what content to display and how to display it. There are a huge number of themes available for free; any theme available to download from within WordPress is required to be licensed under the GPL, so you can do whatever you want with it. There are also a number of premium (read: $$$) themes available, ranging from fairly cheap to hundreds of dollars, that provide more options and more optimized code than the standard free themes.

When coding your own theme, you have several options. One is to start coding from scratch. As you can imagine, this is the least popular and least efficient option.

Another is to take an existing theme and modify it to get what you want. The advantage is that the theme is already in working order, and all you have to do is make the changes you need. The disadvantage is that if the theme is updated and you want the updated version, you have to go through and make all of the changes again! Additionally, if you modified a GPL theme, then you are legally required to release your modifications under the GPL as well.

Probably the most popular option is to build a child theme. In this case, you still start with an existing theme, but rather than modifying it directly, you make your own files that tell WordPress what to change. The nice thing is, the base theme can be updated without affecting your child theme files; additionally, you can build a premium theme on top of a GPL theme. Thus, this is the preferred option for both flexibility and ease of use, and a number of premium themes exist that are child themes of other (free or premium) WordPress themes.

Cascading Style Sheets

In the past, I haven’t done a lot of CSS work; my interests lie more in the areas of SEO and content. We needed a WordPress programmer, though, and before I could start programming WordPress themes, I needed to brush up on my CSS and PHP. Fortunately, I had a decent book sitting around: O’Reilly’s CSS: The Missing Manual. After a few hours reading the book and playing with the CSS in some WordPress themes, it all makes sense; my only hesitation in recommending the book comes from the fact that, because it was released last year, it contains less than a hundred pages on CSS3.

I’ve probably mentioned this before, but if you’re not familiar with what Cascading Style Sheets can do, you need to run, not walk, over to the css Zen Garden and play with it a bit. Good programming practice for the web these days, and what HTML5 is built on, is the separation of style from content. HTML5 holds the content; CSS should be used to indicate to the browser how to display it. What’s really nice about this is that by using an external style sheet for your website, if you decide to change the look and feel of the site you can immediately alter every page (drastically, if desired) simply by editing one file.

CSS is really pretty simple. Suppose that I wanted to change how the text in each of these  posts is displayed. Let’s say that, for some reason, I wanted the text to appear in bright orange. In WordPress, the posts are contained in the following tags: <div id=”content”></div>. Thus, I would simply add the following code to my style.css file:

#content {
color: #FF7F00;
background: #FFFFFF url(‘images/background.jpg’) no-repeat;

So what does all that mean? The hash mark before the name of the div means that this is an ID, which is something that should appear at most once on each page; something that can appear multiple times should be a class and is indicated using a period. Everything between the brackets is CSS code that will apply to the contents of the content div; in this case, #content is called a selector because it selects this particular part of the HTML. Inside the brackets I can have any number of declarations; in this case I just have two. Each declaration is a property followed by a colon and then a value; some properties can take on multiple values. For example, here I told the browser that it should render the content area with a white background, use the file background.jpg in the images directory as a background image, and that that image should not repeat. If I later decide to use a less hideous color combination, all I have to do is edit this one file.

Aside from making my life a lot easier when I have to change something, this can also reduce the amount of space the code for a site takes up, as the formatting only has to be stored (and downloaded) once, rather than once for each page. This helps speed up the process of loading your site, which helps to keep Google and your customers happy.

Google Adsense and Smart Pricing

You may have noticed that we don’t run advertisements on this blog. The main reason for that is that we don’t think it looks professional on a business website; also, we don’t want you to click an ad and go elsewhere. We want you to stay here and hire us!

That said, we do own other websites which are monetized with adsense and make about a buck fifty per click. This brings us to another reason we wouldn’t want to put adsense on this blog: it could drag down what we’re making elsewhere! Why? The answer lies in Google’s “smart pricing” policy.

Google wants to  make sure that their advertisers are getting good value for their money, so that they’ll keep spending; this means not putting high-cost advertisements where they’ll receive low-quality traffic. Social media traffic, for example, tends to not click on ads and not buy when they do, so a blog that gets a lot of social media traffic compared to search engine traffic will get paid less per click. Similarly, Google hates Made for Adsense (MFA) sites, which have no content whatsoever, just a bunch of ads; the hope is you’ll click on one of these spam sites and immediately leave via one of the ads. Whereas a legitimate site like this one tries to provide useful information – we want you to find what you were looking for even if you don’t hire us – a spam site just wants you to click an ad and doesn’t want anything getting in the way of that, including content.

However, bad or no content isn’t the only way to get smart priced; as mentioned, the type of traffic your site receives matters as well. This site would do poorly with adsense because we discuss topics like blogging and web design. It’s not that Google dislikes these topics; it’s just that people who want to read about them generally don’t make money for the advertisers, so Google isn’t willing to pay much for that traffic.

A little bit of money is better than no money, right? The thing is, Google doesn’t smart price websites; they smart price adsense accounts. If I was to place adsense on this site and Google decided to smart price us, the pay rate on my other sites would go down as well, which means that having the advertisements here would actually be costing me money! Fortunately, if you get caught in that trap, there’s a way out: just remove the adsense code from the offending site and your remaining sites should return to normal.

WordPress and .htaccess

Having installed a number of WordPress blogs lately, one thing I frequently find myself doing after a new installation is editing the .htaccess file. What is .htaccess all about?

On an Apache server, .htaccess files allow you to make configuration changes to a directory (and its subdirectories); multiple .htaccess files can be present in your directory structure, with lower ones overriding higher rules where they conflict. They’re often used for access control, helping to keep the wrong people from poking around in your files. Today we’ll talk specifically about how they interact with WordPress.

Aside from the basic WordPress functions, I’ve mostly used the .htaccess file to force my webhost to use the correct version of PHP. My preferred host offers both PHP4 and PHP5, but defaults to PHP4; this tends to cause issues with WordPress plugins. The solution? Just add the following line to the .htaccess file in your WordPress directory (or a higher directory):

AddType x-mapp-php5 .php

This tells Apache to use PHP5 when interpreting a .php file, and all is well.  Of course, this assumes that your host actually has PHP5 installed; given that it’s been out since 2004, if your host doesn’t support it, it’s probably time to find a new host.

What else can we do with the .htaccess file? WordPress uses it to store the rewrite rules for permalinks. Be careful editing the .htaccess file that WordPress uses; if you put your code in the wrong place, it will be overwritten next time WordPress updates the file. I often prefer to simply go up a directory, where feasible.

Often the default amount of memory allocated for PHP is insufficient; you can increase it with the following line:

php_value memory_limit 64M

The above line is hopefully fairly self-explanatory;  other attributes you can set include upload_max_filesize and post_max_size, which often default to 2M each.

Host a site with a lot of photos? Find people stealing your bandwidth? Try this code:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+.)?mysite.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

Obviously, replace “mysite” with your own URL and “/images/nohotlink.jpg” with the image you want to display on the site that’s attempting to display your image. (Thanks to WPRecipies for this tip) You may want to host the second image on a different server to avoid the possibility that your host will get into an infinite loop.

Next time: using .htaccess to prevent spam.

Terminology for Internet Marketing

As with any technical field, online advertising has its own terminology and set of TLA (three letter acronyms). Today let’s review some of the more important ones.

CPA: Cost Per Action. In this case, you get paid (or pay someone) when the user takes a predefined action, such as signing up for a credit card.

CPC: Cost Per Click. Self explanatory. This is the model under which Google Adsense generally operates.

CPM: Cost Per Thousand (page views). M is the roman numeral for 1000.

CTR: Click-Through Rate: how often do people click on your ads?

PFP: Pay For Performance; you get paid if your advertising is successful. See also CPA/PPL/PPS.

PPC: Pay Per Click

PPL/PPS: Pay Per Lead/Sale

PV: Page View

SEO: Search Engine Optimization; this is the process of getting your website to rank highly in search engines, particularly Google. A similar term is SEM, Search Engine Marketing, which also includes paid advertising.