If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

One of the main advantages of using CSS is the large reduction in web page download time. To style text, you used to have to use the <font> tag over and over again. You probably also laid out your site with tables, nested tables and spacer gifs. Now all that presentational information can be placed in one CSS document, with each command listed just once.

But why stop there? By using CSS shorthand properties you can reduce the size of your CSS document even more.

Font

Use:

font: 1em/1.5em bold italic serif

…instead of

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

This CSS shorthand property will only work if you’re specifying both the font-size and the font-family - omit either and the CSS rule will be completely ignored. Also, if you don’t specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too.

Background

Use:

background: #fff url(image.gif) no-repeat top left

…instead of

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Omit any of these commands from the background CSS shorthand property, and the browser will use the default values. If you leave out the background-position command then any background image will be place in the top-left of the container and then repeated both horizontally and vertically.

Lists

Use:

list-style: disc outside url(image.gif)

…instead of

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

Leave out any of these CSS commands from the shorthand rule, and the browser will use the default values for each, namely disc, outside and none (i.e. no images) respectively.

Margin & padding

There are a number of different CSS shorthand commands for margin and padding, depending on how many of the sides of the containing element have the same margin or padding values:

Four different values

Use:

margin: 2px 1px 3px 4px (top, right, bottom, left)

…instead of

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

Three different values

Use:

margin: 5em 1em 3em (top, right and left, bottom)

…instead of

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

Two different values

Use:

margin: 5% 1% (top and bottom, right and left)

…instead of

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

One different value

Use:

margin: 0 (top, bottom, right and left)

…instead of

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0

The above rules also apply to padding and border (see below for more on border).

Border

Use:

border: 1px black solid

…instead of

border-width: 1px;
border-color: black;
border-style: solid

Use:

border-right: 1px black solid

…instead of

border-right-width: 1px;
border-right-color: black;
border-right-style: solid

(You can substitute right with top, bottom or left.)

The above CSS shorthand rules can be conveniently combined with the shorthand rules used by margin and padding. Take a look at the following box:

These borders can be achieved with the following CSS command:

border: 8px solid #336;
border-left: 10px solid #ccf;
border-top: 10px solid #ccf

You can achieve exactly the same effect by using:

border: 8px solid #336;
border-width: 10px 8px 8px 10px
border-color: #ccf #336 #336 #ccf

Conclusion

CSS shorthand properties are great! They’re a great way to reduce the amount of code contained in a CSS document, allowing for faster download times and easier editing. Now who can argue with that?

—

This article was written by Trenton Moss. Trenton’s crazy about web usability and accessibility - so crazy that he went and started his own web usability and accessibility consultancy to help make the Internet a better place for everyone. He knows an awful lot about the Disability Discrimination Act and spends much of his time working on the world’s most accessible CMS.

• 0 Comments

After spending so much time and/or money on designing and building your site, now the real problem comes. It is not enough that you have built a site and just let it hang there. In doing such, its like throwing away the money and time spent on this project to trash. You are done with the easy parts. Yes, you heard it right, those are easy compared to what you will do next.

To be able to get higher traffic, continuous optimization of your pages is necessary. It is done to have high search engine rankings and to have high pr. Here are some suggestions on optimizing a website:

Keywords

It is beneficial to take all the time that it takes to research for keywords and key phrases for your site. Never use irrelevant keywords moreover do not “keyword stuff” your meta tags. It has been abused frequently and as a consequence, most major search engine don’t give much weight on the meta tags. If found to be in such violation, search engine will penalize your site.

Title Tag

Be short and descriptive as possible when writing your title tag. Keep in mind that search engines will compare it to the text on that page and rank it accordingly. In addition, it will help your users know what the page is about. It is also advisable that the same keywords contained in your title tag will be used in writing the main text on your page.

Codes

Who would not like a “clean” code? Even people gets dizzy in looking on a “messy” code and so as to crawlers. It is recommended to use another file for formatting and just “call” your CSS file when needed. That way, crawlers can scan your codes and find your keywords on the content faster.

Using Other Technologies

It has been said that using Flash technologies and other similar techniques can “hurt” your rankings because search engines cannot read such. It is true that it is better to use standard technology such as HTML but still Flash animations is more attractive to a visitor’s eyes. Don’t limit your design because of this. A good optimization can still keep your site up on the running in the search engine rankings.

Content

Don’t get too carried away on designing your site. Make sure that you are creating a content-rich pages. It will not only help you on search engine rankings but also it will be beneficial for your visitors for they have come to look for information. They will likely come back if your site is well fed with valuable informations.

Sitemap

Having a well-designed sitemap helps both the users and the search engines. This will ensure that all the pages of your site gets indexed by the search engines.

Links

There are many ways to increase your link popularity. One way is to participate in link exchange programs by joining forums. This is the fastest way to do link exchange as long as the members in the forum are active. Just remember to be discrete so that they will not think that you joined to spam. With regards to your link exchange partners, make sure that they are related to your site to avoid being a link farm. If search engines find sites that have nothing in common with the content of your site, they will lower your overall ranking on their search results by lowering your relevancy rate.

