Thanks for the reply Eric. But what have different box models got to
do with it? I'm not setting any border or padding properties on my
hidden div that would effect the height. And the difference between
the two browsers is huge. IE says 240px and FF says 160px. I
certainly don't have 80px worth of padding on that element ...
Rob.
On Jan 30, 7:45 pm, Eric Garside <gars...@gmail.com> wrote:
> 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.
