WenChen wrote:
> Hi
>
> The following page use prototype accordion effect,
> it look fine in ff, but in ie it shows big space between each accordion
> header
>
> http://newped2.auckland.ac.nz/coursebuilder/11/publish/1/3.html
>
> Is it a peekaboo problem?
> Any help you could offer would be really appreciated.
>
> Thanks in advance
> Wen
Hi Wen
There doesn't seem to be any floats elements involved so I would that this is a
peekaboo bug which involves missing content. What you have is a vertical space.
It took me quite a while to analyse what I had to look for. You made no note in
your message that id="1_" was a line of javascript which I finally found it in
the code after half and hour. well playing further i found the answer. Resize
the viewpoint in IE to about 200px wide and watch the space above the content.
What you will notice is a certain point, the space disappears. Scroll up the
page and take a look at the Tasks | Resources links. Narrow the viewpoint
slightly more and these links will drop. What do you see on the left of these
links, a float containing your menu. Now widen the viewpoint enough so you can
see the space above the content reappear and notice how this content within the
accordion_content div is always below this float. Click on each of the
accordion js thingy and notice that for each of these accordion_content div the
content is always below the float. When I click on Final and then maximize the
window, the content has no space above it, but now the content is only 100px
wide. This does all send me buggy. Wen, what is this comment in the
accordion.js about. Does the space disappear when this is removed.
"WenChen made some tiny change to fix this.currentAccordion.scrollHeight
this.currentAccordion.scrollWidth Problem"
I don't understand javascript, but there could be something there maybe. Now
after an hour of bug hunting I now move on to that float with the menu!
#navcontainer {
background-color: #FFFFFF;
width: 169px;
float: left;
margin-top: 10px;
}
Is the problem fixed if negative margins are added as such below.
#navcontainer {
background-color: #FFFFFF;
width: 169px;
float: left;
margin: 10px -500px -1000px 0;
}
This technique is removing floats [1]. I hope this helps.
BTW, this can been achieved just by xhtml and CSS [2], but it only works in
Firefox and Mozilla and buggy in Opera.
[1] <http://www.gunlaug.no/contents/wd_chaos_03.html>
[2] <http://css-class.com/test/accordian.htm>
Kind Regards, Alan
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
