image-line that behave differt in firefox browser

Question

I am working on this following website:

Click here to see.

I have an issue that I cannot solve.

As u can see, there is a green line in the main menu. This green line should stay behind the green circles buttons, at the y-middle of them.

If I watch the web site with firefox that line appears lot of pixels under the circle buttons and not behind in the middle.

Watching the website with chrome or explorer, there are no problems to report.

some css:

div#line {
    background-image: url('http://www.matteocorona.com/grid/img/line.png');
    background-repeat: repeat-x;
    background-position-y: 80%;
}

Any help to solve this mysterious strange behave?

Thanks

Matteo

Answer 1

Unfortunately, background-position-y/-x are not W3C standard yet and thus aren't supported well by browsers. Use the standard syntax background-position: 0 80% instead.