Robert Kern » CSS

Use PHP to make alternate coloured rows

Robert Kern — Thu, 28 Aug 2008 14:56:39 +0000

I came across an article that described how to use PHP to make alternate coloured rows in a table and was surprised at how difficult they made it. There is a very simple way to display alternate coloured rows in tabular data. Read on for more info.

Use the following PHP code to display alternate rows in different colours. What this is actually doing is setting the class for one row to: odd, and the next row to: even. Then in my css stylesheet I will define .odd and .even to have different background colours. I see this as a very clean and manageable way to do this common task.


$i = 0; //Set the index to zero
//Put your code here to loop through the database result or whatever it is you are displaying
//Then display the table row
?>
 if($i%2){ echo 'odd'; } else { echo 'even'; } ?>">

This same idea can be used in probably all web development coding languages with slightly different syntax.

CSS / Javascript matching columns

Robert Kern — Wed, 16 Jan 2008 23:47:29 +0000

If you are having trouble getting two div columns to match, then try this matching columns script. It is a very simple script that will match the height of the columns you specify (all you have to do is assign the class ‘column’ to the columns you want to match).

Download file: matching_columns.zip

/*
 
Derived from a script by Alejandro Gervasio.
 
Modified to work in FireFox by Stefan Mischook for Killersites.comHow it works: just apply the CSS class of 'column' to your pages' main columns.
 
*/
 
matchColumns=function(){
 
var divs,contDivs,maxHeight,divHeight,d;
 
// get all
 
elements in the document
 
     divs=document.getElementsByTagName('div');
 
contDivs=[];
 
// initialize maximum height value
 
     maxHeight=0;
 
// iterate over all
 
elements in the document
 
     for(var i=0;i
 
// make collection with
 
elements with class attribute 'container'
 
          if(/\bcolumn\b/.test(divs[i].className)){
 
d=divs[i];
 
contDivs[contDivs.length]=d;
 
// determine height for
 
element
 
                if(d.offsetHeight){
 
divHeight=d.offsetHeight;
 
}
 
else if(d.style.pixelHeight){
 
divHeight=d.style.pixelHeight;
 
}
 
// calculate maximum height
 
                maxHeight=Math.max(maxHeight,divHeight);
 
}
 
}
 
// assign maximum height value to all of container
 
elements
 
     for(var i=0;i
 
contDivs[i].style.height=maxHeight + "px";
 
}
 
}
 
// Runs the script when page loads
 
window.onload=function(){
 
if(document.getElementsByTagName){
 
matchColumns();
 
}
 
}

Fix transparent png images in Internet Explorer 6 (IE6)

Robert Kern — Wed, 16 Jan 2008 23:42:15 +0000

Sometimes it can be very frustrating building websites that are cross-browser. One of the many issues is transparent png images in IE6.

PNG’s have enabled us to make beautiful images for websites with amazing transparency etc. There is a very simple way to make transparent png images work in all browsers.

Download file: png-fix.zip

This method uses CSS to fix the issue. You can define a class such as ‘transparent’ and apply that to the images whose transparency you want to make work in ie6, or simply use the fix in CSS for the img tag (therefore making all images’ transparency work in ie6).