Hi, the name's Steffen and I'm writing about the Web, programming
and all those things coming to my mind. Enjoy your stay.RUZEE.Borders has been replaced by RUZEE.ShadedBorder (which is currently in beta test - try it!).
RUZEE.Borders, formerly known as RuzeeBorders, is the first and only JavaScript library for rendering shadows and anti-aliased rounded corners inside a web browser without the designer needing to create background images. You can easily include it into your web site/blog etc. with only minor knowledge about JavaScript.
Features
- Border style definition via CSS and CSS-like JavaScript
- Anti-aliased rounded corners similar to the successors of Nifty Corners
- A symmetric shadow similar to the ones of Mac OS X
- Configurable border widths
- Outside as well as inside background image support (gradients)
- A kind of glow which is based on the shadow feature with a configurable color
- A fade effect which lets the border color fade into the background color
- All that at every edge/corner or only at some of them
- Works on all modern browsers, even Opera and Konqueror
- Colors and layout of the borders are defined in the CSS - if JavaScript is disabled your web site looks like its cubistic twin
Supported Browsers
These are the browser I’m testing my releases with (and others may work as well):
- Internet Explorer 6.0
- Firefox 1.5
- Safari 2
- Opera 9
- KDE Konqueror 3.5
Usage
When rendering borders, CSS is used for all border style settings that can be definied via standard means. These are: border-width, border-color, etc. Here’s an example CSS fragment:
#myborder {
border: 2px solid red;
background: blue;
padding: 10px;
}
If you have an HTML element with the ID ‘myborder’ in your HTML document, it will show up blue with a 3px wide, red solid border. This is the standard CSS way and works without RUZEE.Borders (of course ;-)). Make sure to always apply some padding, because RUZEE.Borders will “eat” some of it!
All style settings that are not available in the current CSS standard, i.e. everything that RUZEE.Borders need to round, shadow, glow, etc., have to be set via a CSS-like JavaScript code fragment in your page. Check out the tutorial or the example HTML file for details on how to do that (included in the download ZIP file). For now, have a look at the following examples - the borders you see are rendered by the definition inside - the value before the colon is a CSS selector, the values after it the style settings.
Draw a simple border with the corner radius of 4 pixels around the HTML element with the ID ‘rbex1′:
Draw a glowing border with an edge radius of 4 pixels and a blueish glow that has a width of 5 pixels around the elements with the ID ‘rbex2′:
Draw a border with a corner radius of 4 pixels and a shadow with the width of 5 pixels around the element with the ID ‘rbex3′:
Draw a border with a corner radius of 8 pixels that fades out to the color of the background around the element with the ID ‘rbex4′:
Draw a simple border, but round only the left/right bottom (’l'=left, ‘r’=right, ‘b’=bottom):
Draw a simple border, but round only the left on bottom/top bottom (’l'=left, ‘t’=top, ‘b’=bottom):
Draw a simple border, but round only the top left corner (’l'=left, ‘t’=top):
All borders can have a background image inside. It will be aligned to the top and can only be drawn inside the upper border. But together with repeat-x, this limitation isn’t as bad as it seems - it’s perfect for all those nifty Web 2.0 style gradients ;-). This example shows, that the image is really in the top of the border - clear gradients are possible this way.
Simple borders can be put on top of a background image using pseudo-transparency. I’ve decided to not use the CSS3 opacity or similar techniques due to the reasons described here, which means that you have to set a background color “similar” to the color of your background image:
As you can see, you do not need to specify any color values at all for the border, background, etc. only for the glow where there is no CSS style value that could be “misused” for that issue…
In the examples above, only ID based CSS selectors were used. The library included supports all the things you know from CSS and more (have a look at the credits section).
Download
Feel free to download RUZEE.Borders v0.16.1. The license is included in the archive, it’s MIT-style. Have fun playing around with the lib and if you have any suggestions, bug fixes, etc. please comment at the end of this page.
Credits
For the CSS-like selection of DOM elements, I’m using a CSS level 2 customized version of Dean Edwards’ cssQuery, thanks for this cool piece of code!
I’m also using a JavaScript CSS color converter that I stripped down to my requirements - cheers go to Stoyan Stefanov for that.
Tips and Tricks
To speed up the loading time of your page, especially if there are lots of images or IFRAME ads (e.g. Google), use the domload event of RUZEE.Events.
If you are using the Google Web Toolkit and want to add rounded corners to your site, check out the RUZEE.Borders based rounded corners component by Alexei Sokolov.
Internet Explorer displays a page very soon. If you want a blank page till RUZEE.Borders finished rendering, add the following lines to your page code:
CSS (hides HTML body when JavaScript is enabled):
* html body { display:expression('none'); }
HTML/body.onload():
RUZEE.Borders.render(function(){
// rendering finished, now show the body
document.body.style.display='block';
});
You can instantiate RUZEE.Borders.Border directly and call its render() method, if you know the DOM elements you want to put borders around. That’s ideal for 3rd party libs using RUZEE.Borders (e.g. GWT, hint!!! ;-)).
For “askew” corners, e.g. let only top-left and bottom-right be rounded, but the other two right angle, have a look at the Emad Workaround.
A nice design idea came from Simon - put your inner title on top of your corners.
Known Bugs and Limitations
Quirks Mode is not supported.
!!! Floated elements inside a rounded border have to be positioned relatively (i.e. style=”float:left; position:relative;”) !!! Not doing so will mess up Internet Explorer’s rendering completely (The Peekaboo Bug is responsible for that).
If you want a DIV with a fixed height, heights have to be specified via CSS and the height attribute of a RUZEE.Border (via RUZEE.Borders.add(...)), because the height of a DIV cannot be read from the CSS properties reliably on all browsers.
Konqueror has a bug when getting the styles for an element. RUZEE.Borders try to calculate the background color recursively until they reach an element with a non-transparent background. Konqueror unfortunately returns #000000 when the background is transparent. Hence #000000 is interpreted as transparent. If you want a black background using #010101 in your CSS is a possible workaround - assuming “almost black” is ok for you (see also my blog posting on that issue).
Version History
Check out the version history.
March 2nd, 2006 at 14:36
Great Thing and a fine release. I will test it soon!
Your complete site has changed too, how did you do this round corners??
Greets, Jens
March 2nd, 2006 at 16:30
amazing!!! Hope you have the resources to keep your site up
When did you finish it though? *After* the party??? Well then well done, superman. Cuz when I saw the blog now first thought I had, the carryover alc. is still on me vision…
congrats, what do you have in mind next?
March 2nd, 2006 at 19:02
Check out curvyCorners at: http://www.curvycorners.net. They support full anti-aliasing, border support of any width, fluid layout, resizable boxes on the fly, transparent corners with anti-aliasing on graphical backgrounds, fast.
Checkout these demos:
http://www.curvycorners.net/examples/trans-corners.html
http://www.curvycorners.net/examples/multi-boxes.html
March 6th, 2006 at 9:12
Great script, two questions - I can only get 1 pixel borders, is that normal? Is there a way to alter the shadow so it has a standard drop shadow effect? ( right and bottom )? Everything works great, much easier and more stable then the other scripts out there.
-Mike
March 6th, 2006 at 9:21
Cheers, glad to hear that :-). To your questions: The script currently only supports 1px borders - removing this limitation is planned for a next release. Same is true for the standard drop shadow, but it’s a bit more effort, since I have to change and tweak lots of the calculations.
March 7th, 2006 at 7:56
One major shortfall I see…
There is no provision for selecting elements based on CLASS, only IDs.
This is no good for my purposes. I want multiple elements on the page styled with corners and I want to indicate which they are by assigning a common class.
This is something I can do with Nifty… and surpised it’s not here.
(Won’t take much JS to do this… just that I suck at JS!)
- Alister
March 7th, 2006 at 10:52
There is support for selecting elements by class - although it is hidden a little bit. Here’s an example:
rzCrShadowBorder(4, 4).draw(rzGetElementsByClass(’myClass’));
March 14th, 2006 at 6:23
“Safari always displays the background of a border element white, e.g. a shadow always ends up in a white box - nasty.” Is this only a problem with shadow borders? How do the standard and glow borders display in Safari? Thanks.
March 15th, 2006 at 22:11
As I have no access to a Mac OS X machine (yet) I currently can’t really tell… Someone having any experience here? Btw.: I just returned from the CeBIT.
March 17th, 2006 at 8:23
I have had no problems using any of the borders with safari. This site, as well as my own seem to work fine. One thing I have noticed is that you have to provide a header for each box you want to have corners even if they use the same tag. Example;
rzCrSimpleBorder(4).draw(’label1′);
rzCrSimpleBorder(4).draw(’label2′);
rzCrSimpleBorder(4).draw(’label3′);
rzCrSimpleBorder(4).draw(’label4′);
were the label div id is the same for all four boxes, i had to replicate the tag on the CSS for each element I wanted to display on one page.
Am I doing something wrong? I noticed Steffen, looking at the source for your site, that you didn’t do that, how did you write in the JS? ( like your right side bar.)
March 17th, 2006 at 8:57
Correction, I just loaded this page in Firefox and noticed the difference and the white box’s that Safari displays. Strange that it doesn’t do it to the footer and header. I also have not run across this yet on my site. Maybe it’s an issue with the way we construct the site?
March 17th, 2006 at 21:24
mike: as for comment 10 try the class trick of comment 7. and on comment 11: what version of Firefox are you using?
March 18th, 2006 at 16:10
i’m looking at this page right now on Safari and Mike is right. The header, footer, and the example in the body above all look fine, but the boxes in the right column, and the main content box all have the white box around them
March 19th, 2006 at 7:37
I was looking at it with Firefox 1.0.1 for Mac.
The class trick worked for me just fine.
As far as the white boxes that are created on your site, it must have something to do with the javascript in your style.js sheet. I tried getting the same effect on my site and didn’t have a problem. Plus your header and footer display just fine. Unfortunately I know just enough about Javascript to stay away from it
Thanks again for the great script. Can’t wait for the next version.
March 19th, 2006 at 10:56
This script is definitely the best rounded corners solution available on the web. But there is one thing that I’d like it supports in future version - that is providing the values for the rendering function through CSS. You see, all that rounded corners thing is presentational and, as such, should be specified in CSS. So you could:
- just use the CSS3 declarations for rounded corners (see W3C)
- the script should check the user’s browser. If it mozilla, then you could use it’s vendor specific “-moz-something…” solution (just copy the values from CSS3 declarations)
- if it’s browser that supports CSS3 (afaik, IE7), then then the script doesn’t have to do anything
- if nothing from the options above is true, then the script should render corners itself
Just my suggestions, hope it’ll be useful.
Regards
Michael
March 19th, 2006 at 11:25
Michael: Nice idea. I’ll check if this won’t break compatibility. Right now I’m not sure if it’s possible to access “unknown” CSS values with todays browsers via JavaScript.
March 19th, 2006 at 19:52
Version 0.30 now has a work around for the white boxes in Safari!
March 22nd, 2006 at 10:44
Anybody who uses em’s for font-size might notice that their text is getting MEGA shrunk when using ruzeeborders.
The fix is as follows:
Replace:
if(h) { d.style.height=h; d.style.fontSize=h; }
With:
d.style.fontSize=”1em”;
if(h) { d.style.height=h; }
Hopefully this helps some people out.
March 24th, 2006 at 0:28
Hey Todd.
Cheers for that one. But this fix may break IE 5.5 compatibility - do you have a test case, i.e. some example html file/web page for testing purposes? The font size stuff is for IE 5.5 only. And I’ve never experienced font size problems on the sites I’ve tried…
Steffen
March 25th, 2006 at 20:16
Hey, Steffen,
thanks for this; came across it in my search for anti-aliased line algorithms in php!
Thought you might like to know page *does* load in Safari 1.3.2 and Mozilla 1.7.3 but takes an age in both: 50 secs of the 1 min plus to complete the curve processing.
Anytime you need heritage powerbook testing….
cheers!
Andy
March 26th, 2006 at 8:07
This looks wonderful, here. I can’t get it to work with my blog.
i included your script in my head.php but still no round corners. What is wrong?
(I even tried to include your style.js too).
March 26th, 2006 at 11:58
Joern: You need some adaptations of the style.js - well basically your own style.js which renders all classes/IDs of your page with the right border settings. Some JavaScript knowledge is currently required for that. Have a look at the example.html file included in the release.
March 30th, 2006 at 16:36
Hi, what about adding a feature to set a background-gradient? Niiiiiiiiiiiiiice script! But put in evidence the possibility to set rounded corners by class
I didn’t notice it at first and was going to abandon your site! Ciao ciao
March 30th, 2006 at 17:05
Steffen, I found another difference between Safari and Firefox/I.E.
I have a DIV that is set 0px to the right with a shadow border and no width specified. On Safari the script only makes the borders the width of the content but on Firefox and I.E. the script makes it the width of the whole page. I tried using both class and I.D. as well as different width attributes but can’t seem to get it to only box in the content.
Here is my css
#utility{
font: tahoma;
position: absolute;
top: 5px;
right: 0px;
color: #666666;
font-size: x-small;
padding-right: 10px;
background-color: #efefef;
text-align: right;
}
Here is my site: http://www.hahncommunications.com/index.php
Do you know of any why to work around this?
Thanks
-Mike
March 31st, 2006 at 15:11
Version 0.4 is out. It replaces 0.30… It includes Darios suggestion (official class support) and does no longer flip your page. Concerning mikes comment: There may be problems with absoulte positioned DIVs (or even not-static positioned). I’ll have a look on that.
April 8th, 2006 at 8:45
Hi Steffen ,
Good Job, thanks for this; I have two questions:-
1-is it possible to round some of the four corners, e.g Left upper and left lower corners only ?
2- is it possible to set the rounding radius ?
thanx
April 13th, 2006 at 0:46
Hi … Great Job!
Don’t know if this is supposed to happen, but I discovered you can set a base class to set size and corners (e.g. rzCrShadowBorder(4,3).draw(’.someclass’)) and then use an additional class to set colors, width, etc … for each instance:
.someclass { float: left; margin: 10px; padding: 0px; }
.moreclass {width: 120px; background: white; border: 5px ridge red; }
.lessclass {width: 160px; background: orange; border: 5px ridge blue; }
Number 1 in someclass
Number 2 in someclass
The advantage, I think, is that one can set a consistent look (shadow, radius) with one onLoad call and then modify each instance in whatever way you want. Works in XP - Explorer 6, Firefox 1.5, Opera 8 …
Any potential problems with this? Or, was this obvious to everyone but me in the fisrt place?
thanks!
April 13th, 2006 at 0:50
Oops …My ‘div’s’ got swallowed up (previous post). Here they are without their brackets …
div class=”someclass moreclass”>Number 1 in someclass /div
div class=”someclass lessclass”>Number 2 in someclass /div
rick
April 13th, 2006 at 23:41
Delightful script! One problem I’m having… my divs are in a container that has a background image, not a background colour, so the script is picking up the background of the div behind *that* for the space around the corners… which is not good
Unfortunately it’s a multi-coloured background so there’s no real way for me to just set a background colour that closely matches or anything.
Any ideas?
Hope you had a nice vacation!
April 14th, 2006 at 16:19
Back from Bali - it was great!
Emad: ad 1.: Planned for the next release, ad 2.: Can you explain what you mean with rounding radius? Cheers.
Rick: I like that approach - it should always work - I expect no problems. Maybe it’s possible to generalize it even more, I’ll give it some thoughts…
Stephanie: There are ways of doing it (via transparent colors), but one loses anti-alias support on some browsers. Maybe a future version will support borders over image backgrounds…
April 17th, 2006 at 18:56
Version 0.5 is out. It allows you to only draw some corners/edges. Attention: The API changed due to that! Cheers to my bro and Emad for the feedback about the lack of the feature
April 18th, 2006 at 7:58
This is the very thing I’m looking for. Thanks for great work!!
April 22nd, 2006 at 16:17
Steffen — I’m not sure what you mean by transparent colours. I’m ok with it losing antialiasing (the background image and box colours aren’t wildly different). Or do you mean that this is not possible at all with the current version? Thanks!
April 22nd, 2006 at 16:26
With the current version it’s not possible to have a background image. I’m working on that right now
- expect it for the next release.
April 24th, 2006 at 17:22
the draw method set the “display” to “block”.
how can use the method without writing more container?
April 24th, 2006 at 17:32
Salvatore: I don’t get that one… Does setting the DIV to display:block make problems? What do you mean with “writing more container”?
April 24th, 2006 at 18:38
i wish to do something similar to the tabs bar of download.com (Today on CNET - News - Reviews - Compare Prices - How-to - Downloads) using ruzeeborders.
————————————————————————————————-
Steffen, when i apply ruzeeborders to an element, it change the display property to block.
try to apply ruzeeborders to an anchor like the following example.
link 1
link 2
link 3
you can see that these element will assume the “display:block” property.
————————————————————————————————-
when i apply the ruzeeborders to an element, i cannot use the css “hover”, cause of ruzeeborders do not allow the css to change background colors.
April 24th, 2006 at 18:58
please view this example
http://www.ateicos.com/temp/rb_example.html
April 24th, 2006 at 21:14
Salvatore: from W3 CSS 2.1: “When an inline box contains a block box, the inline box (and its inline ancestors within the same line box) are broken around the block. The line boxes before the break and after the break are enclosed in anonymous boxes, and the block box becomes a sibling of those anonymous boxes.”
I have to use block DIVs inside the anchor element, so your inline DIV automatically becomes a block DIV. A workaround for you is to use left floats (”.tbt { … float:left; }” in your example). This even works without you having to modify your HTML source code (except the “clear:left;” maybe).
As for the hover background: Woa, that’s a tough problem. I currently have no idea how this can be done… The antialiasing of the corners would have to be recalculated… The text color however is modifiable. Also other font settings (bold, etc.).
Anyone else having an idea how that background hover might be possible?
April 27th, 2006 at 0:03
Version 0.6 with pseudo-transparency has been released.
May 3rd, 2006 at 13:59
Nice script! I saw you mention (a few versions back) that borders that were more than one pixel were going to implemented - has this been done yet?
If so, what is the syntax for it?
Thanks for a great script, and keep up the good work!
May 3rd, 2006 at 23:35
It is currently not supported - but it is the next feature on my list ;-). The syntax will be simple: define the border width via the corresponding CSS value.
May 5th, 2006 at 18:26
The Emad and Kevin edition of RuzeeBorders has been released. Version 0.7 supports other border widths than 1px, i.e. 2px, 3px, …
May 5th, 2006 at 19:26
Thanks! It looks really slick!
May 5th, 2006 at 19:38
Now Kevin, you were fast. Actually too fast - there is a bug in 0.7 that makes problems with border widths of 0px (and style=”border:none”). 0.7.1 fixes it - out now.
May 7th, 2006 at 16:42
Hi Steffen ,
Thanks for grate efforts, I highly appreciate your support for selecting which corners to round, but is it possible to round ‘lt’ and ‘rb’ corners using current technique?
Thanks again.
May 8th, 2006 at 23:52
Emad: Do you mean that the other corners are not rounded, so you get a DIV were only “lt” and “rb” are rounded at the same time? No that’s currently not possible. You may use a work around with two DIVs (if you don’t need a border). Do you have an example of what you want to do?
May 9th, 2006 at 14:35
Steffen: Actually yes, I want a DIV with only left-top and right-bottom corners are rounded. Look at this “http://openrico.org/rico/demos.page?demo=rico_effect_round”
Thanks.
May 9th, 2006 at 21:25
Hey Emad, yeah, that’s currently not possible… I guess I have to extend the API in order to support that (besides implementing it, of course). But there is a workaround until it will be supported “officially”. It is limited to border- and shadow-less corners but looks better than Rico ;-). Here’s the link.
May 9th, 2006 at 22:24
I am trying this javascript and it looks nice, but i have problem using it on website: here is the code http://pastebin.com/708163 [hope it survive on pastebin at last until you read it] … and i am probably stupid, but can’t figure how to do it right ): Can you please help me?
May 9th, 2006 at 22:28
Um sorry, but i forgot to post error from FF javascript console: here is it
Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMViewCSS.getComputedStyle]” nsresult: “0×80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)” location: “JS frame :: file:///C:/blog_faq/ruzeeborders.js :: rzGetStyle :: line 319″ data: no]
and examples included in zip package works fine.
May 9th, 2006 at 22:47
Hi “Lolita”. I got your example. It was a bug in rzGetStyle. Fixed with the just released version 0.7.2. I cleaned up your code a bit and added some padding, so your layout won’t shift. Thanks for the detailed fault report ;-).
May 9th, 2006 at 23:10
Btw i don’t think that was a bug, but it was my fault, because when i set background-color for body in css it work without problem …
May 9th, 2006 at 23:22
Yes and no… no background-color anywhere in the CSS/HTML means “white” with the fix I introduced in 0.7.2…
May 10th, 2006 at 20:03
Hi Steffen,
Thanks for the sample page. I am sure that your rounded is not comparable with the Rico’s one, you are the man :).
Regards,
May 10th, 2006 at 20:40
Hi Steffen, RuzeeBorders looks great! I’m trying to nudge up some text over the top of created DIVs though, & the text slides behind those DIVs on Firefox 1.5. It works on IE however. For an example, make a title in one of your panels style.position: relative, and set style.top negative. Changing z-index doesn’t seem able to get title completely in front of the DIVs created for the corners. Having a pop-up absolute positioned DIV within a panel also shows it. Any ideas? Thanks
May 11th, 2006 at 22:08
Check out the new release 0.7.3 and the Tips and Tricks section - Simon, that’s it, right?
May 12th, 2006 at 15:30
Hi Steffen! Big thanks for the new release! Works very nicely, both for the title offset & Ajax autocompletion box I have sitting in one of my panels. I’m stoked! Cheers, Simon
May 12th, 2006 at 22:36
I am having problems getting it borders to work in firefox 1.5. My code is almost exactly like this persons that posted to your blog:http://www.ruzee.com/files/lolita-ex/ –> does not work in firefox 1.5 with windows
Any ideas?
Thanks,
Nicole
May 12th, 2006 at 23:01
I figured out that I was also missing the background color on the container. This actually appears to be missing in the example. I am trying to use percentages so that I can have one style for all of my outline borders around the page with varying sizes. I found that anything under 75px works fine, however anything over cuts off part or all of the right side. Any ideas?
.RoundBoxContainer {background: #FFFFF; width: 100%; float: left; margin: 5px; }
.RoundBox { background: #FFFFF; border: solid 1px #DBDBDB; padding: 5px; }
window.onload=function(){
rzCrSimpleBorder(10).draw(’.RoundBox’);}
Number 1 in someclass
May 13th, 2006 at 11:00
Hi Nicole, I can’t reproduce the problem. I fixed the 5-F typo (#FFFFF instead of #FFFFFF or #FFF) and put your example online. Works fine in FF 1.5.0.3 running on Linux…
May 14th, 2006 at 20:57
And how to make divs to have similar style like your menu, when i try to insert div to div with ruzeeborder it have some padding or something and my inner div dont spreed to full width http://img477.imageshack.us/img477/4176/menuproblem9nt.jpg … i can poste all code if you think it’s misstake on my side and you willing to hel, but i tink it’s some workaround again … (:
BTW i still think that this script is best for rounded corners.
May 14th, 2006 at 21:04
Please have a look at the example.html in the release zip. There are the IDs onlyTop and onlyBottom - similar to that I do it on my site.
May 15th, 2006 at 8:40
Wow RuzeeBorders is Brilliant… Absolutely love it.
I would like to reiterates Steffanie’s request for allowing elements to have a background image. Typically I use a gradient behind buttons and tabbed menu’s. At the moment after they have been “curved” the background image doesn’t extend to passed the original element. The main difficulty I suppose will be setting the X,Y offset positions for the generated DIVs so that the background images all align on top of each other.
Thanks again for RuzeeBorders its great…
May 15th, 2006 at 15:17
Hi Steffen,
The code that presents the problem is the code that when I pasted into the blog was read as html, so I will put start
tr>
td width=”150px”>
div class=”RoundBoxContainer” >
div class=”RoundBox”>
Number 1 in someclass
/div>
/div>
/td>
/tr>
/table>
Thanks for your help!
Nicole
May 15th, 2006 at 16:37
Oye, It appears that my message above was interpreted as html. The goal of the code posted above is to fix the width of the border without doing so in the css class definition. That way I can have one class and use it throughout the site instead of having a seperate class for each border.
“Number 1 in some class”
Again, Thanks for your help!,
Nicole
May 15th, 2006 at 18:47
David: Glad you like my lib ;-)! The background image thing for gradients is something on my list to do next. It will be restricted however… Still thinking about a nice way to deal with all this “background-postion:top/bottom”, etc. stuff…
Nicole: The problem was the “width:100%; float:left;”. If you remove that, then it works (have a look at the updated example). Tested on IE, Firefox, Opera, Konqueror. Is that the solution? If not: please upload your html somewhere and post the link… pastebin.com is one option. Thanks!
May 15th, 2006 at 20:02
Good call! Thanks that works fine! I thought I had tried that myself, guess not. I tried to do the same with the height but it didn’t quite work as well. The only way I got it working was to put a table with a fixed height and width inside of the inner div. If you have a better solution let me know. Otherwise this will work fine for me! Here is the code I tested in ie6 and firefox 1.5 on windows 2000.
Thank you very much! You have done a really fantastic job with this! Cheers -Nicole
May 15th, 2006 at 23:11
I’m having an issue with background images. I’m not sure if you have a fix for this. I want the image background to keep going, currently there is a white spot on either side of the tab due to the background color that is required in order for the curvy corners to work. I’ve tried putting the background image in the div styles. Code is here Any ideas?
Thanks again! Nicole
May 16th, 2006 at 5:22
When i use this on a table in opera it kills the border spacing
May 16th, 2006 at 17:45
Nicole: #68 maybe the Salvatore example is bit easier and gives you an idea. #69 background-images inside the border are not (yet) possible (see comment #67).
Dark Angel: can you pastebin.com your problems? Cheers.
May 18th, 2006 at 3:52
No probs, heres a sample page from my site (output from a PHP script).
HTML and CSS is in there.
http://pastebin.com/723867
Looks nice in firefox, but the table cells get padding between them after i run your script.
May 21st, 2006 at 13:51
Version 0.9 is out. Supports background images inside the border - gradients rule! It also solves some of DarkAngel’s padding problems.
May 24th, 2006 at 14:34
Hello everybody,
Very nice job !
Perhaps already answered, but I didn’t found out how placing two different boxes with the same glow effect on the same page.
Do you have an example ?
Thanks
May 24th, 2006 at 19:04
Hi DEM, if your boxes share the same CSS .class, you can simply use the ‘.myclass’ selector when calling draw(), e.g.
myBorder.draw('.myclass');. See the three horizontally aligned boxes in examples.html which you find in the .zip file.May 25th, 2006 at 10:55
Hello Steffen,
Fine. I understand now. I read again the explanations this morning and now that I know how to undersatnd, it’s OK.
I guesss I was somehow disturbed yesterday….
Next step : a rouded shadowed box with inner glow and/or 3D effect.
Thanks again
May 29th, 2006 at 15:23
Hello Steffen,
Thankx for your scripts, i used ur ruzeeborder ver 9 but i’m facing a problem that when i put multi Div’s (around 3 to 4 Div’s) in one TD the height will not be the same, by the way i give 100% height to the TD .
when i remove the script i can see that the height for all Div’s are same which is 100% but when i run ur script the problem came again,
hope to see any solution,
My Regards.
May 31st, 2006 at 3:38
Another minor problem is that if you have two DIVs stacked on each other, put TLR on the top one and BLR on the bottom, you get a thick border the same colour as the shadow between the two. A workaround for that is setting the border of the top one to the same colour as its background, but it would be better if it didn’t have to be done because you lose several pixels of usable space when it happens.
May 31st, 2006 at 8:06
Abo: Does my blog posting help you (not ;-))?
Trejkaz: I think I do that in the example.html coming with the distribution without having that problem… can you pastebin.com your problem? Thanks!
May 31st, 2006 at 13:58
the :hover rule doesn’t work on div transformed by ruzee borders library.
How to fix this ?
Thankss
June 1st, 2006 at 11:57
Can you pls make rss freed just for new ruzee borders releases?
June 1st, 2006 at 16:31
Also i have a problem(?) after apling ruzeborder on something it loose it height \:
June 1st, 2006 at 17:16
It’s me again ):
If there is someone with spare time and willing to help me - look at this http://bf.mdr.cz/dita/index2.php and tell me why it look in IE so much different then in FF - i think its something with paddings, but don’t know how to fix it - also notice weird left and right borders on centered div …
Also overflow is screwed in IE but i think i can solve this by myself
If you don’t want to mess up this comments you can contact me at lolitka@gmail.com or on icq 124-842-498
June 1st, 2006 at 21:25
I am noticing that in i.e. the page render is slow. The page begins to render without the borders then the borders appear after a pause. It is a very noticable change. Any ideas to speed this up? I do not have this problem in firefox. It does take a second or so to load in firefox. But it doesnt have the before/after effect like i.e. Thanks!
June 2nd, 2006 at 20:44
ronan: :hover is something really tricky. I’m still looking for a way to do it (see also comments 37 and 39)…
lolita:
To 81: Would it be ok to have an RSS feed for these comments?
To 82: The next version will have support for preserving pixel heights.
To 83: Your “top: 50%;” / “top: -50%;” trick broke the border. No idea how to fix this in RUZEE.Borders, but here’s a workaround using a wrapper DIV which works with version 0.10.1. That’s basically a rule of thumb: Always use wrapper DIVs and you’ll have much less trouble ;-).
Nicole: I currently know no way on how to get rid of the “slow IE problem”…
June 3rd, 2006 at 0:24
I think that coments are ok [if you annouce new verison in comments ((:].
Ok thanks a lot i was realy dumb and putting ‘fix’ div inside inner (like you see cotent with 500px width) … btw i had a lot problems in IE with paddings and margins with ruzee borders (probably) because IE implents it differnt then FF(?) and RB change padding of div(?), but i fixed it adding fixes for IE, but it fixes result and not fix reason, so how exactly RB add padding (i did not found it in manual) [anyway it can be my fault with something other, im not pro with css or xhtml].
Also i have problem that IE shows scrollbar (i know i can set overflow hidden for some div, but again it fix result and not reason) and i don’t know why \: - but it is sure not anything with RB, just in case you want to help me (: - best thing will be some freeware developer toolbar for IE like it is for FF ….
June 3rd, 2006 at 0:32
Hmm btw http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en works for me now (: so i think i will solve my last problem somehow …
June 4th, 2006 at 16:33
A new version is out: heights can be specified, widths directly set on the element (no wrapper required), and it comes with fixes and speed improvements.
June 5th, 2006 at 23:06
So how would I make it so that the widths and heights do not have to be set statically as my content is dynamic I cannot set the widths and heights else they would overflow..
June 5th, 2006 at 23:44
Hey Potato Bob,
you don’t have to specify width and height. Your elements can get the width from some outer DIV and the setting of the height is just required if you want multiple bordered elements having the same height. RUZEE.Borders fully support liquid heights and, for example, something like “width: 80%;” - have a look at the header and footer of this blog for the “liquid” widths and at the posts on the main page for the heights given by the text content.
The settings for “static widths and heights” are just an additional feature.
Hope that helped, Steffen
June 6th, 2006 at 0:52
Sweet! although the speed of the script is a lil slow even on a 3.2ghz ~3.5secs, kinda feels like dialup
June 6th, 2006 at 2:19
actually this script crashes IE when used in my environment…. lol
June 6th, 2006 at 9:12
What is this environment? Can you post a link to the page that crashes?
June 6th, 2006 at 21:00
http://testserver.pbspot.com/ruzee.html
This is an example page that is generated by a project that I am working on. I’ve removed ruzee when it would crash IE and now that I’ve script back on IE seems to be fine. I cannot remember what settings it was that caused IE to crash, but ruzee still has its problems in IE. If you compare IE with firefox you see that the #div_user does not show correctly and td._menu_item’s width is not 160px like it should be.
That is all the elements I’ve tested so far…
June 6th, 2006 at 22:17
The problem with td._menu_item not having the right width is because IE is not running in strict mode when you put a comment before the DOCTYPE.
Unfortunatly there is an endless loop with RUZEE.Borders on your page when it tries to render the #div_user in strict mode. I\’ve tried to reproduce the problem in a \”clean-room\”, but had no success. Maybe it is related to the absolute positioning of that DIV. Can you try to put some wrappers around?
June 6th, 2006 at 23:08
Unfortunatly, wrappers had no positive effects instead the glow’s z-index was set lower that that of #div_user and the navigation bar so the glow disappears behind it…
as for IE, right now it doesn’t work right in strict mode, so I’ll have to fix that.
June 8th, 2006 at 15:16
if you have for example:
table
form
tr
foo
/tr
/form
/table
It is no longer possible to submit the form if you’re using RUZEE.Borders (at least on opera)
June 10th, 2006 at 12:37
Fred, HTML is very strict when dealing with tables. Inside a TABLE element, only TBODY, TR, etc. is allowed. Inside a TR only TDs are allowed. Inside the TD you can again do, whatever you want. So put FORMs and RUZEE.Borders only outside the TABLE element or inside a TD - this should solve your problem.
June 10th, 2006 at 18:08
Steffen, I may have missed it, but is there a slick (i.e., built-in) way to do rollovers with RUZEE.borders? Maybe a glow effect or shadowWidth change in response to an onmouseover event?
Thanks for the wonderful library of effects, by the way.
June 10th, 2006 at 18:17
Chris: Neat idea. But I guess with the :hover feature, where I have no idea, how to implement it, this might be kind of tricky to do… with zIndex, relative positioning, there might be a way to do it with version 0.11… Anyone tried that?
June 10th, 2006 at 21:58
Steffen, yeah I was figuring that it’d involve something like that. Just wanted to make sure there wasn’t a built-in feature already before I started hacking away at it. Seems like it would be a cool feature if you’re looking for suggestions
I’d be very interested to hear if anyone has been able to get a nice rollover effect going with RUZEE.borders.
June 11th, 2006 at 5:27
Steffen, is there a way to get the actual generated html after this script does it’s thing. I want to beable to generate this stuff from php..
June 12th, 2006 at 23:15
very nice man!
June 12th, 2006 at 23:19
very nice man! Im using this when I have the time
—————–
secure
June 19th, 2006 at 11:44
RuzeeBorders seem to fail to render with IE 6.0 when given a TABLE element. I have a simple fix which simply checks if the given element is a TABLE. If it is then SPAN is created and places the original TABLE element. The TABLE is added to the new SPAN previously created. Ruzee is then asked to do its thing on the SPAN.
IE doesnt seem to be able to handle the TABLE DIV DIV DIV TR thing - unlike FF. My fix moves the multiple Divs before the TABLE.
I have included the code necessary below - ideally this should occur as the first step for all the *public* Ruzee methods to fix up the element reference.
The only requirement i have is that my name is added somewhere as an author:)
function visitElement( element ){
if( -1 != navigator.userAgent.indexOf( “MSIE” )){
var span = document.createElement( “span” );
var parent = element.parentNode;
parent.replaceChild( span, element );
span.appendChild( element );
span.style.backgroundColor = element.currentStyle.backgroundColor;
element = span;
}
return element;
}
June 19th, 2006 at 21:53
hey mP,
thanks alot for the suggested fix. Unfortunately its not that easy… The width of a table is determined by the sum of the maximum widths of each td inside one column. If you put a SPAN around the table this will do the trick and its size will be the size of the table.
RUZEE.Borders however will put lots od DIVs (display:block) inside that SPAN that will - in turn - make a DIV out of this SPAN (see my comment #39).
I’m right now playing around to remove this restriction - there were lots of comments here about RUZEE.Borders changing display:inline (SPAN) to display:block (DIV) of rounded elements - but I can’t promise anything right now…
June 23rd, 2006 at 0:01
Does anyone know how to prevent artifacting when you have a shadowed div over a div with an image background? The shadows don’t seem to be picking up any transparency.
June 24th, 2006 at 11:21
Hi Brian, RUZEE.Borders do not use opacity and hence shadows cannot be transparent to show the background image \”beneath\”. That\’s why.
June 24th, 2006 at 18:51
hi,
good lib. would it be possible increase the speed by caching results (save to a cookie) ?
also i have a problem with the original square borders flashing up momentarily on simple pages, but this doesn’t happen on more complex pages, which is strange.
cheers
jonah
June 26th, 2006 at 14:14
Great idea and good looking results.
Here’s some test results on Mac OS X:
- Safari 1.3.2: OK
- Netscape 7.2: OK
- Firefox 1.5.0.4: square corners with warning dialog “Unresponsive script”, which change to rounded corners if click Continue button
- IE 5.2: rounded corners but with random bars of colour in background
- Opera 8.54: OK
- Mozilla 1.7.13: OK
- Camino 1.0.2: square corners with warning dialog “Unresponsive script”, which change to rounded corners if click Continue button
- SunriseBrowser: OK
Regards,
Adi
June 26th, 2006 at 19:09
@jonah: cookies are always transferred to the server - RUZEE.Borders generate kilobytes of HTML - I guess that won’t make much sense…
Do you have an example for the flashing borders (pastebin.com)?
@Adi: Yeah, this unresponsive script happens on slow machines with pages that heavily use RUZEE.Borders. What machine is it? Did it happen with my page?
June 29th, 2006 at 19:14
Athlon xp 1700+ 756MB ram and it happens your page (in Firefox) … maybe still too generated many divs? I don’t know (:
June 30th, 2006 at 16:24
Hi, Steffen. I’ve been trying out RUZEE.Borders for a website “makeover”. Among other things, I’m using it to put a border around the entire page content. It works great if the main page content has a fixed width. However, if I try to use a percentage width I start running into problems anytime the main DIV contains element(s) that are wider than the current window size. In this case, the browser adds a horizontal scroll bar, but RUZEE.Borders continues to draw the borders at the right side of the current window, even though they should really be “off the screen” and you should have to scroll to the right to see them. I’ve observed this behavior in both IE and FireFox. I suspect this is an issue with the browser not correctly reporting the width of the DIV. However, it’s a showstopper for me since I need to be able to use percentage width. For everything else I’ve tried, RUZEE.Borders works great. Do you have any thoughts on how I could work around this (other than switching to fixed widths)?
June 30th, 2006 at 21:07
Never mind my previous post; I’ve found a solution. If I wrap my main DIV in a table, and set the percentage width on the table, then everything works as it should. Thanks for the great library. It’s allowing me to get the latest and greatest look (rounded corners with background gradients, etc.) without having to resort to all that image slicing that everyone seems to be so fond of these days.
July 1st, 2006 at 15:37
@Mark: wrappers are your friend most of the time something doesn’t look as expected - I’m glad you’ve found a solution.
@Adi, Lolita, etc.: Version 0.12 doesn’t have the “unresponsive script” problem any more - please try it and tell me if it works for you.
July 2nd, 2006 at 11:42
[...] Ruzeeborders v0.11 integriert [...]
July 2nd, 2006 at 15:54
[...] http://www.ruzee.com/blog/ruzeeborders/ [...]
July 6th, 2006 at 9:22
So I have a little problem.
The rounded corners and everything works fine on my mac and on safari, camino and firefox. But whenever someone tries it on a PC with internet explorer it doesn’t work at all. It doesnt do any of the rendering.
Does anyone know how to fix this or what the problem could be?
July 6th, 2006 at 9:55
Chris, IE says “Error on page” which means that there’s a bug in the JavaScript… I found out that changing “height: 20″ for your banner when doing RUZEE.Borders.add() to 30, it works fine. I’ll check on the weekend why RUZEE.Borders don’t like this height value in IE and release an update.
And btw: Please have a look at the Restrictions section above: “… #000000 is interpreted as transparent. If you want a black background using #010101 in your CSS is a possible workaround - assuming almost black is ok for you.”
July 8th, 2006 at 18:34
Version 0.13 fixes the problems with fixed heights beeing calculated negative - Chris, this should do the trick with “height:20″ ;-).
July 26th, 2006 at 2:41
Cannot get the IE blank page trick to work. Perhaps I am putting the code in the wrong
place? I am using Ruzee .13 code in my pages. I keep getting script errors (object
expected) and nothing loads at all. Will the Ruzee Events fix this (instead of the sample
code you provided)?
Thanks
July 26th, 2006 at 20:47
Derek, that’s strange. The code should work like that. Do you have an example online that I may try out and look at?
August 3rd, 2006 at 4:03
Hi Steffen,
We are using your wonderful rounded corner lib in our project which is done on Rails! Thanks for letting us do that!
However, since we are using Ruby on Rails we have to use your library together with the Prototype JS library, which leads to one problem. The mapping rule “extend” gets added to RUZEE.Borders.mappings, which leads to alert boxes stating “Unknown borderType: undefined” (This alert pops up twice in FF and once in IE, whatever that means :). To work around this problem, I added a simple check to your render method (full code below):
/**
* Render all added mapping rules into the DOM
* If RUZEE.Events is not available, this method MUST be called in the
* window.onload method (or with a similar technique)!
* Note: Since v0.12, this method is asynchronous! If you need to do
* stuff AFTER the rendering finished, do it inside the function you passed
* in via the onfinished parameter.
*/
render:function(onfinished){
if(onfinished) RUZEE.Borders.onfinished=onfinished;
var start=new Date().getTime();
for(var rule in RUZEE.Borders.mappings){
//debugger;
var e=RUZEE.Borders.cssQuery(rule);
// MARTIN GAMSJAEGER
// necessary when used together
// with the prototype library
if(rule != “extend”) {
var b=new RUZEE.Borders.Border(RUZEE.Borders.mappings[rule]);
delete RUZEE.Borders.mappings[rule];
b.calc(e);
// if we are rendering for more than 3 seconds, give Firefox some time to get
// rid of the “unresponsive script” message.
if(new Date().getTime()-start>3000){
setTimeout(’RUZEE.Borders.render()’,0);
return;
}
}
}
RUZEE.Borders.renderCalcs();
if(RUZEE.Borders.onfinished) RUZEE.Borders.onfinished();
},
Using this version, neither IE nor FF pop any alert boxes, since “render” never tries to add the never existent “extend” rule. I must admit that we didn’t really dig deeper into this issue! Please let me know if you think this workaround is valid, or if you can come up with a better solution to this problem.
cheers
Martin
August 3rd, 2006 at 19:36
Just so you know, Ruzee Borders totally freak out if you set margin or padding in em, as you should when you make elastic layouts that can be scaled. Perhaps there are other properties that caused the same behavior, I haven’t tested it all to know for sure.
August 3rd, 2006 at 21:14
@Martin: woa… prototype… well, no idea what it does to RUZEE.Borders… This rule!=”extend” is a real hack. Until I find the time to have a closer look at this, I think your workaround is ok.
@Jakob: yeah, em is not supported - and will never be. This is due to the fact that RUZEE.Borders calculates everything in pixels - and has to… I suggest you use wrapper DIVs (at least for the margin).
August 3rd, 2006 at 21:29
@steffen: I see, well it makes sense. I’m using wrappers now to get around it, it’s not a big deal as these borders scale really well! I am extremely impressed, this made it all a lot easier!
I found one problem, there seems to be some kind of conflict related to Drupal’s javascript for collapsible legend/fieldsets on forms, I had to reverse the order in which ruzeeborders and collapsible.js were loaded to get around it. Perhaps it’s something there’s a better solution to.
August 3rd, 2006 at 21:37
Another Q, how hard would it be to change the opacity of the shadow? Being able to set the direction of the shadow would be nice too…
August 9th, 2006 at 6:31
Hy Steffen, i’m working with Martin on this Rails project using your very nice lib, and i’ve got 2 problems the 1st one is that i don’t seem to be able to create a rounded div with a height of less than 26px no matter what i try (padding:0; etc.) and the 2nd one is that i try to crate a box with rounded corners on all sides but not on the top-left but still want the border applied, is this possible with RUZZE.Borders? I would appreciate it very much if you could help me on this 2 ’small problems’.
thanks in advance
Milan
August 9th, 2006 at 21:14
@Jakob: Now that Opera 9 came out, Konqueror is the only reason not to use opacity - well, kind of a reason
- opacity borders are tough, but the next thing on my list - whenever I find a solution and some time (it’s quite busy right now…)
@Milan: Try putting an internal wrapper DIV with a negative margin - maybe that solves the 26 pixels problem (never tried that on my own…). The “do not round the top left corner” thing is possible with RUZEE.Borders as long as you don’t need a shadow (and as long as you accept hacks ;-)). Here’s an example. The trick is to use an outer DIV that renders the non-round corner.
August 10th, 2006 at 13:29
IFrames inside a Ruzee bordered div won’t display though they work fine in Firefox, any idea why this is?
August 10th, 2006 at 13:37
Ignore that, managed to find the answer by simply reading the ‘Tips & Tricks’ section…who’d have thought reading would come in so useful one day.
August 13th, 2006 at 14:17
[...] RUZEE.Borders - Steffen Rusitschka’s Place in the Web (tags: javascript css web design round corner) [...]
August 15th, 2006 at 8:47
First of all, let me say that RUZEE.Borders is absolutely fantastic.
I’m trying to attempt a non-standard usage, however. I’m trying to apply RUZEE.Borders to DIVs that can be dynamically moved and resized via JavaScript. As a test, I’ve attempted just “move” on a DIV that has been RUZEE-fied–but it doesn’t move (an alert tells me that it is receiving the mouseup event). I know the move script works because it works on a non-RUZEE-fied DIV placed next to it.
I’m also unsure how to implement resize because I actually set the style widths and heights via JavaScript but RUZEE requires me to set the them in two places.
Any ideas on work arounds?
Thanks for a such a great script.
August 15th, 2006 at 23:54
Okay, here’s an idea I bounced it with someone who knows DOM scripting better than I do. In order to allow em sizes to be used for object padding with the Ruzee Borders totally messing them up, I suggest you implement the method used by sIFR to measure the size of objects, then through the DOM API add an object measured in ems and measure it for reference to get the number of pixels per em. This should work well enough, and once the Ruzee borders have been rendered the browser will take care of any scaling that might occur.
August 21st, 2006 at 18:15
@Steve: Hard ones… for moving: an outside wrapper DIV may do the trick - if it rezeives the event, where I’m not sure about. The resize may work, if you try to resize an inner DIV and have no height specified at the DIV you are “bordering”.
@Jakob: Well… the size of an “em” may change inside the browser (e.g. Ctrl-Mousewheel). But anyway, I like the idea. Do you know a JavaScript lib that implements this?
August 23rd, 2006 at 3:33
@Steffen: I believe you could look at how sIFR works, it measures an element and replaces it with a Flash movie that it fits to the element’s size.
BTW, I just wrote a long entry and forgot to fill in the spam prevention field, consequence being I lost all I wrote. Please fix it. Too tired to write all that again.
August 25th, 2006 at 21:50
@Jakob: I found a different solution. Check out version 0.14 ;-). Oh and sorry for this spam prevention thing. Unfortunately “fixing” it would mean loads of efforts inside the Wordpress code… Guess I won’t do that. Maybe I’ll switch to Typo4 in the near future, anyway… Well. For the moment, we’ll have to live with it.
August 27th, 2006 at 18:57
By far the greatest of the roundies! Thanks, thanks and thanks again!
I’ve read all through the blog and can’t believe your progress! Wow!
I’m really waiting for “Emad’s “askew” corners” to be fully implemented with shadow support!
Question: doing a “simple border, but round only X,Y”.. the un-rounded borders aren’t there. Is this by design? tested in FF, IE, and Opera.
Thanks!
August 27th, 2006 at 19:19
@Roy: Cheers! And to your question: Jep, that’s by design. The right navigation boxes on my page are an example why this makes sense. Have a look at comment #129 for a workaround.
August 30th, 2006 at 12:39
Hi!
Ruzee borders is by far the best corners routine on the net & I’ve checked them all out. Bravo for such an awesome and well thought out piece of code!
fyi - I’ve found a few occasions where it breaks some other things in different browsers.
In IE6 - scriptaculous drag & drop doesn’t work if inside a ruzee border (it makes the elements disappear when dragged)
In Firefox - almost every rich text editor - ie tinymce (I tested about 5 o 6 of them) breaks if inside a ruzee border.
For me, reluctantly it means I can’t use the corners routinue unless I don’t have either of the above functionalities in the site using borders.
Anyway - many thanks again for your work
best regards
Andrew
September 17th, 2006 at 17:06
@Andrew: Cheers!
I’ve tested version 0.15 with tinymce 2.0.6.1 and it worked with FF, IE, Opera.
Drag&Drop: can you try version 0.15? If it doesn’t work, well hell ;-). Can you send me an example? Cheers!
September 22nd, 2006 at 16:24
[...] Pra treinar inglês… This URL contains the way of making awesome JS effects, like shadows, glows and rounded borders! Here it is … enjoy it!! [...]
September 23rd, 2006 at 6:46
hi steffen! thanks for making this so much easier!
i’m trying amatuerishly to put this together with script.aculo.us. it works fine it firefox, ok in opera, but ie has a problem with the padding. 0.12 seems the best in ie for my purposes. any ideas?
again, thank you very much!
September 27th, 2006 at 16:22
hi steffen, I was attempting putting a shadow around a ul style menu in the site below. (The top menu with a two tone red backgound)
http://www.dp.shoesforindustry.net/
1. It works fine in web standards browsers, but not in IE 6. In IE the menu jumps down when you hover on it with your mouse. I thought I knew what this bug was, but no amount of hacking CSS for IE can make the menu stick. Actually that is not quite true, I can make the menu stick by putting ‘position: absolute’ on the ‘.menu_horiz’ class - but of course, this messes up other things.
As I see this as being quite a common use of your rounded corners do you have any ideas on how to stop the jumping and retain formatting?
2.Also I notice that if you resize the Window in IE, elements with Ruzee borders and things inside them move around and destroy the design. any ideas on this one too? They move down and maybe something to do with not being able to center backgounds ??
Many thanks, and keep up the good word, please let me know if I can be of further help.
Russ
September 30th, 2006 at 16:33
@tucker and Russ: Try version 0.16 - it should be much more “compatible”.
October 1st, 2006 at 17:40
1. Thank you very much Steffen, I thought it was the PeekaBoo bug, but couldn’t seem to fix it in CSS. Not entirely sure why as I’ve done it before? Anyway if you have this problem - jumping links in IE - then version 0.16 seems to do the trick
2. It also seems to fix a bug I was having woth Opera (9.02 OSX) which showed a white borde around the header? This has now gone.
http://www.dp.shoesforindustry.net/
3. However this now does not appear to work in Safari? Check the above page or this one as an example. Bizarre as it was working?? Any ideas Steffen?
4. Proper use of background images would also be cool (e.g. center them vertically and horizontally.)
I’m also having problems again in IE with things shifting down - probably the 3pixel jog - I’ll have a go at giving IE some different values, but the header of the link above shows what I mean (the black Apexi Europe logo) compared to Firefox.
I also like to emphasis my thanks. I’ve been trying to fix this (on and off) all week, trying various permutations of CSS hacks - none of which worked well - so I’m quite happy now - I’d be very happy if it worked again in Safari
Russ
October 4th, 2006 at 7:31
[...] RUZEE.Borders – Steffen Rusitschka’s Place in the Web [...]
October 5th, 2006 at 8:35
Hi Steffen, did you get to have a look at why the latest version 0.16 does not work in OS X Safari? Neither on my test site or this web page?
Russ
October 6th, 2006 at 8:18
[...] Yep, rounded corners. Via javascript. (I wanted to avoid images for rounded corners and Ruzee.Border actually works for me.) [...]
October 6th, 2006 at 23:11
@Russ: 0.16.1 fixes the Safari issues. Safari doesn’t like “var x=123; var y={ x:x };” changed it to “var xp=123; var y={ x:xp };” and voila! Please try it.
October 9th, 2006 at 20:30
[...] RUZEE.borders, despite sounding like something you’d buy at a clown shop, is actually a pretty robust implementation, featuring anti-aliased drop shadows, configurable border widths, and nice degradation (your page still works with Javascript off). I haven’t tried this one yet, but with all those great features, one can only imagine that for large pages with lots of rounded elements, it’s going to be, um, slow? [...]
October 10th, 2006 at 9:37
Thanks very much Steffen, that seems to do the trick with Safari, without breaking anything else. Well nothing that I have spotted yet. Keep up the good work. What is next for Ruzee Borders?
Russ
October 12th, 2006 at 22:27
Great stuff!
But… isn’t there a way to get around IE blocking the JavaSc