CSS overflow: hidden; does not work
- by kapil.israni
Hi - I am having issues with overflow: hidden not working in my case.
I have a div id=ticker which basically works like a scrolling ticker. something like this - http://www.tinymassive.com/ (whats happening section). So i am prepending dynamic content to div id=ticker
The div id=ticker is contained in another div which is contained in another div, basically think of it like 4-5 level tree like structure
body - div[id=wrapper] - div[class=main] - div[class=content] - div[class=frame] - div[class=bg] - div[class=primary-content] - div[id=ticker]
Heres the css...
#wrapper {
width: 942px;
margin: 0 auto;
position:relative;
overflow:hidden;
}
.main{
width:942px;
margin:163px 0 0;
overflow:hidden;
}
.content{
background:url(../images/content-bg.gif) repeat-y;
overflow:hidden;
width:662px;
float:left;
}
.frame{
background:url(../images/frame-bg.gif) no-repeat 0 0;
width:662px;
}
.bg{
background:url(../images/bg-bg.gif) no-repeat 0 100%;
width:662px;
overflow:hidden;
}
.primary-content{
padding: 12px 20px 40px 22px;
width:620px;
overflow:hidden;
}
#ticker {
overflow: hidden;
}
Also if it helps - the ticker div contains a list of div[class=breadcrumps], which i am trying to scroll
.breadcrumbs{
border-bottom:1px solid #ebebeb;
padding:6px 0 6px 0;
overflow:hidden;
clear:both;
}
What i see is - when i prepend breadcrumps div to ticker, the page/ticker list keeps getting bigger :(
Any help would be appreciated.
Thanks.
