Oh, one other thing. If I call .css('display', 'block') on the
element before using height() FF gives me the correct value of 240px.
Obviously, that breaks the accordion because I want the element
hidden!
/me scratches head ...
Rob.
On Jan 30, 7:57 pm, rob303 <rob.cub...@googlemail.com> wrote:
> 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.
