Trond Ulseth's Blog - CSS

Alternate row colors with jQuery

Mon, 26 Nov 2007 09:22:00 -0600

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.

The IE6 Peekaboo bug - solution

Mon, 19 Nov 2007 06:29:00 -0600

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.

Dealing with IE6 and png's - part 3

Thu, 18 Oct 2007 08:37:00 -0600

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...


#banner {
height: 114px;
background-image: url(/images/header_bg.png)
}

...where the transparent background png would not work in IE6. What we did was change it to this:


#banner {
height: 114px;
background-image: url(/images/header_bg.png)
}

/* IE hack */
* html #banner {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/header_bg.png');
}

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:


/* IE hack */
* html #banner {
background-image: none;
height: 100%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/header_bg.png');
}

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:



Some text and/or images here.

This needs to be changed to:




Some text and/or images here.

Then change your css to something like this:


/* IE hack */
* html #banner {
background-image: none;
height: 100%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/header_bg.png');
}

* html #innerbanner {
position: relative;
height: 100%;
width: 100%;
z-index: 10;
}

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.

CSS Hacks overview

Mon, 14 May 2007 09:09:00 -0600

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.

Dealing with IE6 and png's - part 2

Fri, 23 Mar 2007 09:48:00 -0600

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:


var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

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.

Dealing with IE6 and png's - part 1

Tue, 13 Mar 2007 05:03:00 -0600

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:


#banner {
  height: 114px;
  background-image: url(/images/header_bg.png)
}

Now let's see how this looks in IE 6: Not very pretty. To fix this I added the following css:


/* IE hack */
* html #banner {
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/header_bg.png');
}

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.

FarCry tip: background in TinyMCE

Tue, 14 Nov 2006 03:46:00 -0600

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:


.mceContentBody {
	background-image: none;
	background-color: #FFFFFF;
	}

Happy FarCry'ing

A little CSS trick for tables

Wed, 25 Oct 2006 10:05:00 -0600

I needed to include a table in a page today, like so many times before. Here's the code:



  
  Date OrderID
  #DateFormat(orderDate, "d.mmm yyyy")# #objectID#

Date	OrderID
#DateFormat(orderDate, "d.mmm yyyy")#	#objectID#

So far so good. Now I wanted to make some borders around the cells. What I've previously been doing is to set a cellspacing of 1 pixel on my table, make a background color for the table (the same color as I want for borders, and then another background color for th and td elements. Something like this:





  
  Date OrderID
  #DateFormat(orderDate, "d.mmm yyyy")# #objectID#

Date	OrderID
#DateFormat(orderDate, "d.mmm yyyy")#	#objectID#

Now that works. There's no invalid code. It's easy to read and manipulate. However, it felt wrong to use a table background color to make a border color. I thought there had to be a better/cleaner way of doing this with CSS only. And so together with my colleague we started looking (using The Google*) and he found a simple css attribute neither of us have used before (and we use a lot of css). Better to show than to tell. Here's the code how it looks now:





  
  Date OrderID
  #DateFormat(orderDate, "d.mmm yyyy")# #objectID#

Date	OrderID
#DateFormat(orderDate, "d.mmm yyyy")#	#objectID#

So we did not save much code right away. But now all aspects of the formating is controlled by the css. And when dealing with many tables using the same css we will have saved code, and eased the managability. * In President Bush's words