Another way is to submit your sites to web directories. Avoid using software that automaticlly sends your site in a weekly or monthly basis. Bear in mind that the sites are being checked by humans and sited that have been submitted multiple times will automatically be disapproved. If still has no reply after 6 weeks, you can send an email to follow up.

The most important thing in link building is to focus on the quality of the sites and not the quantity.

Promotion

Make advertisements for your sites and submit it to as many ads sites as possible. You can also promote your site by making press releases, articles and mentioning them in your blog.

Hidden Link or Text

The most common way on hiding a link or a text is by using a font color similar to the background color. If found to be doing this, search engines will penalize your site and your rankings will drastically affected.

Cloaking Mechanisms

Never serve a unique, optimized page for the search engines and serve a completely different page to real users. This will risk your site on being penalized or worst being banned.

Looks like a lot of work? Well, it really is and it is quite a long process. But this will definitely pay off after a month or so. This way, you will increase the number of your unique visitors daily and get the return of investment and also the profit you are looking for. But if your focus is on the core business objective, one option is to hire the services of an SEO expert. Ask for referrals and do not hesitate to ask exactly would your SEO expert firm uses to achieve a good positioning for your site.

• 0 Comments

1. CSS font shorthand rule

When styling fonts with CSS you may be doing this:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

There’s no need though as you can use this CSS shorthand property:

font: bold italic small-caps 1em/1.5em verdana,sans-serif

Much better! Just a few of words of warning: This CSS shorthand version will only work if you’re specifying both the font-size and the font-family. The font-family command must always be at the very end of this shorthand command, and font-size must come directly before this. Also, if you don’t specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal, so do bear this in mind too.

2. Two classes together

Usually attributes are assigned just one class, but this doesn’t mean that that’s all you’re allowed. In reality, you can assign as many classes as you like! For example:

<p class="text side">...</p>

Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

3. CSS border default value

When writing a border rule you’ll usually specify the colour, width and style (in any order). For example, border: 3px solid #000 will give you a black solid border, 3px thick. However the only required value here is the border style.

If you were to write just border: solid then the defaults for that border will be used. But what defaults? Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!

4. CSS document for printing

Lots of web pages have a link to a print-friendly version. What many of them don’t realise is that there’s no need because you can set up a second CSS document to be called up when a user prints the page.

So, your page header should contains links to two CSS documents, one for the screen, and one for printing:

<link type="text/css" rel="stylesheet" href="stylesheet.css" media=”screen” />
<link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />

The first line of code calls up the CSS for the screen (notice the inclusion of media="screen") and the second line calls up the CSS for the printable version (using media="print").

So, what commands should you put in this second CSS document? To work it out, open a blank document and save it as printstyle.css. Next, point the screen CSS command to this document so that the command reads: <link type="text/css" rel="stylesheet" href=”printstyle.css” media=”screen” />.

Now just keep entering CSS commands until the display on the screen matches how you want the printed version to look. You’ll certainly want to make use of the display: none command for navigation, decorative images and non-essential items. For more advice on this, read Print Different, which also mentions the other media for which you can specify CSS files.

5. Image replacement technique

It’s always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you’ve absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you’ve got no choice but to use an image.

Say for example, you wanted the top heading of each page to be ‘Buy widgets’, as you’re a widget seller and you’d like to be found for this phrase in the search engines. You’re pretty set on it being an obscure font so you need to use an image:

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

This is OK but there’s strong evidence to suggest that search engines don’t assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:

<h1>Buy widgets</h1>

Now, this obviously won’t use your obscure font. To fix this problem place these commands in your CSS document:

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}

Be sure to change “image height” to whatever the height of the image is (e.g. 85px)! The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule. Please note, this can cause accessibility issues as any user with images turned off won’t be able to see the text.

6. CSS box model hack alternative

The box model hack is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. For example, when specifying the dimensions of a container you might use the following CSS rule:

#box
{
width: 100px;
border: 5px;
padding: 20px
}

This CSS rule would be applied to:

<div id="box">...</div>

This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions on PC. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack can be used to fix this, but this can get really messy.

A simple alternative is to use this CSS:

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

And the new HTML would be:

<div id="box"><div>…</div></div>

Perfect! Now the box width will always be 150px, regardless of the browser!

7. Centre aligning a block element

Say you wanted to have a fixed width layout website, and the content floated in the middle of the screen. You can use the following CSS command:

#content
{
width: 700px;
margin: 0 auto
}

You would then enclose <div id="content"> around every item in the body of the HTML document and it’ll be given an automatic margin on both its left and right, ensuring that it’s always placed in the centre of the screen. Simple… well not quite - we’ve still got the pre-IE 6 versions on PC to worry about, as these browsers won’t centre align the element with this CSS command. You’ll have to change the CSS rules:

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}

This will then centre align the main content, but it’ll also centre align the text! To offset the second, probably undesired, effect we inserted text-align: left into the content div.

8. Vertically aligning with CSS

Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use vertical-align: middle. This doesn’t really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won’t make a difference and the text will be pushed to the top of the box.

Hmmm… not the desired effect. The solution? Specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box - perfect!

