Category Archives: Tips

Proper Use and Examples of the small-caps CSS Property

Okay, the other day I was trying to use font-variant: small-caps and I could not get it to work. This sent me off on a wild goose chase of sorts because, as it turns out, I was also using text-transform: uppercase. Needless to say, the two don’t work together as text-transform: uppercase seems to override font-variant: small-caps in every browser I tried.

But, I noticed that I could not find any examples of what it looks like and what fonts it works with. So, I decided to do a blog post about it. Below, you will find several examples of this property in use with the basic web fonts.

Arial normally
Arial in small caps

Verdana normally
Verdana in small caps

Times New Roman normally
Times New Roman in small caps

Georgia normally
Georgia in small caps

One thing that you notice that it only capitalizes the letters that are already capitalized. For some reason, I thought that it capitalized the first letter in every word.

So there you go. It does work with basic web fonts Arial, Verdana, Times New Roman and Georgia. Do you have any more examples of which fonts this will work with?

Revised CSS Flyout Menus

Last month, I posted about a method to generate vertical multi-level suckerfish css dropdowns by revising the code from HTML Dog’s Son of Suckerfish. Well, this week I have been working to implement this code into a build that I am doing, and I figured out that my original css worked great in Firefox and Safari but not in Internet Explorer 6.

Looking at this in IE6, I saw there were gaps in the list items in the first and second tiers of the navigation, but not in the third. If you click on the example here in IE6, you should see what I am talking about. After much testing, it still does not make sense to me why that would happen in the first and second tiers but not in the third. But I basically figured out what is going on.

In IE6, although the nested lists are using position: absolute to remove them from the flow of the document, a 3px space appears at the bottom of each list item, where there should be no space at all unless a margin is being set.

To correct this, all I had to do was set margin-bottom: -3px for the specific list items in my IE6 only stylesheet. However, this creates another problem because as I said the problem only occured in the first two lists but not in the second nested list. So this fix causes the second nested list to be 3px shorter on every list item.

Luckily, all we have to do to correct this problem is reset margin-bottom: 0 in the list items of the second nested list in your IE6 only stylesheet. Now you will have flyout css menus that look as good in IE6 as they do in Firefox and Safari!

Use ColorZilla Firefox Add-on

If you use Firefox and you are a designer, you should be using ColorZilla, which is an add-on for Firefox. ColorZilla adds an eyedropper icon into the status bar at the bottom of your browser. When you click on it, the arrow turns into a crosshairs while you move it around on the screen. The cool part is that it displays the hexadecimal values in the status bar for whatever color the item is you are hovering on. In addition, it displays the RGB values, plus the CSS selector for the item.

It’s very useful because it will tell you color values right from from your browser, and it even works on images and backgrounds. There are many times when I want to color match something, or I am too lazy to fire up Photoshop and use the eyedropper tool. It really is a huge time saver. So, download ColorZilla today and get using it, if you aren’t already.

Simulating Position Fixed in IE

Good CSS designers know that one of the faults of Internet Explorer 6 is that it doesn’t recognize the CSS property position: fixed. This is a CSS property which allows one element on a page to remain stationary while the other element scrolls, resembling frames in a browser.

Our company launched a web site for Ty Pennington last fall. For this site, the footer, along with the transparent logo at the bottom of every page, not only needed to be stationary, but also always needed to align at the bottom of the page no matter how long the content or the browser window. This is a desgin challenge for any CSS designer.

Luckily, I found a kickass CSS hack that not only allowed me to simulate position: fixed in IE but also solve the other problem I had by always keeping the footer at the bottom of the page. It worked perfectly, but it currently breaks in IE 7. It may be fixable, but I haven’t taken a look at it yet to try and fix it.

Ty Pennington is a site we are really proud of. It uses lots of other tricks with Javascript and CSS to create a beautiful, branded work of art. So go on over there to see how it was done. Also click on the example above and bookmark it so you can do this in the future.

Correctly Setting Z-index

One thing I always have had trouble with in building web pages with CSS is setting the “z-index” property. In CSS, the “z-index” is the stacking order on the page. It makes sense if you think of it as adding a third dimension to the web page.

I run into the problem often where I need an element to load on top of another element, and they always seem to want to load in the opposite order. Many times I have tried to change the z-index without much success. So much so, that I gave up trying to use it.

