You know that outline that is surrounds links after they’ve been clicked? Find it annoying? Here is how to get rid of it.

It’s as simple as that. Of course, this may confuse some people as to whether they actually clicked the link, but from a design standpoint it looks much nicer. To fix this problem you could just add an active state to the link.

I noticed while making a Wordpress theme that the code I was using on the link elements of a list added a lot of extra whitespace in Internet Explorer.
Here was my code:
CSS

HTML

After a lot of experimenting, I finally figured out a solution. I kept the html code exactly the same, but I added this to the css:

I hope this helps out some people.
-Greg

When you get a badge from Twitter and put it on your website,

you may notice that it doesn’t validate.

The code Twitter gives you looks something like this:

The first problem is that the ul elements are empty. So in order to take care of that, I added a space (or  ) to get

this:

Now you may be wondering, where did the javascript go? I put that at the very end of the page so it is the last thing to load.

This ensures the rest of the page will load before Twitter. The last I did was changing the & symbol to &.

And thats it. Now you have a valid Twitter badge!

Well lately I’ve seen many “imageless” generators for many types of objects on the web. Some include rounded corners on boxes and even ones that make boxes look like speech bubbles. One I have not seen, is for imagelss gradients. So I took it upon myself to create one. This is just the beta version, but I will improve the design soon. Also, please let me know if you find any bugs in it.

Enjoy, and please spread the word.
Thanks =]

There is no doubt that accessibility is an important factor when creating webpages and forms. Many people have trouble telling if they actually clicked on a text box and other form elements that are similar. To create the effect that allow these visually handicapped users to more easily use your form and adds a bit of style to your site you need to use :focus. Here is an example of a text box:

Try it. Click in the box. It may be somewhat difficult to see if your cursor for writing is flashing inside the box. A better idea is to use :focus to create a border around the edge of the text box. Here is the css we can use to achieve this effect:

All that is happening in this code is the creation of a class called “textbox” (without the quotes of course). The “:focus” part after the class name, makes the style apply to the text box when the cursor is inside of the text box. This will create a more accessible text box. Here is how to apply it to the html:

Lastly, here it is in action:

Comments are greatly appriciated ;).

Here is the code:

#theDiv
{
position:absolute;
left: 25px;
top: 25px;
}
body > #theDiv
{
position:fixed;
}

Please let me know what you think of this fix, thanks ;).

Dropdown menus can be a great thing to have on your site. They are compact; yet they contain everything that a regular menu would have. A lot of times, these are created using javascript. Also, using javascript can cause some validation errors if it is not done correctly. My fix to these problems is to achieve the exact same effect using pure CSS.

The first thing you need to do is create your stylesheet. If you do not have basic css skills, I recommend reading about it on www.w3schools.com. Alright, so what I am going to do is start my stylesheet and style a div with the id of “navmenu”. You can style this however you want or even rename it. Just be sure to change the name throughout. After creating “navmenu”, I am also going to style a div with the id “innerLinks” that will go inside of the “navmenu” div. This div will hold the links that will drop down in our menu. You can style this however you want. Just be sure that the position is set to absolute, the top attribute is set to the height of “navmenu”, and that display is set to none. You need to set its the position from the top equal to the height of “navmenu” so that when you scroll over the menu the links don’t appear on top of “navmenu”. If this does not make sense to you, I would read up on css positioning. Here is the code I used:

As you may know, the max-width property is very useful. With it you can set the maximum width of an object; whether it be an image or the body of your website. Most browsers can read this code and produce the correct results.

#footer{
max-width:500px;
}

What that code does is make an element with a maximum width of 500 pixels. The only problem with that code is Internet Explorer versions six and earlier cannot process this. Here is what you need to add to get the same results in those browsers:

#footer{
max-width:500px;
width:expression(this.width > 500 ? “500px” : this.width);
}

That expression makes it so that early versions of IE can understand this crucial property.