9. CSS positioning within a container

One of the best things about CSS is that you can position an object absolutely anywhere you want in the document. It’s also possible (and often desirable) to position objects within a container. It’s simple to do too. Simply assign the following CSS rule to the container:

#container
{
position: relative
}

Now any element within this container will be positioned relative to it. Say you had this HTML structure:

<div id="container"><div id="navigation">...</div></div>

To position the navigation exactly 30px from the left and 5px from the top of the container box, you could use these CSS commands:

#navigation
{
position: absolute;
left: 30px;
top: 5px
}

Perfect! In this particular example, you could of course also use margin: 5px 0 0 30px, but there are some cases where it’s preferable to use positioning.

10. Background colour running to the screen bottom

One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn’t suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:

#navigation
{
background: blue;
width: 150px
}

Just one problem though: Because the navigation items don’t continue all the way to the bottom of the screen, neither does the background colour. The blue background colour is being cut off half way down the page, ruining your great design. What can you do!?

Unfortunately one of the only solutions to this is to cheat, and assign the body a background image of exactly the same colour and width as the left column. You would use this CSS command:

body
{
background: url(blue-image.gif) 0 0 repeat-y
}

This image that you place in the background should be exactly 150px wide and the same blue colour as the background of the left column. The disadvantage of using this method is that you can’t express the left column in terms of em, as if the user resizes text and the column expands, it’s background colour won’t.

Using this method the left column will have to be expressed in px if you want it to have a different background colour to the rest of the page.

—

This article was written by Trenton Moss. Trenton’s crazy about web usability and accessibility - so crazy that he went and started his own web usability and accessibility consultancy to help make the Internet a better place for everyone. He knows an awful lot about the Disability Discrimination Act and spends much of his time working on the world’s most accessible CMS.

• 1 Comment

A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we’re left with web pages that frustratingly don’t properly print on to paper.

It’s remarkable that so few websites use print stylesheets as:

• Print stylesheets enormously improve usability, especially for pages with a lot of content (such as this one!)
• They’re phenomenally quick and easy to set up

Some websites do offer a link to a print-friendly version of the page, but this of course needs to be set up and maintained. It also requires that users notice this link on the screen, and then use it ahead of the regular way they print pages (e.g. by selecting the print button at the top of the screen). Print-friendly versions are however useful when printing a number of web pages at the same time such as an article that spans on to several web pages.

How to set up your print stylesheet

A print stylesheet works in much the same way as a regular stylesheet, except it only gets called up when the page is printed. To make it work, the following needs to be inserted into the top of every web page:

<link rel="stylesheet" href="print.css" type="text/css" media=”print” />

The file, print.css is the print stylesheet, and the media="print" command means that this CSS file only gets called up when web pages are printed. (There are many different media you can use for stylesheets, such as for handheld, TV, projection etc. - see a full list of media types for more.)

What to put in your print stylesheet

The CSS commands in the print stylesheet essentially override the CSS commands in the main stylesheet. As such, the only commands you need to put in the print stylesheet are ones to override the CSS commands in the main stylesheet. This means you don’t need to repeat any colour or branding CSS commands as they’ll already be taken from the main stylesheet.

Generally speaking, you’ll want your print stylesheet to make the following happen when users hit that print button:

Remove unwanted items

Usually it’s just your organisation logo and page content that you’ll want to appear on the printed version of the web page. You’ll normally want to remove the header, left column and right column. You may also want to remove the footer (or some of it) from the printed version, unless it contains your contact details.

There may be certain isolated items you’d prefer weren’t printed so you can simply assign these class="noprint" in the HTML. To get rid of these items, along with the header and navigation (assuming these are assigned <div id="header"> and <div id="nav">) use the display: none command:

#header, #nav, .noprint {display: none;}

You may also want to remove certain images and adverts, especially animated images as these won’t make sense when printed.

Format the page

There’s nothing worse than printing off a web page to find the last few words of each line cut off. It’s also annoying (and a waste of paper) when the left and right columns are left in, leaving a very narrow space for the content so the web page prints on to 15 pieces of paper.

Generally speaking, the three CSS commands you’ll need are:

width: 100%; margin: 0; float: none;

These commands should be applied to any containing elements (<div>s for a CSS layout and <table>s for table layouts) to ensure the content spans the full width of the paper. So, the full CSS command would perhaps be something like:

#container, #container2, #content {width: 100%; margin: 0; float: none;}

Change the font?

Some print stylesheets do change the font size (often to 12pt) but this isn’t generally a very good idea. If users increase text size on the screen then the text will print in this larger font size… unless you specify a fixed font size in the print stylesheet.

Other print stylesheets change the font family to a serif font (such as Times New Roman) as this is slightly easier to read from print. Whether you choose to do this or not is up to you as users may be a bit surprised to see a different font printed out.

Do also bear in mind that background images and colours don’t print out by default. As such, you may wish to change the colour of text in a light colour so it has a reasonable colour contrast without its background.

Links

Print-outs are often in black and white so do make sure that links have a decent colour contrast. If not, assign links a slightly darker colour in the print out. For example:

