li with display: inline-block; property jumps down in Google Chrome & Safari
===

I am trying to build a website and have encountered a tricky issue with li having display: inline-block; property.

My website is: [http://www.gypsytours.in/][1]

If you visit this site, on homepage, I have a horizontal list under the heading "Himalayan Packages by Gypsy Tours".

In this list, I have a block element A with display: block; property.

Here are my simplified codes:

**HTML**:

    <div id="menu-board">
    <ul>
    <li><a href="#">Elephant Safari Packages in Jim Corbett Park, India</a></li>
    <li><a href="#">Chopta Tungnath Trekking Package</a></li>
    <li><a href="#">River Rafting Packages in Rishikesh</a></li>
    </ul>
    </div>
**CSS**:

    #menu-board
    {
    	text-align: center;
    }
    #menu-board ul
    {
    }
    #menu-board ul li
    {
    	float: none;
    	display: inline-block;
    }
    #menu-board ul li a
    {
    	display: block;
    	width: 180px;
    	height: 130px;
    	background-color: #C50000;
    	text-align: center;
    	overflow: hidden;
    }

Now, the issues is: My link-text in 2nd box, is not longer than two lines, unlike the other two boxes where link-text spreads in three lines. This boxes look perfectly fine in IE and FireFox but when I open the site in Google Chrome or Safari, the box in the center (with relatively shorter text) pops down. If I make the text long enough to span in three lines, it comes back to original position. I am not able to figure out how to fix this.  My apologies for not being able to put across my issue in simple and short manner. I am relatively inexperienced with web-designing. I will really appreciate if you guys can help me out. Thanks in advance.

  [1]: http://www.gypsytours.in/