Well, I finally figured out what I have been doing incorrectly all this time. To get z-index to work, both elements have to have the same parent. What this means is that if two elements have different parents you cannot change the z-index relative to each other by setting the z-index for those elements. You have to change the z-index of the parent element.

Duh! Solving this problem is a major help to me though because now I can correctly set the z-index and solve a lot of CSS design problems I have been having.

script.aculo.us effects

If you are a designer and you haven’t heard of script.aculo.us, surely you have heard of Ajax. Even so, you may be surprised to learn that script.aculo.us and Ajax are not the same thing.

I have heard of both Ajax and script.aculo.us, but I thought that they were the same thing. I have seen both of them in use on sites that Mediapulse designed, but I have never used them myself. Well, once I learned recently that script.aculo.us is not Ajax and it is very easy to use, I decided to give it a try on a site that I am working on.

It turns out it is very easy to implement some cool looking effects with script.aculo.us. If you don’t believe me, take a look at 4 easy steps to script.aculo.us, and then take a look at the effects you can do with script.aculo.us.

The effect I found the most practical so far is the “toggle” effect. The toggle effect allows you to hide and reveal an object by clicking the object. You can also combine the toggle effect with any of the other visual effects. The visual effect I find the most practical for this is the “blind up” and “blind down” effect. You can even modify settings on these effects, like speed of movement.

In using these effects though, I have some tips to help you get the best performance out of these effects for your users. For the toggle effect, you can make a div clickable to reveal or hide another div on the page. I learned that by doing this, you do not need to add a link because the div itself acts as the button. The only problem is that because it is not actually a link, the cursor will not change to a hand when you mouse over it, so the user may not automatically recognize that it is clickable.

You can solve this problem through CSS. There is a CSS property, called “cursor,” you can set to “pointer” for any object. This means that whenever the user mouses over that object, the cursor turns to a hand, and lets the user know that object is clickable.

Now you have an object that looks and acts like a link and when clicked can reveal another object on the page with cool motion or animated effects. I recommend not waiting, like I did, and trying out script.aculo.us effects on your sites today! I don’t think you will be dissappointed.

Turning Off Underlying Headlines in sIFR

I highly recommend adding sIFR to your web site, if it is appropriate. I have to admit for a long time I didn’t like it. But, sometimes adding nice looking typography to your site can really make it pop in a way that you can only do with Flash or images. So, the more I use sIFR, the more I like it, and the more I use it, the more I understand how it works. If you don’t know what sIFR is or what it does, please check out Mike Davidson’s sIFR site.

sIFR works by using Javascript and the Flash player to replace headlines in your web page with nicely styled fonts in Flash. If you are a novice to sIFR, there are certain tricks to using it that can greatly enhance your implementation. I won’t go into all of them here, but I will talk about turning off your underlying headlines in sIFR.

When you have sIFR installed on your site, sometimes you tend to notice the unstyled underlying text show up briefly before being replaced by Flash. If you have this problem, you will want to eliminate it to get the best user experience possible. It has a kind of jarring effect when you see the font change suddenly like that, so it is best to avoid it.

The creators have provided a way to turn this off so that you will only see the Flash fonts load when the page loads. You can do this by adding a stylesheet to your header called “sIFR-screen.css.” If you do this, then your headlines should not show by default. This works by creating default styles for your headlines with the class “.sIFR-hasFlash.” All headlines are then set to “hidden” so they will not be displayed if you have javascript and Flash 7 installed. The genius is that is you don’t have javascript or Flash 7 running, the normal unstyled headlines will still be visible.

However, you may want to modify the code if you are only replacing a certain group of headlines, and not all of them at once. You can do this by adding an id to your headers and then adding the id to the header style in your sIFR stylesheet.

I need to warn you here, not to remove the “hasFlash” class from your header styles. If you do this, the headlines will not show up when javascript is not running or you have a version lower than Flash 7. This may be rare, but you can modify the sIFR script to work only with Flash 8, like I did here. I made this mistake, which is how I know you need it.

So in closing, make sure you turn off the underlying headlines when using sIFR. Also, be sure to test your work with Javascript turned off, to make sure those users who have javascript turned off or don’t have the right Flash player can still see your headlines.

Active State Class

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.

Multi-level Vertical Suckerfish Dropdowns

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.

Control Letter Spacing Using sIFR

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.