Avatar of Neil Thompson
Neil Thompson
Flag for United Kingdom of Great Britain and Northern Ireland asked on

resizable box with curved edges using css and divs

Hi

I need to be able to make a 3x3 box with curved edged (apx 4px curve) to make header tables etc but using <div>s not tables like I have to below but with no cell padding or spacing.

The boxes must be able to resize where the text may grow and shrink in the centre box and I would like the CSS and DIV layout please if you can help.

The images are all live if you need to download them at the URLs in the code.

Many thanks
Neil

<table class="atoz-table">
  <tr class="bg-light-green">
    <td><img src="http://www.shepway.gov.uk/images/box/tl_s.gif" width="8" height="4" alt=""></td>
    <td background="http://www.shepway.gov.uk/images/box/t_s.gif"></td>
    <td><img src="http://www.shepway.gov.uk/images/box/tr_s.gif" width="8" height="4" alt=""></td>
  </tr>
  <tr class="bg-light-green">
    <td background="http://www.shepway.gov.uk/images/box/l_s.gif"></td>
    <td class="text_button"><A
      href="#"><span class="atoz">A</span></A></td>
    <td background="http://www.shepway.gov.uk/images/box/r_s.gif"></td>
  </tr>
  <tr class="bg-light-green">
    <td><img src="http://www.shepway.gov.uk/images/box/bl_s.gif" width="8" height="4" alt=""></td>
    <td background="http://www.shepway.gov.uk/images/box/b_s.gif"></td>
    <td><img src="http://www.shepway.gov.uk/images/box/br_s.gif" width="8" height="4" alt=""></td>
  </tr>
</table>

CSS

Avatar of undefined
Last Comment
GrandSchtroumpf

8/22/2022 - Mon
VirusMinus

are they going to be a fixed height? or they can grow horizontally and vertically?
Neil Thompson

ASKER
Preferably grow top, left, right and bottom

all corners can be fixed at 4x8 pixels
VirusMinus

Here you go. http://kalsey.com/2003/07/rounded_corners_in_css/

just make 4 images with your rounded borders :)
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
SOLUTION
VirusMinus

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
VirusMinus

Very bad??

semantically incorrect is ok... but mixing content and separation for ease of use is sin?
Neil Thompson

ASKER
Many thanks for your help, I've picked up some great code from the posts but GrandSchtroumpf's reply was exactly what I was after.

Thanks for your help

Neil
GrandSchtroumpf

> semantically incorrect is ok... but mixing content and separation for ease of use is sin?
Yes, mixing content and presentation is a sin.

Semantically incorrect code is necessary for rounded corners in IE6.
That semantically incorrect code can be generated using javascript, like in "nifty-corners"...  IMHO, it does not make much difference.  The result after the javascript execution is still incorrect code.  The best option is to use the least-bad semantically incorrect code (nested divs is one of them).

If you add presentational images to the html, you have both semantically incorrect code AND bad content/presentation separation, which is much worse.


The other links you posted are more-or-less fine...

"Spiffy Corners" uses javascript like nifty-corners... i don't really see the point, but at least the code is clean when you disable javascript.

"A list appart" tries to find some kind of artificial semantically semi-correct html structure that provides enough anchors for the background images...  it's still not semantically perfect and will only work for a specific structure, but at least it's a good attempt at making the code a little better.

W3C has a css2 example that uses semantically correct html, but that won't work in IE6:  http://www.w3.org/Style/Examples/007/roundshadow.html

The only one that has it all wrong is http://kalsey.com/2003/07/rounded_corners_in_css/.  Even the title of that page is wrong, it's not "in css", it's "in css AND HTML".  It's pretty much the same idea than what you can find in the W3C example except that it ruins it all by including 2 images and 2 unnecessary divs in the html.  This page is a perfect example of the kind of misleading junk that you can find on the web and that somehow gets promoted.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.