There is a current trend in web design I will call, “active state classes.” An active state describes a link in web page navigation that is a different color than the rest of the navigation signifying that the user is currently on that page or in that section of the web site.

Active states of links are created in the CSS of a site by assigning a class in CSS named “active.” You then give the class a different color than the rest of the navigation to make it stand out. Once the user navigates to that particular page, the “active” class is added to the link. So as the user navigates around the site, the current page or section is highlighted by the active class creating an active state.

Most current web designers and developers are aware of this trick. But, I was reminded of something this week while using this technique in my site design. This link state works differently across different browsers.

In styling links with CSS, there are 4 pseudo classes for each link state, link, visited, hover and active to which you can assign different styling. With Firefox on Windows and Mac, as well as Safari on Mac, you only need to specify one active class for the “link” pseudo class to make the active state work. This will not work in Internet Explorer 6. In IE 6, you need to specify the active class for all four link pseudo classes to make the active state work.

I am describing this technique here because I forgot to do this for all 4 pseudo classes. I then tried to figure out why it didn’t work in IE 6, until I looked at a previous site I had done. That is when I figured out what the problem was.

Note, I have not tested this in IE 7 yet. I am not testing my design in IE 7 yet. I only have one PC in my office, and I still have IE 6 installed on it, since it usually gives me the most trouble.

I am working on a site right now that requires suckerfish dropdowns for the navigation, but I needed to modify them so that the links for the navigation bar could be vertical, instead of horizontal. I found a tutorial for a modified suckerfish at HTML Dog, http://www.htmldog.com/articles/suckerfish/dropdowns/, which had multi-level dropdowns, so I used that as my starting point.

The HTML Dog tutorial showed how to build multi-level dropdowns where the second and third levels come out from the side. I needed a vertical navigation with multiple levels and all additional levels coming out from the side. I decided to try and modify their suckerfish to make my vertical multi-level navigation.

It was pretty easy, and in the end, I got the exact result I wanted. All I had to do was make the first level behave the same way as the second and third levels in the HTML Dog tutorial. I have posted my example here, vertical suckerfish dropdowns.

I ran across an excellent Firefox plug-in today if you design or build a lot of web sites. It could actually be used for print as well.

Doing web site builds, I always need Lorem Ipsum, or dummy text, to fill out the content areas of the sites I am building. A while back, I found a web site that I normally use for generating Lorem Ipsum text, http://www.lipsum.com/.

It works very well. But, whenever I use it, I have to search for the web site in Google. Then, I run the program that generates the text. Then, I copy and paste the text in my web page. It works very well. But, I remembered hearing about a plug-in for Firefox that generated Lorem Ipsum text.

Today, I decided rather than go through all those steps again, I would try to find the plug-in and see how well it works. Well, I found it and after trying it out, I think it works great!

The plug-in, LoremIpsum Content Generator, can be found at https://addons.mozilla.org/firefox/198/. Once you download and install the plug-in to Firefox, it is very easy to use. Just go to the tools menu, and click on the generate Lorem Ipsum text option. There it brings up a window which gives you several options. You can generate text by character, words or paragraphs. After that, all you have to do is click the button to copy the text to the clipboard and paste it into your work.

I recommend this plug-in to anyone who uses Lorem Ipsum text on a daily basis. I think you will it is a small step but is worth it to increase your productivity!

I am using sIFR on a project I am currently working on. The design of the site I am building required the letters being rendered in sIFR to be spaced out. I tried to change letter spacing in the default version of sIFR 2.0, but I could not get it to work.

So, I did a search on Google for “spacing letters in sIFR” and found an excellent hack that allows you to change the default spacing of the letters. This hack can be found here, http://forum.textdrive.com/viewtopic.php?pid=102296.

The current version of sIFR (version 2) doesn’t allow for spacing of the letters because it is only requires Flash version 6. However, Flash version 8 does allow for the spacing of letters. So the fix for this basically consists of 4 steps.

1. First add a line of code to the dont_customize_me.as actionscript file.
2. Edit the sifr.js file to check for version 8 instead of 6.
3. Add the letter spacing code to the sFlashVars parameter in the replacement calls.
4. Save the swf file to be compatible with Flash 8 and actionscript 2.

