overflow, overflow-x and overflow-y
Testing the CSS properties overflow, overflow-x and overflow-y. The 2nd two are CSS3 properties, but are they supported cross-browser?
Date Created: 9th October 2006
Date Modified: 9th October 2006
Sparked by query in WebmasterWorld HTML Forum:
http://www.webmasterworld.com/html/3113793.htm
overflow:scroll;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tincidunt. Pellentesque bibendum tristique nisi. Phasellus consequat adipiscing eros. Nullam sem augue, cursus a, placerat ut, vehicula at, neque. Duis tincidunt elit pellentesque nisi. Proin massa felis, suscipit et, posuere in, aliquet ut, risus. Fusce faucibus. Duis ut libero. Aenean at sem egestas neque semper porttitor. Cras posuere congue pede. Etiam odio est, facilisis quis, sagittis ut, faucibus ut, neque.
Sed purus ante, tempor a, dignissim vitae, porta quis, tortor. Ut faucibus. Quisque risus nunc, malesuada a, adipiscing sed, imperdiet non, quam. Vestibulum suscipit rutrum magna. Nunc pulvinar pellentesque arcu. Quisque vitae urna id ante mollis vulputate. Morbi neque arcu, facilisis vitae, tincidunt vel, suscipit id, magna. Pellentesque semper nibh vitae orci. Praesent rhoncus auctor turpis. Nam metus tortor, congue vitae, luctus luctus, nonummy id, mauris.
Maecenas turpis. Duis justo. Morbi consequat, eros eget lacinia adipiscing, arcu ipsum bibendum nisi, quis iaculis metus nunc a ipsum. Integer eget neque. Cras ut diam a quam feugiat tristique. Nam in lorem eu justo dictum adipiscing. Praesent tincidunt lorem sit amet magna. In hac habitasse platea dictumst. Mauris varius elementum nunc. Vivamus dapibus orci quis mauris. Integer nec sapien pulvinar nisl pellentesque luctus. Integer accumsan, eros a molestie tempor, turpis lectus auctor nibh, venenatis molestie libero dui in tellus. Aliquam sed neque. Cras ante. Nullam molestie libero quis erat.
Nulla porta varius turpis. Vivamus feugiat bibendum elit. Cras nonummy porta urna. Aliquam erat volutpat. Vivamus semper libero id nulla. Duis tellus diam, iaculis in, pulvinar non, sollicitudin in, purus. Maecenas lobortis tempus orci. Nam et neque. In hac habitasse platea dictumst. Etiam tellus. Nunc in risus.
overflow-x:scroll;
overflow-y:hidden;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tincidunt. Pellentesque bibendum tristique nisi. Phasellus consequat adipiscing eros. Nullam sem augue, cursus a, placerat ut, vehicula at, neque. Duis tincidunt elit pellentesque nisi. Proin massa felis, suscipit et, posuere in, aliquet ut, risus. Fusce faucibus. Duis ut libero. Aenean at sem egestas neque semper porttitor. Cras posuere congue pede. Etiam odio est, facilisis quis, sagittis ut, faucibus ut, neque.
Sed purus ante, tempor a, dignissim vitae, porta quis, tortor. Ut faucibus. Quisque risus nunc, malesuada a, adipiscing sed, imperdiet non, quam. Vestibulum suscipit rutrum magna. Nunc pulvinar pellentesque arcu. Quisque vitae urna id ante mollis vulputate. Morbi neque arcu, facilisis vitae, tincidunt vel, suscipit id, magna. Pellentesque semper nibh vitae orci. Praesent rhoncus auctor turpis. Nam metus tortor, congue vitae, luctus luctus, nonummy id, mauris.
Maecenas turpis. Duis justo. Morbi consequat, eros eget lacinia adipiscing, arcu ipsum bibendum nisi, quis iaculis metus nunc a ipsum. Integer eget neque. Cras ut diam a quam feugiat tristique. Nam in lorem eu justo dictum adipiscing. Praesent tincidunt lorem sit amet magna. In hac habitasse platea dictumst. Mauris varius elementum nunc. Vivamus dapibus orci quis mauris. Integer nec sapien pulvinar nisl pellentesque luctus. Integer accumsan, eros a molestie tempor, turpis lectus auctor nibh, venenatis molestie libero dui in tellus. Aliquam sed neque. Cras ante. Nullam molestie libero quis erat.
Nulla porta varius turpis. Vivamus feugiat bibendum elit. Cras nonummy porta urna. Aliquam erat volutpat. Vivamus semper libero id nulla. Duis tellus diam, iaculis in, pulvinar non, sollicitudin in, purus. Maecenas lobortis tempus orci. Nam et neque. In hac habitasse platea dictumst. Etiam tellus. Nunc in risus.
overflow-x:hidden;
overflow-y:scroll;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tincidunt. Pellentesque bibendum tristique nisi. Phasellus consequat adipiscing eros. Nullam sem augue, cursus a, placerat ut, vehicula at, neque. Duis tincidunt elit pellentesque nisi. Proin massa felis, suscipit et, posuere in, aliquet ut, risus. Fusce faucibus. Duis ut libero. Aenean at sem egestas neque semper porttitor. Cras posuere congue pede. Etiam odio est, facilisis quis, sagittis ut, faucibus ut, neque.
Sed purus ante, tempor a, dignissim vitae, porta quis, tortor. Ut faucibus. Quisque risus nunc, malesuada a, adipiscing sed, imperdiet non, quam. Vestibulum suscipit rutrum magna. Nunc pulvinar pellentesque arcu. Quisque vitae urna id ante mollis vulputate. Morbi neque arcu, facilisis vitae, tincidunt vel, suscipit id, magna. Pellentesque semper nibh vitae orci. Praesent rhoncus auctor turpis. Nam metus tortor, congue vitae, luctus luctus, nonummy id, mauris.
Maecenas turpis. Duis justo. Morbi consequat, eros eget lacinia adipiscing, arcu ipsum bibendum nisi, quis iaculis metus nunc a ipsum. Integer eget neque. Cras ut diam a quam feugiat tristique. Nam in lorem eu justo dictum adipiscing. Praesent tincidunt lorem sit amet magna. In hac habitasse platea dictumst. Mauris varius elementum nunc. Vivamus dapibus orci quis mauris. Integer nec sapien pulvinar nisl pellentesque luctus. Integer accumsan, eros a molestie tempor, turpis lectus auctor nibh, venenatis molestie libero dui in tellus. Aliquam sed neque. Cras ante. Nullam molestie libero quis erat.
Nulla porta varius turpis. Vivamus feugiat bibendum elit. Cras nonummy porta urna. Aliquam erat volutpat. Vivamus semper libero id nulla. Duis tellus diam, iaculis in, pulvinar non, sollicitudin in, purus. Maecenas lobortis tempus orci. Nam et neque. In hac habitasse platea dictumst. Etiam tellus. Nunc in risus.
IFRAME ... overflow ?!
Overflow on an IFRAME isn't supported in IE6 very well, if at all. Simulate this by placing the IFRAME within a scrollable DIV...?
div#iframe_container {
width:318px; /* Allow for width of vertical scrollbar */
height:100px;
border:2px solid #000;
overflow-x:hidden;
overflow-y:scroll;
}
Yes, this seems to work OK in both FF and IE6. However, you need to set a height on the IFRAME to allow for the entire IFRAMEs document. Too small and you can't access it all, too large and you have a gap at the bottom!
Aside:
[Home]