Page 1 of 1

rounded corners

Posted: Tue Aug 15, 2006 8:27 pm
by s.dot
Bahhh sorry to keep posting about CSS. It's just becoming really tricky for me. Like learning Spanish. I failed Spanish class.

Aha. Anyways, is using JavaScript for rounded corners an acceptable solution? Some of the nicest codes I've seen made use of a JS function or two.

I don't like using images.. that gets tricky.

Are there any non-image, non-javascript solutions?

Posted: Tue Aug 15, 2006 8:35 pm
by feyd
There are a few solutions involving purely CSS, but IE won't do them. Mozilla has their own rounded corners extension.. CSS3 has rounded corners in the spec, I think.

Found this, seems interesting: http://css-discuss.incutio.com/?page=RoundedCorners

Posted: Tue Aug 15, 2006 9:23 pm
by RobertGonzalez
Try a list apart. They a bunch of rounded corner tutorials. So does sitepoint. Few do not involve images or JS though.

Posted: Tue Aug 15, 2006 10:14 pm
by alex.barylski
Just tried some the other day:

http://www.html.it/articoli/nifty/index.html worked well and didn't use images...

Posted: Wed Aug 16, 2006 12:53 am
by nickvd
I've used nifty corners in the past, I loved the flexibility of being able to generate almost any corner style you can think of, but I just couldn't get past the "flicker" of the un-styled content while the javascript is going about it's work. (granted, I am only using a p3 933 at the office)

I've been searching for the be-all, end-all rounded corner solution for a loooong time now... I've gotten to the point where, I'd rather suffer the humiliation of using tables* in my pages then deal with 8+ useless div's, or 10kb worth of cross browser css hacks... A simple 3x3 table is all that's needed for a rounded content box

Code: Select all

<table><tr><td class='tl'></td><td class='tm'></td><td class='tr'></td></tr>
<tr><td class='ls'></td><td class='cnt'>
Content Goes here...
</td><td class='rs'></td></tr>
<tr><td class='bl'></td><td class='bm'></td><td class='br'></td></tr></table>
The css for this approach is 100% cross browser and usually less than a quarter of the css required for css/image based solutions.

The markup is ugly, I agree, however for the ease of implementation/maintanance (use a small php function to spit out the box if you are using alot of them) I personally feel that it's worth the trade off, 'instant' loading, cross-browser, and (afaik) accessible.

*: strictly for rounded corners, the rest of the page is css, except for pixel sensitive, graphical layouts

Posted: Wed Aug 16, 2006 1:31 am
by matthijs
nickvd wrote:The markup is ugly, I agree, however for the ease of implementation/maintanance..
I would have to disagree here. Ease of implementation/maintanance? Looking at all that code already gets a headache coming... And that for every box on a page? What if you decide to change the design next year?

I know this is purely personal and very subjective, but I can't understand how people find table's easy. It makes the code so messy and hard to follow. Only when stricty necessary (displaying some tabular data) will I use a table.

And anyone who wants to know how it is for a blind user to surf different webpages (and dealing with meaningless tables or bad code for example) must check out the impressive presentation of Darren Fittler at webstock06.

For most rounded corners the code is already present in the existing HTML. Like <div id="menu"><h2>Header</h2>... In a fixed width site those 2 are enough for every round corner you imagine. In flexible layouts, well you'll have to be a bit more creative. Maybe, maybe add one - nonsemantic- div or span in the box.

Posted: Wed Aug 16, 2006 3:19 pm
by nickvd
matthijs wrote:
nickvd wrote:The markup is ugly, I agree, however for the ease of implementation/maintanance..
I would have to disagree here. Ease of implementation/maintanance? Looking at all that code already gets a headache coming... And that for every box on a page? What if you decide to change the design next year?

I know this is purely personal and very subjective, but I can't understand how people find table's easy. It makes the code so messy and hard to follow. Only when stricty necessary (displaying some tabular data) will I use a table.

And anyone who wants to know how it is for a blind user to surf different webpages (and dealing with meaningless tables or bad code for example) must check out the impressive presentation of Darren Fittler at webstock06.

For most rounded corners the code is already present in the existing HTML. Like <div id="menu"><h2>Header</h2>... In a fixed width site those 2 are enough for every round corner you imagine. In flexible layouts, well you'll have to be a bit more creative. Maybe, maybe add one - nonsemantic- div or span in the box.
Please don't misunderstand me, I am in 100% agreement with you. I recommend against rounded corners all the time, but some clients just refuse to listen and demand them, so I feel that using a single, perhaps two tables strictly for rounded corners is much easier than fussing with any and all the other techniques out there. I just got finished on a sample layout for a client: ( http://imfinancial.net/test/rentorbuy.html valid xhtml1.0 strict, valid css) Perhaps it's just me, but having two (and only two) small tables to make life easier is worth it, and not hard to comprehend at all.

