No replies
Darko74
Darko74's picture
Offline
newbie
Spain
Last seen: 2 years 19 weeks ago
Spain
Timezone: GMT+1
Joined: 2010-02-10
Posts: 7
Points: 11

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.