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


I am trying to create a website and having a problem has come a difficult issue: inline-block;

My website is:

If you go to this site, on the homepage, I have a horizontal list under the heading "Gypsy tours by Himalayan packages".

P> In this list, I have block AA with the display: block;

HTML : 

  & lt; Div id = "menu-board" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Jim Corbett Park, India & # 39; s elephant safari packages. / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Chopta Tungnath Trekking Package & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; River rafting package in Rishikesh & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;   
  CSS :  
  # menu-board {text-align: center; } # Menu-board ul {} # menu-board ul li {float: none; Display: Inline-block; } # Menu-board ul li {display: block; Width: 180px; Height: 130px; Background color: # C50000; Text align: center; Hidden flurry; }   
 Now, these are the issues: My link text in the second box is no more than two lines, unlike the other two boxes, where the link text spreads in three rows. These boxes look perfectly fine in IE and Firefox, but when I open a site in Google Chrome or Safari, the box at the center (with relatively less text) goes down if I made the text enough to spread in three rows I return, it comes back to the original state. I am not able to decide how to fix it. Sorry for not putting my issue in a simple and concise way I am relatively inexperienced with web-designing. If you can help me, then I would really appreciate it. Thank you in advance.   
 
 
 OK, after more digging, I found out that this was a calculation float problem.  
 I believe it is adding:  
  # print list ul li a {float: left; }   
 The problem will be solved, it can count on other browsers quite a bit, but at least they will be in the appropriate line.  
 Hope it helps!  
 Mason

Comments

Post a Comment