thanks for your fast reply, it is a medium sized project and i am
running in my local, i am going to extract the parts relavent to it
and have it post it here, i am thinking to setup a demo or code snip
somewhere but not at this very moment so bear with me now
here is the top structure of the html
<table align="center" border="0" cellspacing="0" style="margin:auto;">
<tr><td>
<div id="content-wrapper">
<table align="left" border="0" cellspacing="0">
<tr>
<td valign="top">
<div id="tab">
<ul>
<li id="tab1"><a href="#">TAB1</a></li>
<li id="tab2"><a href="#">TAB2</a></li>
<li id="tab3"><a href="#">TAB3</a></li>
</ul>
</div>
</td>
<td rowspan="2">
<div id="slideContainer" class="transparent">
<div class="curvB6">
<h3 style="display:inline;">Home Introduction</h3>
<div class="homeDisp">
<!-- the scrollable div is set in homeDisp -->
here is the corresponded element styling. note i dont style any of the
tables and div id=tab has no styling its just for grouping purpose
#content-wrapper {
width: 760px;
height: 525px;
margin: 0 auto;
padding: 0;
background: url(sp3.jpg);
border-top :2px solid #FFFFFF ;
border-bottom :2px solid #FFFFFF ;
}
#slideContainer {
float: left;
width:546px; /*ie6 560px*/
height:525px; /*ie6 525px*/
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
display: inline;
/*background: url(box.jpg) no-repeat;*/
}
.homeDisp {
/*margin-left:10px;*/
padding:4px;
border:2px solid black;
width:515px; /*ie6 540px*/
height:461px;
overflow-y:scroll;
scrollbar-arrow-color:#006600;
scrollbar-face-color:#e7e7e7;
scrollbar-3dlight-color:#a0a0a0;
scrollbar-darkshadow-color:#888888;
}
as for the javascript its basically the same as in the mootool
fx.slide horizontal sliding example. when element <a> tab1, tab2, tab3
are add to the click listener
thanks,
On Jun 25, 12:00 pm, Ryan Florence <[email protected]> wrote:
> Do you have your code up somwhere? My guess is it's a CSS issue.
>
> History has shown that usually IE is the culprit, while mootools and
> firefox are behaving properly.
>
> On Jun 25, 2009, at 12:53 PM, Mike wrote:
>
>
>
>
>
> > Hi all,
>
> > I just discover there might be a bug in firefox or in mootool because
> > internet explorer works fine.
>
> > INTRO
> > I have a DIV that can scroll on the content in it such as
> > <div style="overflow-y:scroll;"></div>
> > creating a vertical scroll
>
> > the I use the fx.slide effect on this scrollable DIV panel so the
> > scrollable DIV panel can slide from right to left side of the page
> > thus acting like a desk drawer when the user dont need the massive
> > panel
>
> > ISSUE
> > the problem is when I click the tab or the button on the right side of
> > the panel, the slide effect take effect but when the scrollable DIV
> > panel slide from right to left side of other html element, the sliding
> > scrollable DIV panel appears on top of the other html element on the
> > left side.
>
> > the thing is it work perfectly in internet explorer but not in
> > firefox2. i am wondering if this is a known issue on the firefox or
> > css styling? or is anyone encounter this issue before? is there a way
> > to workaround it?
>
> > ps. I was thinking to change the style of the div overflow=hidden
> > before it slideout to the left then when it slidein back to the right,
> > change the style of the div overflow back to = scroll. but when I do
> > this the div wont even slide anymore
>
> > anyone has an idea, please feel free to discuss this matter
>
> > thanks,- Hide quoted text -
>
> - Show quoted text -
