Different box models. I'd read up more on the difference between the
IE/FF box models to point you in the right direction. I'd give you a
quick tutorial, but I get out at 3 on Fridays! :D
On Jan 30, 1:52 pm, rob303 <rob.cub...@googlemail.com> wrote:
> Hi,
>
> I've been working on this for days. The chaps on IRC couldn't find an
> answer so I thought I'd post it here just in case anyone knows what's
> going on.
>
> I have a basic accordion type feature. The designer wants to be able
> to open more than one of hidden the sections at once ...
>
> So, here is my code:
>
> $(".accordion .accordion_header").click(function() {
> if($(this).hasClass('accordion_selected')) {
> $(this).removeClass('accordion_selected').next().slideUp
> ({duration: 'slow', easing: 'easeInOutQuad'});
> } else {
> $(this).addClass('accordion_selected').next().slideDown
> ({duration: 'slow', easing: 'easeInOutQuad'});
> }
> }).next().hide();
>
> .accordion {
> width: 97%;
> list-style-type: none;
>
> }
>
> .accordion_header {
> display: block;
> height: 20px;
> background: url(../images/bgd_accordion_off.gif) repeat-x;
> padding: 5px 10px 0 10px;
>
> }
>
> .accordion_header:hover {
> background: url(../images/bgd_accordion_on.gif) repeat-x;
> color: #d7d7d9;
>
> }
>
> .accordion_selected {
> background: url(../images/bgd_accordion_on.gif) repeat-x;
> color: #d7d7d9;
>
> }
>
> .accordion_section {
> display: block;
> line-height: 20px;
> padding: 0 10px 0 10px;
>
> }
>
> <ul class="accordion">
> <li>
> <a href="javascript:;" class="accordion_header">heading</a>
> <div class="accordion_section">
> A bunch of text
> </div>
> </li>
> </ul>
>
> The problem I face is that the content within the hidden div
> (accordion_section) is db driven so I have no idea what content to put
> in there. This means I cannot fix the height of those divs. This in
> turn breaks the animate on the slideDown function. If I set the
> height of the div the animate is perfect. Without it everythings all
> jumpy and broken looking. So I figured that all I needed to do was to
> get the height of the hidden div and then apply it using a css()
> call. This works fine in IE but Firefox doesn't seem able to give me
> the correct height for the div. For example if I use this code:
>
> var h = $(this).next().height();
> alert(h);
>
> IE gives me 240 - which correct for that particular div. But firefox
> gives 160 for the same div! Anyone know why?
>
> Many thanks in advance for any help.
>
> Rob.
