Web Design Quick Fixes Series #1

I launched the new design yesterday. Although I always Setup Local Testing Servers and perform Cross-Browser Compatibility Check before I launch a website, there might be some small glitches.

I have decided to write a series – Web Design Quick Fixes, where  I share some of issues I encountered in Web development and show you how to fixed them.  Find out how to get rid off WP Stats/WordPress.com Stats’ Smiley & Firefox’s dotted links, and a few Textarea tricks in this first post.

Hide WP Stats Smiley/WordPress.com Stats Smiley

Both WP Stats & WordPress.com Stats are great WordPress Plugins that track statistics.

The Issue

They generate a very small Smiley on the page for tracking purposes. Sometimes that little Smiley image can break your web layout.

The Smiley face made a gap on my footer.

The Quick Fix

img#wpstats{
  position:absolute;
  height:0;
  width:0;
}

That Smiley image has a ID of “wpstats”. Set margin and padding to 0px if you still see a gap.
PLEASE NOTE: Don’t try to set display:none. You will need the image for tracking.

Hide Firefox’s dotted links

The Issue

This is a Firefox specific issue. When you click on a link, Firefox adds a dotted border around it.

Firefox's dotted link border

The Quick Fix

a:active{
  outline: none !important;
}
a:focus{
  -moz-outline-style: none !important;
}

It fixed the dotted border for me. However -moz-outline-style does not validate… I have not found a way around it. Let me know if you have a better idea.

Disable Textarea resizing

The Issue

Users are able to resize Textarea by default.  What if you want to disable it.

Textarea resizing

The Quick Fix

textarea {
  resize: none;
}

This code is valid CSS for browsers like Safari and Chrome, but it is not valid code for other browsers like Firefox 2.

Textarea Scrollbar

The Issue

First, I’d like to Thank Adam Thalhammer for spotting the problem.
The textarea used in my portfolio’s feedback form is a great example. You will see what I am taking about when you see the image below.

The scroll bar shows up and it doen't look good.

The Quick Fix

I decide to disable the Scrollbar totally.

textarea{
  overflow: hidden;
}

Adam also suggested using flexcroll script. You can check it out!

Update: I found out a jQuery plugin called AutoResize. Go see their demo here.

What Do you think? Please leave feedback below!