a:link, a:visited {color: #781351}

For bonus usability you could include a footnote on the page listing all the URLs from that page, with each link referencing its URL underneath with a number. It’s otherwise impossible to know where a link is pointing to when reading a print out from a web page. See this working example and find out how to do this by reading this Improving link display for print article.

Making the print stylesheet

When making the print stylesheet place the print CSS commands into the bottom of your main CSS file. As you keep adding more commands check how your web pages look on the computer screen (don’t do this on a live website!). Keep adding commands until you’re happy with the appearance, then cut these commands out of the main CSS file and paste into the print stylesheet.

To summarise, your print stylesheet may look similar to this:

/* Remove unwanted elements */
#header, #nav, .noprint
{
display: none;
}

/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}

/* Change text colour to black (useful for light text on a dark background) */
.lighttext
{
color: #000
}

/* Improve colour contrast of links */
a:link, a:visited
{
color: #781351
}
You’ve now got a print stylesheet! For something this quick and easy to set up that improves usability as much as it does, you’d be mad not to use one!

—

This article was written by Trenton Moss. Trenton’s crazy about web usability and accessibility - so crazy that he went and started his own web usability and accessibility consultancy to help make the Internet a better place for everyone. He knows an awful lot about the Disability Discrimination Act and spends much of his time working on the world’s most accessible CMS.

• 0 Comments

More and more web developers are ditching tables and coming round to the idea of using CSS to control the layout of their site. With the many benefits of using CSS, such as quicker download time, improved accessibility and easier site management, why not?

The problem with CSS

Historically the main problem with using CSS has been lack of browser support. This is no longer the case as version 5 browsers, which all have good support for CSS, now account for over 99% of browsers in use.

Instead, the problem is that browsers can sometimes interpret CSS commands in different ways, causing developers to throw their arms up in the air and switch back to pixel-perfect table layouts. Fear not though, as you learn more about CSS you’ll gradually start to understand the different browser interpretations and realise that there aren’t really that many.

How browser detection using CSS hacks works

The way browser detection using CSS hacks works is to send one CSS rule to the browser(s) you’re trying to trick, and then send a second CSS rule to the other browsers, overriding this first command. If you have two CSS rules with identical selectors then the second CSS rule will always take precedence.

Say for example you wanted the space between your header area and the content to have a gap of 25px in Internet Explorer, or IE as it’s affectionately known. This gap looks good in IE but in Firefox, Opera and Safari the gap is huge and a 10px gap looks far better. To achieve this perfect look in all these browsers you would need the following two CSS rules:

#header {margin-bottom: 25px;}
#header {margin-bottom: 10px;}

The first command is intended for IE, the second for all other browsers. How does this work? Well, it won’t at the moment because all browsers can understand both CSS rules so will use the second CSS rule because it comes after the first one.

By inserting a CSS hack we can perform our browser detection by hiding the second CSS rule from IE. This means that IE won’t even know it exists and will therefore use the first CSS rule. How do we do this? Read on and find out!

Browser detection for Internet Explorer

To send different CSS rules to IE, we can use the child selector command which IE can’t understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

Using the example of the header margin, our CSS command would be:

#header {margin-bottom: 3em;}
html>body #header {margin-bottom: 1em;}

IE can’t understand the second CSS rule due to the html>body CSS command so will ignore it and use the first rule. All other browsers will use the second rule.

Browser detection for Internet Explorer 5

It may seem strange at first to send different CSS rules to different versions of a browser, but in the case of IE5 it’s very necessary. This is due to IE5’s misinterpretation of the box model. When specifying the width of an element in CSS, padding and borders aren’t included in this value. IE5 however, incoporates these values into the width value causing element widths to become smaller in this browser.

The following CSS rule would result in a width of 10em for all browsers, except IE5 which would give it a width of just 5em (IE5 would incorporate two sets of padding and border, on both the left and right, when calculating the width):

#header {padding: 2em; border: 0.5em; width: 10em;}

The solution to this problem? Perform browser detection and send a different CSS rule to IE5:

#header {padding: 2em; border: 0.5em; width: 15em; width/**/:/**/ 10em;}

IE5 will use the first width value of 15em, 5em of which will be taken up by the two sets of padding and border (one each for the left and for the right). This would ultimately give the element a width of 10em in IE5.

The 15em value will then be overridden by the second width value of 10em by all browsers except IE5, which for some reason can’t understand CSS commands with empty comment tags either side of the colons. It doesn’t look pretty but it does work!

Browser detection for Internet Explorer on the Mac

Quite simply, IE on the Mac does strange things with CSS. The browser’s become somewhat obsolete as Microsoft aren’t going to be bringing out an updated version. As such, many web developers code their CSS-driven sites so that the site works in IE/Mac, although it may not offer the same level of advanced functionality or design. Provided IE/Mac users can access all areas of the site this is seen as a suitable way of doing things.

To hide a command using the IE/Mac CSS hack is simple, and involves wrapping a set of dashes and stars around as many CSS rules as you like:

/* Hide from IE-Mac \*/
#header {margin-bottom: 3em;}
#footer {margin-top: 1.5em;}
/* End hide */

