Hide Button Value Text with CSS

Normally whenever I am using background images to style button elements with CSS, all I need to do is go into the code and remove the text for the value (value=””). However, I was customizing a site today and I was not able to remove the text in the code. I tried searching for the solution and came across many different answers. One of them was “text-indent: -9999em;” but that did not work for me in IE.  The only style that seemed to work across IE6 & 7, Firefox and Safari was by applying “font-size: 0.1px;” to the button.

Update: Transparent Background PNGs in IE6

This is an update to a previous post I made about Transparent PNGs in IE6. I finally tried out the “IEPNGFIX v2.0” which was supposed to be the only solution I’ve found to support transparent background PNGs and tiling background PNGs in IE6. The other PNG fixes worked just fine for non-background images, but I am happy to report that the IEPNGFIX v2.0 works like a charm! It’s still in Alpha mode but it appears to work just fine with a background PNG image on one of my client’s websites. Woohoo!

Suckerfish, Sons of Suckerfish, Sons of Ursidae and IE6

One of the biggest pains of developing for the web is the necessity of having to make sure all of your sites work in Internet Explorer 6, which came out in 2001 and yet is still used by 20% of users (October 2008). IE6 sucks at handling CSS floats and positioning. Most of the issues are resolved by using a Global Reset Stylesheet but I still find myself occasionally running into new problems for IE6, like with the Suckerfish CSS dropdown menu first created in 2003 at http://www.alistapart.com/articles/dropdowns.

Then came Sons of Suckerfish which still didn’t do the job until I came across Sons of Ursidae (http://css-class.com/articles/ursidae/) which has done the job, at least for now.

Gotta run, this post was more of a mental note to myself, sorry!

Transparent PNGs in IE6

For some unknown reason, a significant amount of people still use Internet Explorer 6 as their browser of choice. Since that’s the case, web developers such as myself have to continue to test our websites in IE6 to make sure they work as desired. The majority of the problems in IE6 caused by CSS can be resolved by using a Global Reset Stylesheet and by building in valid, clean code. However, problems still remain, such as IE6’s inability to support alpha-channel transparency for PNG image files.

There are a number of options for getting PNG transparency to work in IE6:

pngfix.js (http://homepage.ntlworld.com/bobosola/pnghowto.htm) – This is the first “hack” I came across a year or so ago and it’s been the one that I continue to use. It’s a simple JavaScript file that seems to do the job for most regular transparent PNG files in IE6. The biggest downfall I’ve had with it is that it does not support the background-repeat property for tiled backgrounds. Also, on the author’s homepage, he explains how the script hasn’t been updated since 2004 so he suggested to try out the SuperSleight filter.

SuperSleight (http://24ways.org/2007/supersleight-transparent-png-in-ie6) – I’ve also used this before but it’s a bit awkward and clunky since it uses a proprietary filter called AlphaImageLoader. It might be worth looking into if you’re looking for something that has been updated more recently than 2004, but it still does not support the background-repeat property, which is the only reason I would not use the initial pngfix.js.

IE PNG Fix (http://www.twinhelix.com/css/iepngfix/) – This one uses CSS behaviors, which is a custom Microsoft extension to CSS. It apparently also uses the AlphaImageLoader filter that SuperSleight uses. Most importantly, the IEPNGFix v2.0 Alpha version found on the test site apparently now supports the background-repeat property. If that’s the case, then I have found a new PNG fix! I haven’t used it yet but once I do, I’ll update the blog with my observations.

Until Microsoft requires users to update their browsers from IE6, we will always be presented with the problem of PNG transparency. Hopefully, the options above will help!

Align Image to Bottom of Table Cell in IE with CSS

Sometimes you might set the table cell to “valign=bottom” to place an image at the bottom of a table cell but a space of 1 or 2 pixels is still appearing at the bottom in Internet Explorer. A quick way to fix that is to apply the CSS declaration “vertical-align: bottom;” to the image itself.

Print Preview Problems with a Print.css file

Print preview problems : A number of our clients want to be able to print out their website exactly how it looks on the screen.  The problem is that most web browsers strip out any background colors and background images by default, so we need to “hack” the CSS to be able to display these images.  There are also a lot of other CSS issues that don’t easily transfer over to print so it’s important to keep print in mind while in the early developing stages.

I’m looking for a program or script that generates a PDF screenshot on the fly when the “Print Preview” button is pressed so that it will print out exactly what it looks like to the visitor on the screen, thus eliminating the need for a completely separate print.css file and worrying about whether or not the CSS will be preserved.  Yes, I know that the majority of users who wish to print a web page only want the content on the page with the rest of the graphical elements stripped out, but for the clients and users who want to print it out exactly how it looks on-screen, such a PDF-generating-on-the-fly script would be perfect.  I’m not sure if it exists out there or not but I’ll keep looking and keep you updated with what I find!

100% Height Divs in CSS

In order to get a container div to expand to 100% height with floating divs inside, add “overflow: hidden” to the parent div which contains the floating divs.

Styling Unordered Lists with CSS

I always seem to forget the steps I take in order to style unordered lists with CSS so I’m outlining the process below so I’ll always have it to check back on for future use. And maybe you’ll find it useful, too.

(Note: I ALWAYS use a “reset.css” stylesheet to strip out all of the browser-default styles. Doing so means that I won’t have to reset those styles in the declarations below.)

Style for UL

padding-left: 10px;

Style for individual listed items

ul.class li{
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
padding-left: 8px;
background-position: 0 12px;
line-height: 20px;
padding-top: 5px;
padding-bottom: 5px;

Reset Reloaded Stylesheet

A global reset.css file is a must for anyone who develops in Cascading Style Sheets. Eric Meyer’s Reset Reloaded will likely fulfill all of your needs.