CODEWITHSUNDEEP
csswebkit
user1933045
user1933045

Reputation: 80

CSS positioning anomaly Safari/Chrome

Please see the following example:

http://6329195.com/stackoverflow/css_li_weird/index.html

If you refresh the page, every once in awhile one of the images will move down to be noticeably out of line with the others. It doesn't appear to happen in Firefox. It only happens every once in awhile. Most often it happens to the last image, but it can occur to any/multiple at a time. You can view a screenshot of the problem here:

enter image description here

http://6329195.com/stackoverflow/css_li_weird/screenshot.jpg

Can anyone tell me what is wrong/why it does this?

(The list is ultimately used for a jQuery slideshow, hence the blank href in the a tags)

Upvotes: 4

Views: 182

Answers (1)

JSuar
JSuar

Reputation: 21091

A similar question's answer lead me to try vertical-align: top; which appears to work. So, if for some reason you did need to keep overflow:hidden; then this might be a way to prevent the glitch/bug.

Working Example: http://jsfiddle.net/rtppE/2/

li.productMenuItem{
    vertical-align: top;
    width: 45px;
    display:inline-block;
    list-style: none;
    height: 45px;
    overflow: hidden
}

Upvotes: 1

Related Questions