Button padding in Chrome

I want to do the kind of menu, 开发者_StackOverflow中文版where when you hover the item, it get's the same color as the actual page. e.g. like here http://www.css3.info/

It works fine with Mozilla, but in Chrome I always get a very thin line above the div, so the transition is not fluent. I have set all paddings to 0px.

The style for button looks like this:

button
{            
  background: #fff;   
  font-size: 14px;   
  color: #555;   
  border: 1px #ddd solid;
  border-bottom: none;
}   

and for the div

.main_div
{
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  -moz-border-radius-bottomright: 15px;
  -moz-border-radius-bottomleft: 15px;
  margin-left:0;
  margin-right:0;
  width:100%;
  background-color:#d0f0f6;
  text-align:left;
  padding:0px;
}

Can you please help me to solve this?

Going on a guess here due to the lack of HTML markup but:

.button
{            
  background: #fff;   
  font-size: 14px;   
  color: #555;   
  border: 1px #ddd solid;
  border-bottom: none;
  margin-bottom: -1px; //Note added line here
}  

If you could add more precise markup I could help further

I'm not completely sure that this'll solve your problem, but for those with button padding issues, in general, it might be to do with box-sizing:

http://css-tricks.com/box-sizing/

At least for Chrome, button elements are given a default of:

box-sizing: border-box;

So any width/height set will be the actual visible width/height, with any padding/border taking up space within that width/height. This is different to most other elements, where the default is visible width equals width + padding + borders. (This is box-sizing: content-box;).