Results 1 to 8 of 8

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

  1. #1
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.
    Last edited by Phoenix409; 07-07-2010 at 02:34 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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).
    DD Admin

  3. #3
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
          <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.
    DD Admin

  6. #6
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by Phoenix409 View Post
    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:
    HTML Code:
    <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.

  7. #7
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!!!

  8. #8
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •