About These Layout Editors

Here are some details about my basic and advanced MySpace editors that you may be interested in.

No Hexadecimal Color Codes

Not that many of you would give a rat's arse about this but there may be some observant folk who notice that these MySpace editors don't use hexadecimal color codes (e.g. #FFFFFF which equates to 'white') and there's a good reason for this.

The long and short of it is that the MySpace Cold Fusion script that processes your layout code when you enter it into the About Me section in your profile will filter out all hash marks (#) which are required to precede hexadecimal color codes in order that they may function correctly. This makes the use of hexadecimal color codes in MySpace layouts unreliable at best and is especially true when using the CSS border shorthand property. When used in the border property, certain hexadecimal color codes will produce all kinds of wacky results such as:

• No borders rendered
• Multi-color everything
• Super stretched tables

...and the like.

One solution to this problem was to confine myself to writing all border styles in CSS longhand, e.g. -

border-width: 3px;
border-style: solid;
border-color: 004000;

Of course, this proved to be really tedious when I wanted to define individual border styles (e.g. border-top, border-left, etcetera) to create a 3D effect as I do in some of my Premium series of MySpace Layouts.

The other solution was to simply not use any hexadecimal color codes at all and instead use the 140 recognized web color names (known officially as the X11 web color names) or use the so-called RGB 'functional notation' style to define colors, neither of which method requires the use of hash marks. I decided this solution was better since both of these color notation methods are essentially bulletproof (especially the latter) so it would give me the freedom to continue using the border shorthand property and not have to worry about certain colors making my layouts go haywire.

Since I became so accustomed to this method of defining colors for my layouts, I decided the two color selectors in my MySpace editors would be bereft of any hexadecimal color codes. Hence, the Color PICKER will allow you to quickly pick one of the 140 recognized web color names while the Color SLIDER will allow you to define your own color with a great deal of precision (comparable to that of many graphics editors) after which it will automatically insert the appropriate RGB functional notation.

About Border Styles

First of all (*chuckle*) the double border style will NOT d o u b l e  the specified border width. Any MySpace editor site that tells you this has plain straight up got it wrong.

According the the official CSS2 specification, this is the definition of the double border style:

The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.

In other words, the double border style works within the limits defined by the border width.

Also, contrary to what some sites say, all border styles do actually work in all major PC browsers (these being Internet Explorer, Firefox and Opera). And you can go to my Advanced MySpace Editor and check it out for yourself. Use the dropdown menu to quickly implement all the border styles one by one and study the resulting effects in the QUICK PREVIEW box. Each browser may have its own way of rendering certain border styles but they do work.

Some border styles, however, will require that the border width be set at a minimum of 3px to render a discernable effect. This is particularly true of the double border style (no effect under 3px) and the groove and ridge border styles (diminished effect under 3px).

Here's a complete rundown of what all the border styles do when applied to the tables in MySpace layouts:

• solid - The table border is drawn as a solid line.
• dotted - The table border is drawn as a series of dots.
• dashed - The table border is drawn as a series of dashes.
• double - The table border is drawn as two solid lines.
• groove - A 3D effect where the table border appears carved into the web page.
• ridge - The opposite of 'groove': the table border appears as though it were coming out of the web page.
• inset - The table border is drawn to apply a 3D inset appearance to the table.
• outset - The opposite of 'inset': The table border is drawn to apply a 3D outset appearance to the table.

Browser Compatibility and Known Issues

Every facet of my basic and advanced MySpace Editors (from the editor interface to the usability of the generated layout code) was fully tested in the following PC browsers:

• Internet Explorer 6
• Firefox 1.5
• Opera 8.5

Nevertheless, any feedback on performance would be greatly appreciated. (I especially need feedback from Mac users as I rarely get any information on how well these layout editors perform in the Safari web browser.) Feel free to contact me here.

Here is the only known issue that I could come up with (applies to both the Basic and Advanced MySpace editor):

No Quick Preview for Tile and Scroll options ~ For Firefox and Opera users, I found that the Tile background and the Scroll background options were producing some wacky results in the QUICK PREVIEW box. I'm in the process of hunting down the cause of this problem which could either be some kind of obscure CSS bug or (*gasp*) an error in my code. Until this problem is resolved, I have disabled the QUICK PREVIEW box for the Tile and Scroll options for Firefox and Opera users (Internet Explorer is not affected). Rest assured that you'll be able to see the effects of either of these two options on the full preview page (click on the 'Preview Layout' button). The generated layout code will likewise render fully-functional Tile and Scroll option settings in your MySpace profile.


RELATED LINKS:

Basic MySpace Editor
Advanced MySpace Editor

<~ BACK

TOP

INTRO