[prudek]

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?

[Nunzio390]

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

[fgeller]

Well you should at least post your code and how you detect the changes.

[prudek]

I made a mistake that prevented you from accessing the URLs. I am terribly sorry. It is fixed now.

[prudek]

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.

[Winters]

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

[prudek]

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?

[Winters]

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:

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

[prudek]

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!