CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

resizable rounded square via CSS or tables?

Discuss resizable rounded square via CSS or tables? in the CSS Help forum on Dev Shed.
resizable rounded square via CSS or tables? Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old August 23rd, 2003, 08:02 AM
prudek prudek is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2003
Posts: 7 prudek User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation 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?
Reply With Quote
  #2  
Old August 23rd, 2003, 07:44 PM
Nunzio390's Avatar
Nunzio390 Nunzio390 is offline
Insignificant Peon
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2003
Location: Tharsis Ridge (Martian lowlands)
Posts: 192 Nunzio390 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
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??
__________________
[ - Random Thoughts - | - Killer Klowns - | - Automated Jukebox - | - Composite Sketch - | - About Nunzio - ]
Reply With Quote
  #3  
Old August 23rd, 2003, 08:06 PM
fgeller's Avatar
fgeller fgeller is offline
:(){ :|:&};:
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2003
Location: Germany
Posts: 297 fgeller User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 h 4 m 52 sec
Reputation Power: 5
Send a message via ICQ to fgeller
Well you should at least post your code and how you detect the changes.
__________________
regards >_<

ws. fgeller.de
em. felix@fgeller.de
Reply With Quote
  #4  
Old August 24th, 2003, 05:49 AM
prudek prudek is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2003
Posts: 7 prudek User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Permission granted
I made a mistake that prevented you from accessing the URLs. I am terribly sorry. It is fixed now.
Reply With Quote
  #5  
Old August 24th, 2003, 05:53 AM
prudek prudek is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2003
Posts: 7 prudek User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation 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.
Reply With Quote
  #6  
Old August 24th, 2003, 08:01 AM
Winters Winters is offline
Bad Coder
Dev Shed Intermediate (1500 - 1999 posts)
  
Join Date: Jul 2003
Posts: 1,742 Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 1 Week 5 Days 10 h 57 m 14 sec
Reputation Power: 171
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>
Reply With Quote
  #7  
Old August 24th, 2003, 01:15 PM
prudek prudek is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2003
Posts: 7 prudek User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation 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?
Reply With Quote
  #8  
Old August 24th, 2003, 07:43 PM
Winters Winters is offline
Bad Coder
Dev Shed Intermediate (1500 - 1999 posts)
  
Join Date: Jul 2003
Posts: 1,742 Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 1 Week 5 Days 10 h 57 m 14 sec
Reputation Power: 171
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.
Reply With Quote
  #9  
Old August 25th, 2003, 09:13 AM
prudek prudek is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2003
Posts: 7 prudek User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation 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!
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > resizable rounded square via CSS or tables?

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway.