CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
Suppose you have some style and the markup:
When you view this. The <ul> has a scroll bar at the bottom even though I've specified visible and hidden values for overflow x/y.
(observed on Chrome 11 and opera (?))
I'm guessing there must be some w3c spec or something telling this to happen but for the life of me I can't work out why.
UPDATE:- I found a way to acheive the same result by adding another element wrapped around the ul. Check it out.
Answer
After some serious searching it seems i've found the answer to my question:
from: http://www.brunildo.org/test/Overflowxy2.html
In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.
also the W3C spec says:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.
Short Version:
If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.