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? :)

Comments

Many thanks, this is what I

Many thanks, this is what I was needing

Cheers mate!

Cheers mate!

This was just what I needed.

This was just what I needed. Thanks

Fancy borders

My problem is that I want a white border around each cell, but Firefox insists on making it a fancy border with one half darker than the other, hence the borders come out half white and half grey. (Black borders come out half black and half grey.) Only way around it I have found is to set the border to 0 and use cell padding or cell spacing to create the white space around the cell. This will of course only work if the background is white.

Useful information indeed

Useful information indeed specially very helpful css for the beginners :)

Very useful information indeed

Your code just solved a month's-long predicament for my site. Cool.

As a web developer, you need

As a web developer, you need to make sure your sites look good on all browsers. - Weather Shield Windows

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Image CAPTCHA