Stubborn Table Cell Borders in Firefox

Although HTML is a standard since November 2005, every browser takes the liberty to display the same HTML code in a different way. I am quite sure everyone who surf the net using more than one browser notices this and with the growing competition of web browsers the problem will remain with us for quite some time.

As a web developer, you need to make sure your sites look good on all browsers. Unfortunately, most web developers tend to use just one browser to develop their code on and even forget to do their final testing on different browsers.

My guess is that most of the problems with cross-browsers HTML code take place with Microsoft's Internet Explorer (IE) and Mozilla's Firefox (FF), since these are currently the two most common browsers known to man.

Recently I had this kind of problem involving table cell borders.

I wanted to use just the bottom border of the cells in my table and therefore I used a style that looked something like this:

td
{
      border-top:0px;
      border-bottom:1px solid Gray;
      border-left:0px;
      border-right:0px;
}

In IE, this worked perfectly but in FF the left and right borders didn't want to disappear. I tried many different things in order to make them go away without messing the things in IE and I found that the solution resides in the 'hidden' property.

Simply set the border attribute to hidden like so: border-left:hidden; and the stubborn cell borders in FF will vanish. Possibly, there are other solutions but as long as one works, no need to look for others, right? :)