I was talking to Rob last night on twitter about the best way to construct a rounded text box for my portfolio design.

 

Rob suggested that I just use CSS3, which I argued with the fact that IE doesn't support it so would mean a large proportion of the web users would not be able to view my site correctly.

 

I was going to use jQuery to construct them, but this means that people who have disabled javascript would not be able to see properly.

 

Third way was to use three divs. A top div which contains the top two rounded corners. A middle div containing the body of the text, which can be expanded. And a bottom div containing the bottom two rounded corners.

 

Which method would you choose to create an expandble rounded corner text box? One of these, or a different method?

i have used css3 on one clients website, (their choice) but i prefer the image way.

 

3 divs, top middle bottom ...

Ah, the expandable one is where it gets a little difficult, by expandable do you mean that it expands both horizontally and vertically?

 

Let me know, because I have the exact solution for you I think (I'm subscribed to the topic).

Twitter and it's 140 characters is a bit crap for explaining things.

 

Basically the main issue here is do you want 100% of your users to see rounded corners? You'll find, especially for a portfolio website that IE users aren't always in the majority. Do you know the proportion of people visiting your site who'll be using IE? You can find that out with Google Analytics.

 

CSS3 is still the preferred option for me. Just because IE doesn't support it won't mean people in IE will get a **** version of the site. All it would mean is that your nice and clean CSS3 and one HTML tag would degrade from rounded corners in FireFox and modern browsers, to square borders in IE automatically. This is a big plus of using a method that doesn't require adding superfluous tags to the HTML to achieve design. HTML tags should only be used for structure and content.

 

The other option is jQuery, which could add the extra HTML tags and images without dirtying the source code. Like you said: this option would only work with JavaScript turned on, but the vast majority of people have this on anyway. I wouldn't worry about people without it turned on because they wouldn't be able to use half the websites on the net!

 

I would stay clear of option 3 like the plague. It's a bad precedent to set and leads into the realms of hacking source code to please a single browser. You'll be using a lot more than 3 tags if you want it to expand both ways and then your CSS will have a whole bunch of multi-lined rules. Why bother when you can do everything you ask with 1 single line of CSS (well, a couple maybe)?

 

Overall I think you go with CSS3 (one line of code!!!) which is supported by the majority of browsers out there and make sure IE degrades nicely to square borders. You should stop trying to please 100% of your users (welcome to the world of web design) and concentrate on damage limitation and graceful degradation. Trying to make new features like this work in IE is time-consuming and ultimately pointless. Why would you want to dirty the code and give people with modern browsers a lesser experience just to please IE? This is one of many of the reasons why IE is a thorn in our side.

 

The decision is up to you but I won't talk to you next year if you use jQuery or multiple divs. Just saying…

Ah, the expandable one is where it gets a little difficult, by expandable do you mean that it expands both horizontally and vertically?

 

Let me know, because I have the exact solution for you I think (I'm subscribed to the topic).

 

Just vertically for now

 

The decision is up to you but I won't talk to you next year if you use jQuery or multiple divs. Just saying…

 

 

And Rob... I def won't use CSS3 then

Charming! Do you still want that hosting?

Just vertically for now

 

 

And Rob... I def won't use CSS3 then

 

If it's just vertically then that's easy peasy, just use the three div method, annoying I know but worth it definitely:

 

 #top, #bottom {
   width:blahpx;
   height:blahpx;
 }

 #top {
   background:url(images/top.png) top left no-repeat;
 }

 #bottom {
   background:url(images/bottom.png) top left no-repeat;
 }

 #content {
   width:blahpx;
   min-height:blahpx;
 }

 <div id="top"></div>
 <div id="content">

 </div>
 <div id="bottom"></div>

 

Easy

 

ps, wtf is with the syntaxing in that?

Charming! Do you still want that hosting?

 

Yes Sir Rob!

 

Thanks Traxor, thats what I had in mind for my three div idea.

 

Just to make things a little more discussion, best way to do expandable both ways?

For that I guess best way would be css3 and just screw the ie users?

Give me twenty minutes, going to write it out, might as well post it on my blog too so I'll make it good.

I would stay clear of option 3 like the plague.

referring to

Third way was to use three divs. A top div which contains the top two rounded corners. A middle div containing the body of the text, which can be expanded. And a bottom div containing the bottom two rounded corners.

 

You can use just one div if you use four small corner images, floated into the four corners, then the div can expand in any direction. You have to ensure that the div has padding all round equal to the size of the corner images to stop div content from overlapping a corner image.

 

You need negative margins to pull the images into the div padding, typically like this if the div has 10px padding:-

<div style="background-color: #cccccc; padding: 10px;"> 

<!--10px corner images with float: left and float: right fit at corners.-->
<img style="float: left; padding: 0px; margin: -10px 0 0 -10px;" 
src="images/topleft10px.jpg" alt="corner image"/>
<img style="float: right; padding: 0px; margin: -10px -10px 0 0;" 
src="images/topright10px.jpg" alt="corner image"/>

<p>Main Content for text,etc.</p>

<img style="float: left; padding: 0px; margin: 0 0 -10px -10px;" 
src="images/bottomleft10px.jpg" alt="corner image"/>
<img style="float: right; padding: 0px; margin: 0 -10px -10px 0;" 
src="images/bottomright10px.jpg" alt="corner image"/>

