A Frequent Problem with ie6: The bottom of the text (e.g. g y p) get cut off and make text illegible. This mostly happens with two line breaks and can be fixed by using a larger line-height in css.

To fix the problem we are going to create a class using the internet explorer 6 box hack.

We need to locate the exact area that we are having the problem with. For me the text was being cut off at .description h4 a

To fix the text cut off issue without the box hack just simply created a css class and adjsut the line-height

This post teaches you how to replace CSS text links with an image and an image hover state.

An example can bee seen here (the icons above the main image)

Before doing this it is a good idea to preload your images with javascript to avoid the get lag that occurs when mouses over the link for the first time.

First lets set up the HTML

<p id="icons">
<a href="#" class="enlarge">enlarge</a>
<a href="#" class="avatarit">avatar it</a>
<a href="#" class="dolike">i like it</a>
<a href="#" class="dontlike">don't like it</a>
<a href="#" class="favorite">favorite</a>
</p>

Note that we gave the paragraph an ID and each anchor tag has its own specific class

Lets move onto the CSS

p#icons a{width: 67px; height:21px; text-indent:-9000px; display:block; float:left; margin-right:4px; margin-bottom:4px; }
p#icons a.enlarge{ background:url(http://kilroylives.com/images/buttons/enlarge.gif) top left no-repeat; }
p#icons a.dolike{ background:url(http://kilroylives.com/images/buttons/likeit.gif) top left no-repeat; }
p#icons a.dontlike{ background:url(http://kilroylives.com/images/buttons/dontlike.gif) top left no-repeat; }
p#icons a.avatarit{ background:url(http://kilroylives.com/images/buttons/avatar.gif) top left no-repeat; }
p#icons a.favorite{ background:url(http://kilroylives.com/images/buttons/favorite.gif) top left no-repeat; }
p#icons a.enlarge:hover { background:url(http://kilroylives.com/images/buttons/enlarge-over.gif) top left no-repeat; }
p#icons a.dolike:hover { background:url(http://kilroylives.com/images/buttons/likeit-over.gif) top left no-repeat; }
p#icons a.dontlike:hover { background:url(http://kilroylives.com/images/buttons/dontlike-over.gif) top left no-repeat; }
p#icons a.avatarit:hover { background:url(http://kilroylives.com/images/buttons/avatar-over.gif) top left no-repeat; }
p#icons a.favorite:hover { background:url(http://kilroylives.com/images/buttons/favorite-over.gif) top left no-repeat; }

Notice the first line of CSS I set all the anchor tags in the paragraph to a certain height and width. I did this because all my icons were the same. If you images vary, use individual height and width sizes in the individual link classes. Most likely all your images will have the same height, so use that first line to shave some code.

Also in that first link I set display to block. Doing this allows me to have the text I wrote in the anchor tags to be negative indented so it isn't seen by the common user. Doing so make it legible to the seeing impaired which is Section 508 compliant and good in general for search engines!

Setting display to block forces each link to break down, so float is set to left to have them show up on the same line.

Each anchor class has a background field, this is where you put the image you want to load. under the anchor classes :hover state, put in the hover image. If you wish not to have a hover image remove the :hover line.

It is good to preload the images you use because there will be lag from the CSS loading the image for the first time. Learn to preload with javascript here.

The letter-spacing is treated differently on OSX than Windows XP. This can cause problems if you basing a design off text-based CSS. This fix works perfectly if you using a simple dropdown menu that uses absolute positions and auto margins, so its not a child of the initial menu you made, an example can be seen here: www.cmcri.org

A simple javascript code can detect a MAC platform with an IF statement, IF it is MAC then write to document a style. This code must be inserted after your initial call for your style sheet so it overwrites the original CSS code.

if(navigator.userAgent.indexOf('Mac') != -1)

{document.write ('<style type="text/css">#header ul li a{letter-spacing:.025em;}</style>');}

Easy fix!

Today marks a day, the day Mozilla's Firefox takes on IE6 (Microsoft Internet Explorer 6). W3schools posted the statistics for September 2007: IE6 34.9% Firefox 35.4% IE7 20.8%. One year ago September 2006 Statistics had Firefox at 27.3% and IE6 at 55.6%. Why this is such a big deal, why does is call for a fresh cold one to be cracked and cheered to Mozilla? IE6 was released late August 2001 with partial support of CSS level 1. Cascading HTML Style Sheets (CSS) level 1 was finalized in December 1996 by the World Wide Web Consortium (W3C), CSS level 2 finalized November 1997. CSS allows web designers and coders to control a websites look across infinite pages with one file. The one file also saves download times and makes HTML easier to read for disabled users and search engines. All the beautiful sites and cool websites that are made without Flash use CSS in many ways. It took Microsoft 9 years to implement a browser (IE7) that supported CSS level 2 (CSS2). Until Mozilla started chipping user percentages away from Microsoft in 2003, Microsoft software was responsible for rendering 85% of all pages internet users browsed on the web.

Needless to say, web designers small and large have struggled to have all pages correctly render across all browsers (mozilla, safari, and internet explorers), there have been many hacks to fix IE rendering bugs. Hacks which were the last resort in the trick box of the developer after frustrating over single pixel lengths that destroyed layouts.

Why has Firefox surpassed IE6? Two main reasons: One, Firefox is customizable, more secure, and renders faster. Two, with the introduction to Windows Vista users are opening up new computers in IE7 or getting IE7 via windows update in Windows XP. IE7 is a much better browser than IE6 and supports CSS2. If Microsoft had only done this 5 years ago I wouldn't have to keep Windows XP installed with IE6 for debugging.

So today I crack open a cold one and salute the mighty developers at Mozilla that pushed Microsoft to get their shit together. I salute to the demise of IE6 and throw it back for less debugging headaches. Call your web dev buddies and hit the bar, see you there.

P.S. Respect to Netscape and Opera, but they haven't had the success in reaping up users like Firefox did.