You are not going to believe the hack that I had to used to make it work in IE6… seriously, when the hell is this browser going to die? Another nightmare of morning thanks to it.

The HTML Code

<input type="submit" class="form-submit" value="Search" id="edit-submit" name="op"/>

The CSS Code

#edit-submit {
  width: 25px;
  height: 25px;
  text-indent: -9999px;
  background: url(../images/icon-search-25x25.gif) left top no-repeat; /* path to your image */
  border: none;
  margin: 0 0 0 10px;
  padding: 0;
  color: transparent;
  text-transform: capitalize;  /* This is the IE hack   */
}

Yes, I know it seems ridiculous use a text-transform property to make the text disappear, but we are talking about IE6.

Enjoy and convince your clients to stop using IE6.

Yes you read right, the “fabulous” new IE8 still is carrying that limitation.

Long story short is that IE stops reading selectors after 4095 ignoring the rest of your CSS code, however this is not happening in other browsers.

You may think this is a big number (I did too) but you will be surprise to see how easily the selectors growth when you are working with a CMS and a big big site.

I took this screen-shot today (20/03/2009), don’t you think those buttons are to close to the input box?

Nobody is perfect

Check the following examples and screen captures to see how it works:

Regular form with the blue outer glow

<form>
  <input type="text" name="test" id="test" size="20" />
  <input type="submit" value="Submit" name="submit" />
</form>

The same form without the outer glow

<style media="screen">
  #test { outline: none; }
</style>

....

<form>
  <input type="text" name="test" id="test" size="20" />
  <input type="submit" value="Submit" name="submit" />
</form>

Your code right now looks something like this:

<object  width="500" height="300" ... >
  <param name="movie" value="matrix.swf" />
  <param name="quality" value="high" />
  ...
  <embed src="matrix.swf" width="500" height="300" quality="high"  ... ></embed>
</object>

To work around this, you only need to use the wmode=”opaque” parameter. This will give the flash movie a stacking order

<object  width="500" height="300" ... >
  <param name="movie" value="matrix.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  ...
  <embed src="matrix.swf" width="500" height="300" quality="high"  ... ></embed>
</object>

You also may use the wmode=”transparent” which not only allows us to stack elements but also makes the background of the flash movie transparent.

If you want to get rid of them, here is the solution:

1. Type “about:config” in Firefox’s location bar (that big horizontal bar on top where you type to go to a different website)
2. Look for the string: browser.display.focus_ring_width
3. The default value is 1 (at least in my browser), change the value to 0

That’s all you have to do to get rid off those dots in your browser but what happens with the rest of human beings that visit your site? Well, there is also a solution for this issue and is to add a simple line of code into your CSS file:

a{ outline: none;}

Easy eh? Have fun.