How do i disable the horizontal scroll bar in a pop up using javascript?

I have a pop up in which i need to allow only the vertical scroll bar to appear. I've tried using scrollbars=no with the window.open method but that removes both scroll bars. I've also tried overflow-x: hidden; in the css as well as the body tag of the pop up. That also removes both scroll bars. I need to make the horizontal scroll bar invisible. Any ideas? Thanks for you time.|||Hiding horizontal scrollbar:





http://www.webmasterworld.com/forum21/18鈥?/a> (Last post may have solution for you)





http://bytes.com/topic/javascript/answer鈥?/a>





Ron|||Overflow will do what you need, but you need to set everything up the right way. You might have to tweak the width/height/margin/padding, but the following will work:





(File for parent window):


%26lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"%26gt;





%26lt;html xmlns="http://www.w3.org/ 1999/xhtml" xml:lang="en" lang="en"%26gt;


%26lt;head%26gt;


%26lt;title%26gt;%26lt;/title%26gt;


%26lt;script type="text/javascript"%26gt;


function openWin() {


var myWin = window.open('test-1.html','win','scrollb鈥?resizable=yes, height=300, width=300');


return false;


}


%26lt;/script%26gt;


%26lt;/head%26gt;





%26lt;body%26gt;


%26lt;a href="file.html" onclick="return openWin()"%26gt;Open window%26lt;/a%26gt;


%26lt;/body%26gt;


%26lt;/html%26gt;








(File for child window):


%26lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"%26gt;





%26lt;html xmlns="http://www.w3.org/ 1999/xhtml" xml:lang="en" lang="en"%26gt;


%26lt;head%26gt;


%26lt;title%26gt;%26lt;/title%26gt;


%26lt;style type="text/css"%26gt;


html, body {


margin:0;


padding:0;


width:350px;


height:350px;


overflow-x:hidden;


overflow-y:auto;


}


%26lt;/style%26gt;


%26lt;/head%26gt;





%26lt;body%26gt;


%26lt;div style="height:200px; overflow:hidden !important; border:1px solid red"%26gt;test%26lt;/div%26gt;


%26lt;/body%26gt;


%26lt;/html%26gt;








Note that you wouldn't even have to worry about overflow-x if you set the width of the child window to the same size as the width of its body element (minus the scrollbar width which differs across browsers but is in the neighborhood of 17px). That way, there is no overflow, so no scrollbar would ever show up.