IE/Mac will simply ignore all these commands. This CSS hack can actually be quite useful if there’s a certain area of the site not working properly in IE/Mac. If that section isn’t fundamental to being able to use the site, you can simply hide it from IE/Mac like so:

#noiemac {display: none}

/* Hide from IE-Mac \*/
#noiemac {display: block;}
/* End hide */

The first CSS rule hides the entire section assigned the noiemac id (i.e. <div id="noiemac">). The second CSS rule, which IE/Mac can’t see, displays this section.

Browser detection for IE 4 and Netscape 4

Version 4 browsers have limited and somewhat erratic support for CSS. Making a CSS layout in these browsers, whose market share has now slipped well below 1%, can be extremely challenging. It’s become common practice nowadays to completely hide the CSS file from version 4 and earlier browsers. This can be achieved using the @import directive to call up the CSS document:

<style type="text/css">@import "styles.css";</style>

Version 4 (and earlier) browsers will display a non-styled version of the site as they can’t understand this @import directive.

Checking your site in the different browsers

At the time of writing, the major Internet browsers include IE5, IE6, Firefox, Opera and Safari. (Check out TheCounter.com for up-to-date browser statistics.) You can download all these browsers, and a number of more obscure ones, at the Evolt browser archive.

Ideally you should check your site in all these browsers, on both PC and Mac (except IE6 and Safari, which are only available on PC and Mac respectively). If you don’t have access to a Mac you can get a screenshot of your site on Safari by running it through Dan Vine’s iCapture or you can pay to use Browsercam which offers a more extensive screen capturing service.

Conclusion

On the whole, modern browsers have very good support for CSS - certainly good enough for you to be using CSS to control layout and presentation. Sometimes however, certain page elements will appear differently in different browsers. Don’t worry too much if you don’t know the reason why - if you can fix it up with these CSS hacks then your web pages should look great across all browsers!

—

This article was written by Trenton Moss. Trenton’s crazy about web usability and accessibility - so crazy that he went and started his own web usability and accessibility consultancy to help make the Internet a better place for everyone. He knows an awful lot about the Disability Discrimination Act and spends much of his time working on the world’s most accessible CMS.

• 0 Comments

If you have ever read an article on eBay, you’ll have discovered the type of income people earn - it isn’t strange to find out about people earning thousands of dollars per month on eBay.

Next time you are surfing the eBay site, check out how many PowerSellers there are: you’ll find quite a few. Now think about the fact every single one of one of them must be making at least $1,000 per month, as that’s eBay’s requirement for becoming a PowerSeller. Silver PowerSellers make at least $3,000 monthly, while Gold PowerSellers make more than $10,000, and the Platinum level is $25,000. The top level is Titanium PowerSeller, and to measure up you must make at least $150,000 in sales each month!

It’s hard to believe that Ebay has been around for ten years. eBay started in September 1995, by a man named Pierre Omidyar, who was residing in San Jose, California. He envisioned his site - formerly known as ‘AuctionWeb’ - to be an internet mart, and composed the first code for it in one weekend. It was one of the first sites of its type on the planet. The name ‘eBay’ follows from the domain Omidyar applied to his internet site His company’s name was Echo Bay, and the ‘eBay AuctionWeb’ was formerly just one part of Echo Bay’s website at ebay.com. The first product ever traded on the site was Omidyar’s defective laser pointer, which sold for $14 .

The web site rapidly became hugely popular, as vendors arrived to auction off all sorts of strange things and buyers actually purchased them. Relying on faith appeared to work out outstandingly well, and implied that the web site could just about be left alone to run itself. The internet site had been configured from the beginning to take in a small fee on every sale, and it was this revenue that Omidyar applied to finance AuctionWeb’s expansion. The fees speedily totaled up to more than his salary at the time, so he resolved to quit his job and devote attention to the site full-time. It was at this point in time, in 1996, that he added the feedback capability, to let buyers and sellers rate one another and make purchasing and trading safer.

In 1997, Omidyar modified AuctionWeb’s - and his company’s - name to ‘eBay’, which is what people had been using to refer to the site for awhile. He started to spend a great deal of money on promotion, and had the eBay logo created. A milestone was reached in this year - the one-millionth item was sold (it was a miniature version of Big Bird from Sesame Street).
Then, in 1998 - the peak of the dot com company boom - eBay became big business, and the investment in Internet businesses at the time allowed it to bring in senior managers and business strategists, who took in public on the stock market.

It began to encourage people to trade more than only collectibles, and rapidly morphed into a huge site on which you could trade anything, big or little. Different from the other websites, though, eBay endured the final stage of the bonanza, and is still going strong nowadays.

1999 saw eBay go worldwide, unveiling sites in the UK, Australia and Germany. eBay purchased half.com, an Amazon-like internet retailer, in the year 2000 - the same year it inaugurated Buy it Now - and bought PayPal, an internet payment service, in 2002.

Pierre Omidyar has now cleared an estimated $3 billion from eBay, and still serves as Chairman of the Board.There are now literally millions of items bought and sold every day on eBay, all over the world. For every $100 spent online worldwide, it is estimated that $14 is spent on eBay - that’s a lot of laser pointers.

