Question

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/

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.

Answer 1

Ok, after more digging, I found out that it was a computed float issue.

I believe that adding:

#splash-list ul li a {
    float:left;
}

will solve the problem. It may compute very slightly differently on other browsers, but at least they’ll be in the proper line.

Hope this helps!

Mason