Sent by Alan Gresley on 11 September 2007 16:04
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-REMOVED]]
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/
