CSS Alignment problem with Google Chrome

Question

I have a little alignment problem with my table. This only occurs with Google Chrome. I would like to have my header checkbox aligned with all checkbox of my table. Everything works well on IE & Chrome until I add the css table-layout:fixed; . You can see the result below. On Chrome, the header checkbox is no more aligned with all other checkbox in my table.

Here is my css:

table.search-results
{
  border-collapse: collapse;  
  table-layout:fixed;
  width: 100%;
}

table.search-results td.tipsy-empty { width: 5px;  }
table.search-results td.tipsy       { width: 5px;  }
table.search-results td.checkbox    { width:20px;  }
table.search-results td.favoricon   { width:20px;  }
table.search-results td.idaffaire   { width:50px;  }
table.search-results td.information { width:auto; white-space:nowrap; overflow:hidden; }
table.search-results td.username    { width:50px;  }

Any help is greatly appreciated.

Answer 1

Use a CSS reset: http://developer.yahoo.com/yui/reset/

It looks like the browsers have different default CSS settings for those elements. Always use a CSS reset, don't let browsers control you :)

If you're using Webkit rounded corners, it could also be the problem. Notice how the colored labels also are pushed out. IE doesn't support these rounded corners, which is why they appear as they should. Check Safari, I bet that's your issue. Find a non-css method of rounded corners. They can be a bit ugly, but they prevent things like this.