css chrome. ul > li bug? Help to cope

0 like 0 dislike
3 views
Welcome.

shit

The problem is this:
Did the usual himself is the menu div>ul>li all list items float:left;
Inside each li — link (a), but that's not the link.
There is one menu item where you need a fixed width. When I ask him .narrow {width: 150px;} in all browsers everything is fine. In Chrome — the block is shifted by 1 pixel up... Even if it's empty and overflow:hidden... I do Not understand what it was... had to find a hack:

@media screen and (-webkit-min-device-pixel-ratio:0)
{
.main-menu li.narrow
{
margin-top: 1px;
}
}


What advise, what could be wrong? And I have checked so far width is not set. once set width climbs up on 1px.
This happens even with an empty li (without reference to the inside, therefore she's not). DOCTYPE: XHTML 1.0 Strict
by | 3 views

4 Answers

0 like 0 dislike
For all display: inline-block set vertical-align: top;
by
0 like 0 dislike
All business in these lines
\r
.main-menu li.narrow a {
height: 33px;
line-height: 13px;
padding: 6px 0 0;
width: 157px;
}
\r
Try to replace "Clinical studies" with "Clinical". Immediately understand everything.
by
0 like 0 dislike
Or change the inline-block from the reference block and search for how to vtolkat there are 2 words differently.
by
0 like 0 dislike
In Firefox 3.6 also there is a shift.
\r
It is not clear why there is inline-block and khaki-dancing with inline. All you need is display: table for menu, display: block and float: left for LI and A — for IE6/7.
by

Related questions

0 like 0 dislike
4 answers
0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
3 answers
110,608 questions
257,186 answers
0 comments
32,907 users