As for updating the layout a year later, Show me any rounded corner technique that wouldnt require any extra work that the table method wouldnt take (either remove the table to get rid of the rounded corners [you could even just remove the css to get rid of the images] or alter the image(s) to change the look of the box, no markup/css needs to be changed)

Code: Select all

   .contBox {border-collapse:collapse;width: 100%;}
   .contBox .tl    {background: url(../images/tl.png) no-repeat;}
   .contBox .tr    {background: url(../images/tr.png) no-repeat;}
   .contBox .bl    {background: url(../images/bl.png) no-repeat;}
   .contBox .br    {background: url(../images/br.png) no-repeat;}
   .contBox .left  {background: url(../images/left.png) repeat-y;}
   .contBox .right {background: url(../images/right.png) repeat-y;}
   .contBox .top   {background: url(../images/top.png) repeat-x;}
   .contBox .bot   {background: url(../images/bot.png) repeat-x;}
   .contBox .tl, .contBox .tr, .contBox .bl, .contBox .br {width: 25px;height:25px;}
   .contBox .tl, .contBox .bl, .contBox .left {width:23px;}
   .contBox .boxCont {background: #ECECEC;color:black;}
I watched about 30 minutes of that accessibility video before i had to get some sleep, the rest should have downloaded by now and i fully intend to watch it, what little i saw was very very eye opening.

Posted: Wed Aug 16, 2006 5:10 pm
by matt1019
Hi All!!

My first post in Client Side (i think)

hmmm... one of the tool kits I saw on the net had this feature....

I believe they were:
Rico &
dojo

I like Rico verymuch by the way ;)

Hope this helps ya Scottayy

-Matt

Posted: Thu Aug 17, 2006 1:25 am
by matthijs
Please don't misunderstand me, I am in 100% agreement with you. I recommend against rounded corners all the time, but some clients just refuse to listen and demand them, so I feel that using a single, perhaps two tables strictly for rounded corners is much easier than fussing with any and all the other techniques out there.
I think we have to seperate the two things: the use of rounded corners is one, the technique to make them another.

I don't have anything against rounded corners and hope I didn't make that impression. But that's a question for another thread in the graphics section.

The point I tried to make is the technique. The html/css. Take your example page. I can completely remove the tables you used for the rounded corners. They are not necessary. Only thing what's needed in you example: 2 images, 2 rules in your css. That's it.

Look at your code. How many "hooks" do you have to "attach" your corners to, after removing the tables:

Code: Select all

<div id="menu">
<h1>.: Navigation :.</h1>
<ul id="navlist">
<li>...</li>
...
</ul>
</div>
That's 3 hooks. You only need 2 because you used a fixed width layout, so pick the ones you want.

Code: Select all

#menu {
background: #fff url(images/bigroundedcornerboxforthebottomandmiddlepart.gif) no-repeat bottom left;
padding-bottom:10px;
}
#menu h1 {
background: transparent url(images/smallroundedcornerboxforthetoppart.gif) no-repeat top left;
padding-top:10px;
}
Isn't this much easier? No tables littered in your code. When it's time to replace those corners with something else, just change the 2 images or the rules in the css. You don't have to change the html on all your pages. So, depending on the way you have build your site, that's a change only in 1 css file and/or 2 images instead of tens or hundreds of html pages. And cleaner, more accessible code.

Posted: Thu Aug 17, 2006 9:15 am
by sansoo
I like the solution using css for round corners you have there. But thats only going to work in a fixed width scenario.

And i agree for the most part about not using tables in your designs at all. I use them more than i should probably, but its only for sctructuring forms and there output in a nice superclean fashion. I know this can be done in CSS but i get lazy sometimes and just keep recyclying one of the form templates i built long ago.

But on the rounded corners subject again. For a fluid design are you not right back to the arguement at hand? Until we can start through vector based images around on the web or MS pulls its head out of its ass we are limited to very vew options for Rounded corners.

I must say i liked the Table idea better than four small corner images i have to keep track of and place properly with css.

Posted: Thu Aug 17, 2006 10:43 am
by matthijs
For a fluid scenario you need 1 more hook. So at most that means 1 useless div or span somewere. Fluid layouts may create other challenges (IE, box-models, floats, etc) so maybe that extra hook is already there for other reasons.

We can argue about this forever, but it's just that I would personally never sacrifice the quality of my code/website because something is a bit difficult to implement. Certainly not for a client's website.

Posted: Thu Aug 17, 2006 11:37 am
by Benjamin
I just had to make rounded corners on a box that has a gradient background and a variable height and width... that was a pain :evil:

Posted: Thu Aug 17, 2006 12:03 pm
by matthijs
astions wrote:I just had to make rounded corners on a box that has a gradient background and a variable height and width... that was a pain :evil:
Sorry to hear that. Are you ok now? :)

In a situation like that I might use one image for both corners and gradient background. The image is somewhat bigger in filesize, but downloading one background image (which is cached) is faster then a few smaller ones. Of course, again, in a fluid box this will be more difficult.

Posted: Thu Aug 17, 2006 12:12 pm
by Benjamin
Ya much better now