The fact that these PowerSellers are around gives you some idea of the money possibilities on Ebay. Most of the power sellers never intended to even launch a commercial enterprise on eBay - they merely began trading a couple of items, and then continued. There are quite a lot of people whose full-time job is merchandising items on eBay, and some of them have been working at it for years now. Can you believe that? Once they’ve purchased the merchandise, everything else is basically pure profit for these people - they don’t need to spend money on any business premises, employees, or anything else. There are multi-million dollar commercial enterprises earning less in genuine net income than eBay PowerSellers do.

Even if you do not want to resign from your line of work and really try for it, you can use all the same eBay to make a substantial supplemental income. You can package customer purchases during the week and bring them to the local post office for shipping each Saturday. There are few other things you could be doing with your free time that have anywhere close to that kind of money-making potential.

What’s more, eBay could care less about who you are, where you reside, or if you are good-looking. Some PowerSellers are very old, or very young. Some live out in very rural areas where selling on eBay is one of the few options to agriculture or being very impoverished. eBay levels the playing field and removes the roadblocks to earning that the real world constantly erects. There’s no job interview and no traveling back and forth involved - if you can post items on the site, you can make it happen!

Put it this way: if you know where to acquire something fairly inexpensively that you could sell, then you can sell it on eBay - and because you can always get discount rates for mass purchases at wholesale, that’s not hard. Purchase a job lot of something in-demand inexpensively, sell it on eBay, and you are earning cash already, with no set-up expenses.
If you wish to try it out before you commit to really purchasing anything, then you can just sell unwanted objects that you’ve got sitting around in the home. Explore that closet full of items that you never use, and you’ll in all likelihood find you’ve got a couple of hundred bucks’ worth of stuff lying around in there!

This is the beauty of eBay: there is always someone who wants what you’re selling, whatever it might be, and because they have come searching you out, you don’t even need to do anything to get them to buy it.

• 0 Comments

One of the most popular features of Internet portals, websites, pages and even emails is a frame that features an organized list of news headlines and periodic updates from other web sources. Really Simple Syndication, formerly “Rich Site Summary” or simply, RSS makes this possible.

Most users visit a lot of websites whose content continually change, such as news sites, community organization or professional association information pages, medical websites, product support pages, and blogs. As Internet surfing became an intrinsic part of business and leisure, it became important to get rid of the very tedious task of repeatedly returning to each website to see updated content.

RSS easily distributes information from different websites to a wider number of Internet users. RSS aggregators are programs that use RSS to source these updates, and then organize those lists of headlines, content and notices for easy reading. It allows computers to automatically retrieve and read the content that users want, then track changes and personalize lists of headlines that interests them.

The specially made computer programs called “RSS aggregators” were created to automatically find and retrieve the RSS feeds of pre-selected internet sites on behalf of the user and organize the results accordingly. (RSS feeds and aggregators are also sometimes referred to as “RSS Channels” and “RSS Readers”.)

The RSS aggregator is like a web browser for RSS content. HTML presents information directly to users, and RSS automatically lets computers communicate with one another. While users use browsers to surf the web then load and view each page of interest, RSS aggregators keeps track of changes to many websites. The titles or descriptions are links themselves and can be used to load the web page the user wants.

RSS starts with an original Web site that has content made available by the administrator. The website creates an RSS document and registers this content with an RSS publisher that will allow other websites to syndicate the documents. The Web site also produces an RSS feed, or channel, which is available together with all other resources or documents on the particular Web server. The website will register the feed as an RSS document, with a listed directory of appropriate RSS publishers.

An RSS feed is composed of website content listed from newest to oldest. Each item usually consists of a simple title describing the item along with a more complete description and a link to a web page with the actual content being described. In some instances, the short description or title line is the all the updated information that a user wants to read (for example, final games scores in sports, weblogs post, or stock updates). Therefore, it is not even necessary to have a web page associated with the content or update items listed — sometimes all the needed information that users need would be in the titles and short summaries themselves.

The RSS content is located in a single file on a webpage in a manner not very different from typical web pages. The difference is that the information is written in the XML computer code for use by an RSS aggregator and not by a web user like a normal HTML page.

There are 2 main parts that are involved in RSS syndication, namely: the source end and the client end.

The client end of RSS publishing makes up part of the system that gathers and uses the RSS feed. For example, Mozilla FireFox browser is typically at the client end of the RSS transaction. A user’s desktop RSS aggregator program also belongs to the client end.

Once the URL of an RSS feed is known, a user can give that address to an RSS aggregator program and have the aggregator monitor the RSS feed for changes. Numerous RSS aggregators are already preconfigured with a ready list of RSS feed URLs for popular news or information websites that a user can simply choose from.

There are many RSS aggregators that can be used by all Internet users. Some can be accessed through the Internet, some are already incorporated into email applications, and others run as a standalone program inside the personal computer.

RSS feeds have evolved into many uses. Some uses gaining popularity are:

·For online store or retail establishments: Notification of new product arrivals
·For organization or association newsletters: title listings and notification of new issues, including email newsletters
·Weather Updates and other alerts of changing geographic conditions
·Database management: Notification of new items added, or new registered members to a club or interest group.

