Comments on: curved borders, with valid CSS and unobtrusive javascript

By: Kae Verens

Kae Verens — Fri, 02 Mar 2007 15:53:48 +0000

I’ll have a look at this over the weekend. I haven’t actually looked at the source in months, so can’t answer your question immediately.

By: bobacronius

bobacronius — Fri, 02 Mar 2007 14:53:20 +0000

Hey, first of all, wonderful script! I have used many a rounded corners solution, but this one does exactly what I want, which is allow me to use CSS3. That’s good news for when browsers finally start supporting the spec, because then I don’t have update stylesheets!

Anyway, I did find one little issue. If you assign a border radius to the top left corner and to the bottom right corner only, the bottom right corner will round, but not render the border color. Sound weird? I noticed that it wouldn’t do this for any other combination, just top left and bottom right. Here’s my css:

#box
{
position: absolute;
top: 100px;
left: 500px;
height: 200px;
width: 500px;
padding: 10px;
background: #0f0;
border: 2px solid #aaa;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}

Let me know what you think. I noticed it did this in Firefox, IE7, and Opera. Did not test in IE6 or Konqueror.

By: Zachary Canario

Zachary Canario — Wed, 21 Feb 2007 06:35:22 +0000

I used ur code because the border radius doesnt work in ie. Well When using the code I tested it in ie and the page loads the its looks like it loads again and then all I see is my background. Same in firefox.
I use loose xhtml for all my scripts.
If u have any clue why all my content dispears when the page finishes loading. That would be great.

Thanx
Zach

By: Potato Bob

Potato Bob — Tue, 13 Jun 2006 03:05:37 +0000

Hmm nice script, but it tends to refresh a page about 1 sec ~ after it loads, so its quite annoying and it messes up my css to where the height and width values are considered invalid… so most of my page is not positioned correctly…

By: Kae Verens

Kae Verens — Wed, 15 Mar 2006 12:34:17 +0000

Dave, could you put an example of your CSS online, please? the code does not seem to contain anything which would restrict you from using hyphens.

Also – that snippet of code has been truncated at the < symbol – write the symbol as <, and it will show up properly.

Kae

By: Dave Seleno

Dave Seleno — Tue, 14 Mar 2006 19:41:56 +0000

Woops, forgot to mention I had to add the following two lines, even when not using class names with “-” in them. I only tested IE6, btw. Let me know if you want the small stylesheet I’m using.

function drawRect_generic(el,x,y,w,h,bc,bi,op){
…
if (h

By: Dave Seleno

Dave Seleno — Tue, 14 Mar 2006 19:31:37 +0000

Hi Kae,

Thank you for the work you have done on this. I like how unobtrusive it is.

I have discovered that using CSS class names with “-” in them breaks everything. I was able to grok most of the code in border.js, but the regex made my brain hurt. Gotta love regex; solves one problem by creating another. Anyways, could you please update your library to handle class names with “-” ?

By: Richard

Richard — Fri, 03 Feb 2006 18:14:01 +0000

Hi Kae,

First of all I must thank you, but the internet explorer error persists.

Line: 65
Character: 3
Error: ‘parts.1′ is null or not an object
Code: 0

But it works now on Firefox again. I will upload the new borders.js on that address so you can check everything up.

By: Kae Verens

Kae Verens — Fri, 03 Feb 2006 08:10:57 +0000

Richard. Thanks – I found the bug with no problem. My script couldn’t handle the comment tags in your style section. Fixed now. Please download the new borders.js and test again. I do not have Internet Explorer on this machine (all my home boxes run on Linux), but I think it should work – works in Firefox anyway

By: Richard

Richard — Thu, 02 Feb 2006 16:52:52 +0000

Hi Kae,

Now it seems to crash in Firefox too, and still do not work with IE. See it at:

http://www.fabrim.com.br/richard_temp/curved/

PS: it’s brazilian portuguese encoded, so it might look strange