luismartin - 8:59 pm on Dec 1, 2011 (gmt 0)

I'm coding an accordion with Javascript, but I'm having a problem with CSS in Chrome.

This is a collapsed tab in the accordion:

<div class="tab">

<div class="tab-button" style="cursor: pointer;">
<span>2011</span>
</div>

<div class="tab-content" style="width: 0px; opacity: 0;">
.... // content with a fixed width of 400px
</div>

</div>

I've checked with Firebug that in Firefox the container div (div.tab) has the width of div.tab-button, since div.tab-content has zero width and no opacity.

However this doesn't happen in Chrome. The width of div.tab keeps having the internal width (400px) despite the width and opacity of div.tab-content are forced to zero.

What could I do to fix this? I tried by adding visibility:hidden too, but no way.

Any help would be appreciated.