The uses of feeds will continue to grow, because RSS aggregators make access to any information that individual users like more convenient and fun.

• 0 Comments

Search engine spiders are by far one of the most useful things to come around in the last 10 years of the internet. They are useful not only to the web sites (Google and many others) that use them, but also to people who are searching for a particular site and those who run web sites. Spiders allow your site to be seen by the millions of people who use search engines every day. In this newsletter, we will discuss what search engine spiders do, how they work, and how to set up a robots.txt file and upload that to your site to keep spiders from visiting your site.

What are spiders and what purpose do they serve? Spiders are essentially programs that “crawl” sites and report back to their superior (Google or whatever search engine they were created for) what their findings are. Their purpose is to make it easy for sites to get listed in search engines.

You might be wondering, what does it mean to “crawl” a site? Well it means to visit and site and copy the information.

How do spiders work? Spiders work by finding links to web sites, visiting those web sites, going through the content of a web site and then reporting the content of the site back to the database of the site which they are working for. Google spiders, thus, crawl sites and report the information back to Google’s database. From there, the information is added to Google’s search engine, and the site then shows up in Google search results. Much the same process happens with any other search engine spider.

How can I keep spiders from visiting my site? You might be thinking, “Why would I want to keep such a useful thing from visiting my site?” Well, the short answer is, sometimes site owners don’t want the spider to crawl on a particular part of their site. Some site owners don’t want spiders to crawl their site at all. The reasons for not wanting a spider to crawl a site or a particular part of a site vary, although most of the time it is because the site is either completely spam or features a page or two of spam.

If you’re one of those site owners, then you’ll want to create and upload something called a robots.txt file. We will briefly go over how to do this.

A robots.txt file. The whole purpose of a robots.txt file is to tell a search engine spider not to crawl the site or part of the site on which the robots.txt file resides.

Creating the file. Creating a robots.txt file that blocks out spiders is easy. First, open up notepad. Then, copy and paste the following:

User-agent: * Disallow: /

Once you’ve done that, save the file as “robots” and as a .txt file.

Uploading the file. Next, you will upload the file to the part of your site which you do not want the spider to visit. So, if you don’t want them to visit yoursite.com/news/, you’ll upload robots.txt to the news folder. If you don’t want the search engine spider to visit your site as well, upload robots.txt to your index folder. That’s all there is to it.

Using the robots.txt file to make sure search engine spiders DO visit your site

Believe it or not, the robots.txt file can be used to both disallow and allow search engine spiders to crawl your site. Here’s how to create and upload such a file.

Creating the file
Open up notepad and copy and paste in the following:

User-agent: * Disallow: You’ll notice that the only difference between this and the earlier example is that Disallow: is not followed with /. If it were, that would tell spiders to go away. Once again, save the file as robots.txt.

Uploading the file
All you’ll do is upload the robots.txt file to the part of your site that you want the robot to pay a visit to. So if you want the robot to see the whole site, just put the robots.txt file right alongside the index file. And you’re done.
Creating and uploading a robots.txt file to help make sure spiders don’t miss your site is fast and easy. So what are you waiting for? Create and upload that file now!

• 0 Comments

Most affiliate entrepreneurs make real big money online from their home based affiliate online business. They know exactly about affiliate marketing promotion advertising for their home based affiliate online business. It is very challenge for new affiliate entrepreneurs or new business to grow and survive among a lot of competitors right now.

Now, I am going to give you one of affiliate marketing promotion advertising ways to promote your home based affiliate online business and earn money online from home. You’ll discover one of the most effective affiliate marketing strategies using for 2007.

READ THIS: If you are truly serious about your home based affiliate online business and looking for how to boost your affiliate commission.

Placing banner ads can be a highly effective affiliate marketing promotion advertising way to market your affiliate business on the Internet. Banner ads are essentially affiliate marketing promotion advertising banners which appear on a website, usually in the form of a combination of graphics and text, to encourage Internet users to click through these affiliate marketing promotion advertising banners to your website. The most common form of affiliate marketing promotion advertising banner ads is an affiliate marketing promotion advertising banner which appears on the top of a website and spans the width of the webpage. These affiliate marketing promotion advertising banners derived their name from the similarity to a banner but technically banner ads can come in a variety of shapes and sizes. This article will take a look at the effectiveness of banner as well as methods for placing these banner ads.

The affiliate marketing promotion advertising banner ads can be highly effective if used properly. However, placing your affiliate marketing promotion advertising banner ad all over the Internet with very little consideration to whether or not the location is likely to be beneficial to your affiliate business is not a good idea and can be a tremendous waste of money as well as other resources such as time and effort. Therefore business owners who are considering using banner ads to promote their business should spend some time to learn how to use banner ads effectively and to find ideal location for placing their banner ads.

The most ideal location for an affiliate marketing promotion advertising banner ad is prominently displayed on a website which receives a great deal of website traffic and also complements your products and services well without providing direct competition for your products or services.

