#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    7
    Rep Power
    0

    resizable rounded square via CSS or tables?


    I would like to create a resizable rounded square, or bubble, with text.

    See the image of this idea at http://www.spoxdesign.com/test1/bubble_test.gif

    When user changes text size, the bubble should enlarge or shrink as neccessary.

    Therefore I sliced corners from the bubble image and took samples of each of the four edges. These would be arranged in a table 3x3 and the text would be in the middle cell.

    First I tried CSS but soon run into problems. Then I used tables, as you can see at http://www.spoxdesign.com/test1/bubble.html

    - MSIE 6: works fine
    - Mozilla 1.4, Firebird 0.6.1: ugly white lines and black line in the top row
    - Konqueror: works fine but the bubble is twice as wide as in MSIE.

    - Is this a browser error? Is MSIE in the right?
    - Should I give up on tables for this?
    - How can I achieve this in CSS?
  2. #2
  3. Insignificant Peon
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Tharsis Ridge (Martian lowlands)
    Posts
    194
    Rep Power
    12
    How can you expect anyone to help if you have posted 2 URLs that require login info with username and password, and have supplied neither??
  4. #3
  5. :(){ :|:&};:
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    Germany
    Posts
    297
    Rep Power
    11
    Well you should at least post your code and how you detect the changes.
    regards >_<

    ws. fgeller.de
    em. felix@fgeller.de
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    7
    Rep Power
    0

    Permission granted


    I made a mistake that prevented you from accessing the URLs. I am terribly sorry. It is fixed now.
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    7
    Rep Power
    0
    Clarification regarding Konqueror behaviour:

    Initially, the bubble is displayed correctly. When you enlarge font size, the bubble grows correctly.
    When you THEN downsize the font, bubble does not shrink horizontally at all.
  10. #6
  11. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2791
    Code:
    <table cellpadding=0 cellspacing=0>
     <tr height=50>
      <td bgcolor=red width=50></td>
      <td bgcolor=blue></td>
      <td bgcolor=red width=50></td>
     </tr>
     <tr>
      <td width=50 bgcolor=blue></td>
      <td><li>Testing<li>Testing<li>Testing<li>Testing<li>Testing<li>Testing<li>Testing</td>
      <td width=50 bgcolor=blue></td>
     </tr>
     <tr height=50>
      <td bgcolor=red width=50></td>
      <td bgcolor=blue></td>
      <td bgcolor=red width=50></td>
     </tr>
    </table>
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    7
    Rep Power
    0
    Thank you very much indeed, PHP-Newb!

    It is much better now. I took your code and put in my sliced images and the result at http://www.spoxdesign.com/test1/bubble2.html works fine in both MSIE and Mozilla.

    There is still a problem in Konqueror, though. The bottom line is not displayed at all... unless I insert a nonbreaking space in the bottom table row. But when I do, then the display is broken in Mozilla and MSIE.

    Is this a Konqueror fault?
  14. #8
  15. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2791
    In your code, you have not specified height in the rows, and so, some browsers will default to 0 height/width.

    They key is to specify exact width/height for fixed image sizes, such as the corners and sides.

    You want the corners to be fixed width and height. You want the top and bottom sides to have fixed height. You want the left and right sides to have fixed width.

    This way, you are not specifying any width or height for the center column.

    Unfortunately, after looking at your images, I see that they vary in sizes. If I might suggest, make the four corners, this size: 40x40. The vertical sides, this size: 40x1 and the horizontal sides, this size: 1x40.

    Then use this code:

    Code:
    <table cellpadding=0 cellspacing=0>
     <tr height=40>
      <td background=bubble_corner_topleft.gif width=40></td>
      <td background=bubble_side_top.gif></td>
      <td background=bubble_corner_topright.gif width=40></td>
     </tr>
     <tr>
      <td background=bubble_side_left.gif width=40></td>
      <td><li>Testing<li>Testing<li>Testing<li>Testing<li>Testing<li>Testing<li>Testing</td>
      <td background=bubble_side_right.gif width=40></td>
     </tr>
     <tr height=40>
      <td background=bubble_corner_bottomleft.gif width=40></td>
      <td background=bubble_side_bottom.gif></td>
      <td background=bubble_corner_bottomright.gif width=40></td>
     </tr>
    </table>
    Visual explanation:

    I think that this will solve your problem.
  16. #9
  17. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    7
    Rep Power
    0
    Yes, you have indeed solved my problem.

    I should have thought about this solution myself. But I was somehow stuck it the vicious cycle of blaming the browser incompatibilities instead of me.

    Thank you very much for you help, PHP-Newb!

IMN logo majestic logo threadwatch logo seochat tools logo