</div>

To create a flexible rounded-corner box you need to take a slightly different approach to what you normal would do, instead of the top and bottom curves being single images, they need to be made up of two overlapping images.

 

 

 

 

 

 

 

 

 

As the box is increasing, more of the larger image will be revealed, making it seem as though the box is expanding, when it’s not, it’s just revealing. This is quite a long-winded method, so you need some additional tags for it to work properly:

 

 

 

 

 

<div id=”wrap”>

                 <div id=”outside”>

                                 <div id=”inside”>

                                                 <h1>Box Title</h1>

                                                 <p>Content</p>

                                 </div>

                 </div>

 </div>

 

 

 

The entire method requires four different images, two for the top part and two for the bottom part (the main body). The bottom images need to be the max-height of the box, because they’re creating the illusion of expansion, not actually expanding.

 

 

 

You will need the following code:

 

 

 

 

 

#wrap {

   width:20em;

   background:url(images/bottom-left.png) no-repeat left bottom;

 }



 #outside {

   background:url(images/bottom-right.png) no-repeat right bottom;

   padding:0 0 5% 0;

 }



 #inside {

   background:url(images/top-left.png) no-repeat left top;

 }



 #wrap h1 {

   background:url(images/top-right.png) no-repeat  right top;

 }



 #wrap h1, #wrap p {

   Padding:0 5%; 0 5%;

 }

 

 

referring to

 

 

You can use just one div if you use four small corner images, floated into the four corners, then the div can expand in any direction. You have to ensure that the div has padding all round equal to the size of the corner images to stop div content from overlapping a corner image.

 

That's still using at minimum 4 tags (1 div and 3 for the other corners) and a whole bunch of CSS.

Ah, my three cents. Use the picture option, but only two divs. Top div holds top picture and bottom div holds content and picture placed at the bottom of the div. Needless to say this works if you are using a solid colour with no shadow or border.

Alas you are not useing ASP.net AJAX. If you were you'd be using the Rounded Corners Extender which allows you to expand vertically and horizontally on the fly.

 

The reality is that it doesn't look very good when implemented and can pixelate. I'd use a .png with transparancy.

 

Scrub that then...

Ah, my three cents. Use the picture option, but only two divs. Top div holds top picture and bottom div holds content and picture placed at the bottom of the div. Needless to say this works if you are using a solid colour with no shadow or border.

This is how I often do it, don't want to screw over IE users just yet. I plan on moving to the CSS3 method soon though.

 

You don't necessarily need to use additional divs either, often you have a h2 or something you can use as the top of the box. Not always obviously, but where possible.

 

This method is called sliding doors by the way, in case you didn't already know.

I use the third method, because I don't know another way of doing it.

 

I can see how the third method is the most accessiblility sensible.

 

But really, if someone has javascript disabled in today's web, they should be expecting some sites not to display properly. To think otherwise would be silly, surely? So jQuery might be the best idea?

Lol... I use the CSS 3.0 method on my site.

 

If you are using IE and then you don't DESERVE to see my rounded corners... and the design looks fine without them.

 

It's a matter of choice, but no method is as nice as a couple of lines of CSS

Using CSS3 styles -moz-border-radius: 10px; and -webkit-border-radius: 10px; is fine, but what about Opera, IE and other browsers used on Macs?

 

If you are going to use images for other browsers, with additional markup, you might as well use them for Firefox and webkit engines as well and forget the CSS3 styles until IE and Opera catch up (might be a long time, I know).

 

I don't think many designers would want their page to show in IE and Opera without rounded corners if they think they are an important part of the design. Clients might think it odd that some browsers show rounded corners and not others.

It depends entirely on the purpose of the rounded corners and the target market of the website. If the corners are there as a simple enhancement to the design then I feel using CSS3 is perfect because it won't detract from the design if the corners are square in Opera and IE. If the corners are integral to the whole design then maybe you should use a different option like Canvas/SVG and not images, although I'd argue that rounded corners are never integral to a design…

 

At some point we need to start removing full support for older browsers and push the boundaries with new technologies. If we keep accommodating for browsers that don't support these features then we're going to get no where.

It's that pixel perfection thing again... there is nothing wrong at all with a website having slight differences on different platforms/ browsers - as long as it works and doesn't break.

Progressive enhancement I think's the term?

Personally I prefer not to further wreck the semantics of my markup just to put a minor graphic tweak - if the success of my sites depend on whether the corners are rounded or not for everyone then it's failed anyway!

 

I've heard it said that CSS meant separation of styling from content? (obviously that's bs when we use HTML, but I at least like to try!)

I just built a site using css for rounded corners and used this dd_roundies script for IE in a conditional comment. The only browser it doesn't work in is Opera.

 

I reckon it's worth it if you can achieve the same effect as an image.

I agree with Rob and wizely about moving forward, but I did say "IF are going to use images for other browsers" because some designers really do get upset if rounded corners don't show when they think they are an important part of the "look" of the page.

 

(It's like the difference between architects and builders, one really only considers the looks while the other is more concerned with how he is going to build what the architect wants.)