I was in the need of a script for alternating row colors in a table on a web site I'm doing. I've done this before, but since I'm getting into jQuery these days I thought I'd try to find a way of doing it using this.

Well, a little Googling and I came upon this website.

This is an excerpt from the book Learning jQuery. Need to try and get my boss to buy that one.

I was doing the closing check on a clients web site before posting it live, and so I was testing to see that the site looks and works ok in all major browsers. This of course includes the dreaded monstrosity of a web browser IE6.

For some unclear reason some parts of the content did not show. It was just gone.

After some googling around I found that this is a pretty well known phenomena, and is named the Peekaboo bug.

Now if you google "Peekaboo bug" you'll find plenty of help. The first solution that I stumbled across that helped me was to add a line-height attribute to the element surrounding all the content that was disappearing.

To give propper credit, I found the solution here.

This entry will look at a couple of problems that might arise when using the methods outlined in part 1.

Let's look at what we did. We had this part of css...

...where the transparent background png would not work in IE6.

What we did was change it to this:

Here we use a IE hack to set background to none, and uses the IE only AlphaImageLoader filter to provide the png background.

So far, so good.

Problem 1

The #banner element has a set height in our example here. But if you try this on an element which have no set heigth, the background will not show. What usually makes the trick here is to add height: 100%; to the fix like so:

Problem 2

When using this fix you will often experience that url's will not be clickable, and form elements and text is not selectable.

What I have found to work is to first create a inner element. So if your html code was so:

This needs to be changed to:

Then change your css to something like this:

The most important thin here as I understand is the relative positioning of the innerbanner element, but the other attributes might help as well, so I always leave them in there.

Problem 3

The code css code above is ugly, messy and it will not validate. I suggest you make a separate css file called something like ie6_or_less.css and put the IE hack css into it.

Then in your html template call it like this:

This conditional statement within html comments makes sure that only IE browsers version 6 or less will load and use the ugly code.

That wrapps it up for this round.

If you, like me, now and then find your self in need of fixing issues of a websites appearance in one browser or the other, you might find this overview over different CSS Hacks usefull.

Ok - here's the long awaited follow up to this little series of posts dealing with IE6 and png's.

The last time we saw how we can make use of transparent png's as backgrounds in our site layouts, included in our .css files. But what if we want to use png in our html source like so:

Here's the way I prefer to deal with such situations. This method is a "implement once, work on all images" kinda thing.

The downside, but one I'm willing to live with, is that the IE user has to have JavaScript enabled.

First create a pngfix.js file and paste the following into it:

Then in the head of your page you do this:

As much as I wish I was smart enough to come up with this my self, the credit goes to Bob Osola who in turn is crediting more people on his site.

This is the first of two short entries on dealing with png's in IE6.

Personally I like to use png's in my site designs, often to create a glow effect on a element laying on top of a gradient and/or patterned background, you can see it here on my blog as well. Here's the css code for the top part of the blog:

Now let's see how this looks in IE 6:

Not very pretty. To fix this I added the following css:

Adding * html before the #banner id selector is a hack that makes only IE read this piece of css, and here we use a IE specific filter to put the background png in, and doing this the png will maintain it's transparency.

In the last FarCry post I linked to another post about configuring TinyMCE in FarCry. However most of the time I find that I use TinyMCE like it works right out of the box. It will use the same stylesheet that is configured for the site itself, so the formating you see in TinyMCE will pretty much be the same as on the site.

The only little problem with this is if you in your css have specified a background color or image for body. For example you have a black background for the site, but the content is black text in a div with a white background.

Now what happens is that TinyMCE will use the black background from the body as a background in the editor window.

The solution is quick and easy. In your css include the follwing code:

Happy FarCry'ing