When time comes for all browsers to support CSS3, we will be able to drop shadows easily - and hopefully faster! For the moment, only Safari supports CSS3 so I have to resort to some DOM manipulation through Javascript - quite tricky and heavy! You can read about it in ShadedBorder - JavaScript Round Corners with Drop Shadow._________________Regards

The ShadedBorder JavaScript script that I use to render the shadows creates a monster (albeit standards-compliant...) HTML for the poor browser to render! Just for the history, I used the Web Developer Extension for my browser to view the generated HTML code of How to use SAP DB from PHP in Linux (once you have installed the extension and the page whose code you want to see is loaded, go to Tools --> Web Developer --> View Source --> View Generated Source - "Generated" is the important thing here!). Here is what I saw:

I have saved the code for you to inspect in the HTML or text editor of your choice:

It's a 12 MB TEXT file!!! It will bring your HTML or text editor to its knees every time you try to scroll a few lines - so be warned! (well, that was before I processed the file to put every div on a separate line, i.e. when the code looked as in the image above. Now it's safe and fast to scroll down, so you can quietly study all those div's with no fear of crashing your editor.)

Twelve megabyte text...you have to roll this bonbon on your tongue before you try to swallow it!

This means that, even though my web server sends your browser just a few kilobyte text, the ShadedBorder JavaScript script makes a 12 megabyte monster out of it! Thus, each time you view such a page, your browser has to render 12 MB of HTML!

Why is this so?

Because, as it seems, the RUZEE.ShadedBorder script creates a div element for every pixel that has to be shaded around the box! Do you see all those div's in the image above?

Is this "standards-compliant" HTML code? The W3C Validator cannot say yes or no, because it sees the few KB of original HTML, not the 12 MB of generated HTML that shadedborder.js creates on the client through DOM manipulation and then presents to the browser for rendering!

I am quite confident that a local check of the HTML text (see link above) will say this is indeed standards-compliant HTML. What else is it, after all, other than some div's that are styled with CSS? Right?

Wrong! "Some div's" - that's where the whole problem is hiding! "DIV" means "this is a division" and is meant as a structural element to help you divide your document in, well...divisions. Look at the code again:

Is that what this code does? Divide the document in structural divisions? It divides it in 68880 divisions (yes, I counted them all!), but are they structural? Do they convey some structural separation of content? Do I have 68880 different text blocks there, each of them needing some special presentational treatment of its own?

No. Those div's are there for the sole purpose of shading 68880 pixels! And here is the proof:

Each on eof those 68880 div's has a width and height associated with it. A typical representative looks like this:

You see the "width: 1px; height: 1px;" there? Do I need to say more? These are 1-pixel divisions!

A division needs to be styled, among others also with "width" and "style" attributes. After all you want to make some divisions wider or higher than others. So a height of, say, 100 pixels, or a width of 500 pixels are totally acceptable. But is a width and height of 1 pixel acceptable?

Is a 1-pixel division a division or a pixel? A division is something structural, a pixel something presentational.

The RUZEE.ShadedBorder script misuses a structural element for presentational purposes! This is a far more serious reason for me for not using it, than the superficial statement "it's too heavy". Browsers become better and faster (faster? who says this? ), processor's hearts beat billions of times per second - no doubt one day the script will run so fast that nobody will notice...

...but it will still be using structural elements to shade individual pixels - and for this reason I will still recommend against its use.

And for this reason I am going to revert to the old code block style right now! _________________Regards

Well, with just one extra div inside the original code div and a tiny (53 bytes!) semi-transparent background image, I was able to get shadows around the code blocks that are rendered lightning fast AND look nice:

Code:

indexing "Hello World in Eiffel"

class HELLO

creation
run

feature

run is
local
io : BASIC_IO;
do
!!io;
io.put_string("Hello World!");
io.put_newline;
end; -- run

end; -- class HELLO

Granted, it reminds me of the good ol' DOS shadows, and it's not of the "rounded corners" type, but compare that to the 68000 div's above!