My investigations show that displaying ads on the website with several experiments will give a great result on increasing the affiliate commission. Also, it shows that this approach is one of top three effective affiliate marketing strategies using for 2007. My highest recommendation is to try to place proper ads and test as your experiments. The format and placement of those ads are matter for your affiliate commission.

Final thoughts, when posting affiliate marketing promotion advertising banner ads, affiliate business owners should be aware of the effectiveness of the ads they place. They may choose to post different designs for their banner ad on different websites but they should monitor the results of their affiliate marketing promotion advertising to determine if one style is more effective than another. This information can be very important. If one style is enjoying a great deal of success while the other style is not, the business owner may wish to use the more successful style for all of their affiliate marketing promotion advertising banner ads or to redesign the less successful style to make it more appealing to Internet users.

Learn Affiliate Marketing from Ewen Chia’s training video sets. You’ll discover great affiliate marketing strategies, excellent tips, workable & proven techniques and step-by-step instructions on how to build highly profitable home based affiliate online business. Also, you’ll earn extra money from Ewen Chia while you are learning affiliate marketing from his videos. This is a golden opportunity for all affiliate marketing entrepreneurs to learn more how to go to the next level and earn top affiliate commission on the internet!

Get free report now to learn more about how to maximize your profits online through Pay-Per-Click online advertising and affiliate marketing. You’ll discover great tips, workable strategies, and inside secrets of how to drive more traffic and turn the visitor into the customer. Also, you’ll save your time for learning how to build highly profitable pay-per-click advertising online campaigns.

About The Author
Siripong R. or zMillionDollars is a recognized authority on the subject of making money online from home through highly profitable & successful home based business. His websites, www.iPayByClick.com and www.zMillionDollars.com, provide a wealth of informative articles and resources on everything you’ll ever need to know about earning money online.

• 0 Comments

Now I am going to give you the secrets of how to boost skyrocket your sales & profits online through two-tier affiliate programs. You’ll discover how to treat your sub-affiliate marketing entrepreneurs to increase your sales and profits online.

READ THIS: If you are truly serious about how to boost skyrocket your sales and profits in your home based affiliate marketing business and your (two-tier) webmaster affiliates programs.

A running two-tier webmaster affiliates program is easier than ever with the software and help available now. However, keeping your sub-affiliate marketing entrepreneurs motivated and selling isn’t quite as easy to do. If the success of your home based online business rests upon how your sub-affiliate marketing entrepreneurs perform, you make want to provide them with the right tools to get the job done successfully.

If you are already running two-tier webmaster affiliates programs, you should know that a large number of people who sign up for your two-tier webmaster affiliates programs never to be heard from again. You can however, reduce the number of non productive sub-affiliate marketing entrepreneurs by remaining in touch with them constantly.

Remind them of their usernames and passwords, and tell them where to log in to check their stats or get creative. Always keep them informed of new product lines or changes in policy or procedures.

I am sure that the key to motivate your sub-affiliate marketing entrepreneurs is making sure that you stay in touch. Always pay attention to who your top sellers are, and make sure that you contact them on a regular basis. Pay attention to which your worst producers are, and make sure you stay in touch with them constantly as well.

The main reason most sub-affiliate marketing entrepreneurs don’t perform that well is because they don’t possess any leadership or guidance. This can easily be changed by writing a marketing course, which you can even offer for sale to non sub-affiliate marketing entrepreneurs, although you should make it available to your sub-affiliate marketing entrepreneurs at no charge.

You should also provide new material for your sub-affiliate marketing entrepreneurs to use on a regular basis. Providing them with nothing but a text link and one banner just doesn’t generate much excitement at all.

Provide your sub-affiliate marketing entrepreneurs with sales letters, reviews, ads, banners of different shapes and sizes, and anything else that comes to mind. Be sure that your sub-affiliate marketing entrepreneurs know the material is there for them to use. Always listen to your sub-affiliate marketing entrepreneurs, and get the proper feedback on your material.

You should also hold virtual meetings. Set up chat rooms or forums where your sub-affiliate marketing entrepreneurs can attend virtual meetings on a weekly basis. Be sure to answer any questions, have motivated speakers, and anything else you can think of to make the meetings more motivated.

Given your sub-affiliate marketing entrepreneurs the credit they deserve is also very important. Each month, you should give credit to the best performers in your affiliate newsletter. Give small bonuses to those that perform well, and you can even set up a payment structure that rewards higher commissions and bigger volumes of sales.

Always make sure you do everything you can to help your sub-affiliate marketing entrepreneurs succeed and make money in your two-tier webmaster affiliates program. If they are making money - you are succeeding and making money as well. In reality - their success is your success.

Final thoughts, I highly encourage all affiliate entrepreneurs to take care of their sub-affiliate marketing entrepreneurs. The more you care, the more your good relationship is. There are many ways to give rewards to your top sub-affiliate marketing entrepreneurs. I believe that you have learned some ways in this article.

About The Author
Siripong R. or zMillionDollars is a recognized authority on the subject of making money online from home through highly profitable & successful home based business. His websites, www.iPayByClick.com and www.zMillionDollars.com, provide a wealth of informative articles and resources on everything you’ll ever need to know about earning money online.

• 0 Comments