That is it. It worked perfectly. See the example linked to above for the full instructions.

This was a redesign of the Smoky Mountain Convention & Visitors Bureau that was launched right before Christmas. It was a lot of fun working on this site.

The design of the site came from a local advertising agency that Mediapulse sometimes partners with. The interesting part of the site is in the Flash. The Flash parts, including all of the creature animation, was done by our Art Director, Chris Kosman.

The site was built by me, using standards compliant CSS. All of the Flash uses Unobtrusive Flash Objects (UFO) so that it will validate. The site also makes use of sIFR, which I am starting to use more of, for the headers.

Anyway, we are really excited about this site! Check it out at http://www.smokymountains.org/.

I live in Knoxville, Tennessee and work for a web development company called Mediapulse. My main responsibility at Mediapulse is Internet Marketing. But, most of the time I spend building the web sites we develop for our clients.

I support CSS and web standards, and at Mediapulse, we design all of our sites that way. I am starting this blog to talk about the CSS and design that I use on a daily basis. I plan on posting CSS tips and tricks that I find as I build web sites. I will also be posting about the projects I am working on and linking to released sites.

I hope my readers will find this site useful and that it results in a community here. If I can help a few people learn about CSS and web design, then that is what I set out to accomplish. If nothing else, a year from now, I will look back and see what I have done for the past year and use that to better myself.

Thanks for reading.

This is a paid review of Apogee Search. Since I am not a client of theirs and have not had the opportunity to use their services, I am only reviewing their web site here. The web site can be found at http://www.apogee-search.com/.

Upon visiting their web site, the first thing I noticed is that it is extremely cluttered. Due to this clutteredness, it is hard to determine the overall message they are trying to deliver. I’m sure that it will reveal itself upon closer examination. However, I feel that they need to simplify the home page so that whatever message they are trying to deliver jumps out you without having to read through several paragraphs of copy to determine it.

It appears that Apogee Search is a search engine optimization firm offering “search engine marketing.” The company page for Apogee states that they are one of the largest online marketing services firms in the country today and have been in business since 2001. The services they offer include paid search advertising, natural search engine optimization, pay per call management, affiliate marketing, search engine marketing training and search engine marketing analysis. According to the services page, they are offering a free analysis of your website’s performance in the search engines.

They also seem to be legit as they have several badges on their web site. They have a badge listing them as a Google Adwords Qualified Company. They have a badge showing them to be a SEMPO Circle Member. They also have a membership badge for SEOPros.org. I have heard of SEMPO, though I have not heard of SEOPros.org. I have never been a member of SEMPO, so I can’t really comment on them. I do have some idea of what is involved in the Google Adwords Qualified program. I would say completing that program would definitely make them qualified to handle your Google Adwords campaign.

The sales copy on their site emphasizes that they are about making their clients money. They claim to do this by tracking actual actions from the site that increase the bottom line, not just rankings or clicks. If I was looking for a search engine marketing company, I think I would be looking for someone who at least said they were doing that. It also seems that the goal of the site is to get you to contact a sales representative. That is pretty common for most business web sites, and it seems they are doing a good jab by having that call to action on every page. If I was giving out advice to them, that is probably what I would tell them to do.

Apogee also has an online marketing blog, found at http://www.apogee-search.com/Blog/index.php. One thing I noticed about the blog is that it lacks the same navigational toolbar found at the top of the company site. That may be fine for someone entering the site via the blog, which is probably the purpose of the blog. But since they are linking to it from their site, they should really insure the navigation is consistent across all pages. As far as the content of the blog goes, it seems they are only linking to or quoting other SEO and Google related news items rather than providing any commentary or opinion.

Finally, on their site, they have a downloads and resources page. This page mainly links to their white papers in addition to SEO tools on other sites.

Overall, I think their site does a good job of selling their services, notwithstanding the cluttered home page. One other thing I think they could do to increase the effectiveness of their site is to show some examples of success stories they have had for their actual clients.