problem with Animated Collapsible DIV v2.4 on chrome[resolved]

[Phoenix409]

1) Script Title:
Animated Collapsible DIV v2.4
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...edcollapse.htm
3) Describe problem:
the text overlaps over the pictures in google chrome(the group of pictures). in other browsers it works fine.
can be seen here:
http://www2.technion.ac.il/~ab359/inframe/about_us.html

hope someone can help me.

[ddadmin]

This looks like a CSS layout issue- the width of each of your DIV columns aren't wide enough to contain the textual descriptions. In some browsers, the browser will automatically stretch the DIV further to fit the text, but in Chrome, that doesn't seem to be the case. I would simply experiment with widening the width of your DIVs, and if possible, remove the table from the equation altogether. You don't need tables to recreate the exact layout you have now, just floating DIVs (CSS float:left).

[Phoenix409]

how can i recreate this without using the table?
and i've tried the float. it doesn't work.
seems like the only option is expending the width, which is a compromise.

[Phoenix409]

is there a script to perform the stretch thing in chrome?

[ddadmin]

I tried a few things, but couldn't quite get it to work perfectly in Chrome. This is a layout issue, so there's no script that will just magically resolve it. The problem is that the numbers for your various TD, DIV, and "table_images" table just don't add up, forcing each browser to use its own discretion in figuring out how to display the contents within it, resulting in the issue you're seeing. For example, your "table_images" table is set to 664px:

      <table class="table_images" align="center" border="0" 
cellpadding="2" width="664">

That in itself can't be right when you add up the necessary widths of the 5 columns within it.

[traq]

how can i recreate this without using the table?
and i've tried the float. it doesn't work...

it does, but this might be more what you're looking for:

<div style="width: 180px; display: inline-block;">
   <div style="text-align: center;">
      <img src="about_us_html/thumb/IMG_0736t.jpg" alt="" width="86" height="130" />
      <br /> 
      <a href="javascript:animatedcollapse.toggle('michael')">Michael Shklyar</a>
   </div>            
   <div id="michael" style="width: 180px; display:none; text-align: left; margin: 0;">
      <p>B.Sc student in physics at the Technion - Israel institute of technology</p> 
      <p>Control and data processing software development of ESR microscopy.<br /></p> 
      <p style="text-align: right;">
         <a href="mailto:smishash@t2.technion.ac.il">
            <img src="mail.png" border="0" alt="mail me"/>
         </a>&nbsp;&nbsp;
         <a href="javascript:animatedcollapse.hide('michael')">
            <img src="arrow_up.png" border="0" alt="close"/>
         </a>
      </p> 
   </div>
</div> 

The outer div with display: inline-block; is the big thing. There are some other changes, too, that help smooth out the layout (e.g., align="" is depreciated; you shouldn't use it). There may also be margin and/or padding problems when you have an inner div with the same static width as its parent.

This defines the content blocks (what you're using table cells for) and lets them line up as they fit. If the screen (or container) is wide enough, they'll line up in a single line, otherwise, they'll make multiple rows. There is a little bit of work to make sure this is cross-browser compatible, though.

[Phoenix409]

yay!!! i solved it! as traq suggested i used "inline-block" but it made spaces, so i tried just "inline" and it worked!!
thank you so much!!!

[traq]

glad I could help. you should update this thread title to "Resolved".