Instant Search

[AyoobG]

hi thanks a lot! it worked except for one. Why is it the letter being highlighted is cut horizontally? like the letter g and p for instance?. Ive tried to increase the height of .alignRight but it only increases the height but the letter is still cut. Again thanks a lot for your help.

Hi,
I now understand what you mean. I was viewing your site in firefox, so i couldn't understand what was going on. The tails get cut of horizontally because the height of the line is small, you will need to open instantSearch.css and increase the height in .resultsContainer a { you will also need to add line-height

Here's a brief explanation of these properties:
height: this controls the height of the line if its small then the words get cut off. if its big, then it looks stupid.
line-height: this controls the line seperation for long product names (i.e product names that can not fit into 1 line)

Change your code from:

.resultsContainer a {
display : block;
color : #000;
background-color : #fff;
padding : 0.1em 0.4em;
text-decoration : none;
overflow:hidden;
height:18px;
}

into:

.resultsContainer a {
display : block;
color : #000;
background-color : #fff;
padding : 0.1em 0.4em;
text-decoration : none;
overflow:hidden;
height:100%;
line-height:100%;
}

You then have to test different values for both height: and line-height: to see which works best. (if you want to work in pixels then change % into px)

for compatibility you may have to see how it looks in chrome and firefox (a lot of users use these browsers)