Updated July 29, 2010

Have you been using wrapper DIVs to achieve rounded corners in your designs? Do you wish you could use CSS3 multiple backgrounds and stop inflating your markup? You can, using this jQuery library. Multiple backgrounds have been supported by Webkit-based browsers like Safari and Chrome for a long time. Firefox only recently implement them in version 3.6. Of course, Internet Explorer has never supported multiple-backgrounds. This library brings support to Internet Explorer and Firefox by reading the CSS code from style and link tags.

background: url(left.gif) no-repeat 0 0, url(right.gif) no-repeat 100% 0, url(middle.gif) repeat-x 0 0;

CSS3 introduced the ability for multiple backgrounds on elements. Using this new feature is very simple; simply place each background like you normally would and separate them with commas. CSS3 browser support extends to background-image, background-position, background-repeat. This library only implements its own property for the shorthand style background property. The W3C provides information about multiple backgrounds.

1. Browser Support
2. Example Usage
3. Public Functions
4. Change Log
5. Known Issues
6. Download

Browser Support

Example Usage

Including the Script

All that needs to be included is the jQuery library and this script for these features to work. No extra Javascript coding is required. The minified library is only 9.6kB!

<script type="text/javascript"
           src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.multiple-bgs.js"></script>
		

Writing the CSS

Multiple backgrounds using the background property are read using this Javascript library. Notice how hover and active states are supported.

#ex1 {
    background: url(middle.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right.gif) no-repeat 100% 0,
                url(middle.gif) repeat-x 0 0;
}
#ex1:hover {
    background: url(middle-hover.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left-hover.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right-hover.gif) no-repeat 100% 0,
                url(middle-hover.gif) repeat-x 0 0;
}
#ex1:active {
    background: url(middle-active.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left-active.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right-active.gif) no-repeat 100% 0,
                url(middle-active.gif) repeat-x 0 0;
}
		

View More…

Public Functions

These are only required if you need to change the rules that are applied or apply the rules again (when loading DOM through AJAX for example).

$.fn.multipleBgReadCss(conts,prop,path)

Read in a block of CSS while looking for a multiple backgrounds

• conts—block of CSS to read in
• prop—which property to look for, only ‘background’ supported at this time
• path—path to prepend to image urls to make relatives work, pass false or “” to disable

$.fn.multipleBgApplyCss()

Apply loaded CSS properties to the elements on this page

$.fn.multipleBgApplyBg(selector,attr)

Apply a specific background to a selector/element.

• selector—selector/element to apply the background to
• attr—which state of the element to apply (Possible values: jQueryMultipleBgStaticSelector, jQueryMultipleBgHoverSelector, jQueryMultipleBgActiveSelector, jQueryMultipleBgFocusSelector)

$.fn.multipleBgRules

Access the loaded rules from initialization/add your new rules to this object

$.fn.multipleBgFixFFLineHeight()

Reads the height CSS property on this element and centers the text vertically by setting the padding-top value.

• Example 1: Apply to all text input fields on page.

   $("input[type=text]").each($.fn.multipleBgFixFFLineHeight);

• Example 2: Apply to a specific field.

   $.fn.multipleBgFixFFLineHeight.call(myInputToFix);

Change Log

100728

• Fixed relative paths from remote CSS files. Now paths are not just relative to the document.
• Now also supports multiple selectors for one CSS rule.

100727

• Tested with many elements. I ran a profiler in IE and both 7/8 were pretty close to the same speed and proportional to the number of layers applied as all the time was spent in DOM manipulation in the addLayer function. IE took about 1000ms to load 228 layers onto a modified version of this example.
• Line height fixed on Firefox <=3.5 by adding padding-top to center the text vertically based on the height CSS property.

100726

• Added selector precedence (including !important)
• The number of multiple backgrounds may change in each state/class
• input elements have wrappers on the outside now
  • CSS properties passed through to wrappers: margin, display, position, top, left, right, bottom, float, clear, z-index^{(added 100727)}
• :focus psuedo-class support added

Known Issues

• Doesn’t support inline styles—only style and link tags
• If you add more backgrounds in a :focus psuedo-class than on the static class, IE will require a second click (not double-click) to put the focus on the input.
• Input fields must be display:block and have a set width.
• URLs to images must be relative to document as styles become inline in the translation.
• Input fields must explicitly have type=”text” to be picked up by the Firefox input line height fix function.

Download

jquery.multiple-bgs.zip (24.5kB) – Package containing this document, example images, source code, minified library

Without being well-versed in the process of creating a new interactive web site or web-based application, getting started planning your site is difficult. By understanding what goes into the creation of a dynamic web site, it will become easier and faster to explain the structure of your web site in a way that will make sense to everybody involved from the designers to the developers to the end users.

How do I get started planning?

At the core of any good application is a solid structure. The structure defines all of the objects that are represented on your website and how they fit together. Objects on your website will mirror the objects in your business. As web designers, we have knowledge of how to create a useful website but not how to run your business. This model should contain all of the objects necessary for somebody to understand what your application does and the connections between the objects should provide how the application is intended to work.

The model for your application can be compared to the framing of a house. A solid frame is required before continuing construction of the house. Likewise, it can be difficult to go back and move a wall after the next steps in the construction have taken place.

By working out this model before construction begins, you can be assured that your application contains everything that you need to communicate with your users. A solid plan guarantees that neither party needs to waste time re-clarifying the purpose of the site or a specific function further down the road.

Creating a Model

Objects represented in your database can be anything that you need to keep track of. In this article, we are going to be creating a model for an application to keep track of employee hours and their activities for a delivery company. We will be keeping track of office locations, managers, delivery drivers, their time sheets and their meetings. Each type of object can contain properties for storing more information about the object. The time sheet object may contain properties to further describe the hours worked for a day such as whether or not to deduct time for a lunch break or if these hours are to be counted as overtime.

In the diagram above, objects are arranged vertically with parent objects on top of child objects: a user will belong to a user type and a location, a time sheet will belong to a user, locations contain links to both users and finances, etc.

Web applications can allow for multiple types of users to log in and be presented with different information. In our time sheet application we have two types of users: managers and administrators. Managers have the ability to log in and input time sheet hours and meeting information for their own employees. Administrators can log in to add and delete managers, their delivery drivers, and even their time sheets. Planning out these roles on the website are crucial to ensuring proper function and security.

When moving to the next steps in the design of your web site it is useful to provide estimated quantities of each object type. By giving this information up front we are able to make the best decisions on how to design the software and what type of hardware to run it on. Some quantities are easy to figure out; in our time sheet application, each employee will have one time sheet for each day. Some quantities are specific to your operation; an application to keep track of fifteen employees will require less resources than fifteen thousand employees.

Connections

Just knowing what objects are going to be represented in an application is not enough. In order to figure out how the application is going to work, the connections between them must also be defined. There are three types of connections between objects that are useful in planning your model.

One to Many

The most common type of link between objects is when an object contains links to many of another type of object. In our time sheet application, each user will have many time sheets and each time sheet will belong to an user.

One to One

The simplest type of connection is when one object of a particular type is linked directly to one object of another type. If we wanted to keep track of which computer an employee is currently using we would need to state each employee has one computer. The computer object would contain properties such as the computer’s serial number and what programs are installed on it.

With connections that define when one object has only one of another object it may seem like it would make sense to combine object types. It may seem possible in the above example to keep track of the employee’s computer serial number as simply a property of the employee. This type of oversimplification can cause problems when you want to keep more information about the computer or transfer the computer to another employee.

Many to Many

The last type of connection is when one type of object is connected to connected to another type of object many times in both directions. If we wanted to expand our time sheet application to include projects we would need to link an employee to many projects and each project to many employees.

What does a completed application look like?

Designing the site is where our expertise in user interface design can transform your model into a streamlined interaction for your users. After agreeing upon a solid model that covers all aspects of the site it is possible to make useful interfaces for your users to access your website. Your model will allow us to allow us to find the easiest way to transmit the necessary information from your website to your users and from your users back to your website.

We can begin calculating the best ways for people to interact with your web site in order to minimize input errors and eliminate confusion about how to use the site. Most websites begin with some wire frame diagrams on paper to decide what information is going to be on each page.

Our work designing the website is similar to figuring out the interior design of a house. The framing to define the rooms is necessary before deciding where to put the furniture in a room. Multiple kitchen arrangements will yield varied productivity just as different user interfaces will effect how successful users are at interacting with your website.

Our recently completed Creation Gardens Web Application provides their business with a tool for automating their time sheet system in a simple, usable interface.

After the interface has been decided upon, the site can be completed. Similar to the plumbing and electrical systems of a house, the back end system is the last step to creating a fully functioning website.

Chico Web Design offers an assortment of design services including website design, website development, print design, and web hosting for the greater Sacramento area. While companies are marketing their businesses and spending money on traditional advertisements, Sacramento companies can hire Chico Web Design to design a website. theWebsites are the least expensive way to advertise and the easiest way for customers to obtain information about your business.

Chico Web Design can provide custom website designs for Sacramento in the following industries:

• Financial
• Insurance
• Agriculture
• Public safety
• Online retailer
• Music industry
• Boutiques
• Law Firms
• Architecture Firms
• Restaurants
• Construction Firms
• Much, much, more

We work closely with our design clients to get the appearance and functionality that they are looking for, insuring our customer’s satisfaction.

Sacramento Web Development

Chico Web Design has a experienced web development team that can apply your business requirements into a fully automated, easy to use, business solution. We have the advanced tools to help you manage your content, place inventory online, or craft an online retail experience for your customers. We make it easy to promote your business and maintain your website with little to no knowledge of HTML. Our content management tools and custom built framework allows administrators too add content, photo galleries, current news, web blog entries, calendar events, and much more. With the click of a mouse you can log into your secure website tools and change the content from anywhere, on any computer, at anytime.

Sacramento Graphic Design

Chico Web Design has the creativity for your business to give it the edge over your competitors when it comes to print marketing collateral. From logo design to tradeshow booths, we have professional and knowledgeable designers who have experience in designing just about anything. Business cards design, T-shirt design, magazine ads, even custom gift certificates, we will work closely with you and your business to get your ideas and turn them into a reality.

Sacramento Web Hosting

Not only do we offer web design, print design, and web development services, but we also specialize in web hosting in Sacramento. In order for your business website to be seen on the web, the website we create for your business needs to hosted on a web server. Our servers, which are multi-homed, 16 core servers, will make sure that your website loads at lighting speeds. We offer both Linux and Windows based hosting solutions along with shared hosting. Chico Web Design has the capacity to manage dedicated servers as well as co-locate multi-tiered solutions with our data center partners in Sacramento California. We have a full time server manager to proactively maintain all web servers. We also are prepared for anything that happens unexpectedly, so we perform offsite backups on a nightly, weekly, and monthly basis to protect your data.

Client: My Independent Contractor
Location: Chico, CA
Industry: Independent Contractors, Construction
Spotlight: Create a web site which allows independent contractors to create their own website
Technologies used: PHP, MySQL, HTML & CSS, JavaScript, Flash, XML

Read more about My Independent Contractor

Client: Legacy By Design
Location: Chico, CA
Industry: Agricultural/Financial
Spotlight: Agicultural Succession Planning

Technologies used: PHP, MySQL, XHTML & CSS, XML, JavaScript

Read More About Legacy By Design

Chico Web Design has reached an agreement with Tecmo Games to create a community driven website for Tecmo Bowl. Chico Web Design will work closely with the marketing team at Tecmo to create a visually pleasing and easily maintainable website.

Years ago, there was only one web browser that mattered, Internet Explorer! I know, shame on me. Today, you say the “IE” word around any web designer and they will cringe with bitter angst due to countless hours spent staring monotonously at their monitor trying to figure out WHAT IS WRONG!

With word of Google Chrome entering into the web browsing market, it really put a sour taste in my mouth. As designers, we follow a specific set of web standards to ensure that our websites will look identical from browser to browser and operating system to operating system. The problem is, with all of the newcomers to the web browsing industry; we have to keep debugging new issues!

Let’s back up a bit. Internet Explorer 6, in its day, was the only web browser to use. Microsoft had a monopoly on the web browsing market, so whatever Internet Explorer did became the standard. Because of this, sites were built specifically for Internet Explorer 6 and did not follow valid HTML rules, and bad code was interrupted as “working” code.

Then comes Mozilla’s Firefox into the equation! Great! Finally a web browser that follows the W3C Standards. Mozilla decided that it was going to follow the proper rules set out by all of the standards boards. Now the fun begins!

So, bring in Firefox 2, don’t forget that every browser will need some sort of upgrade at one point. Now we have Firefox 3! Great, IE 6 is around but don’t worry, IE 7 will maybe kinda sorta help clean up some of those bugs. Oh no, here comes IE 8 which is released in Beta! You also can’t discount all of the new users who have moved over to Apple because they have Safari 2 on their machines which has just been replaced by Safari 3! If you’re head’s not spinning already, don’t worry because now we get Google Chrome, WHICH by the way, is only released for XP and Vista, not Apple. Did I mention Apple iPhones or BlackBerrys?

That was a mouth full!

The issue isn’t that we have a plethora of great new browsers; the issue is that the old disheveled web browsers are still being used.

According to w3schools.com, 24.5% of all users online are using IE 6, as of August.

On a daily basis, we consistently have to code, re-code, hack, and re-hack valid XHTML & CSS to fit every browser across the board. The biggest of which, happens to be Internet Explorer 6.

As a project manager and designer, I can honestly say that for an average website, it can take 6-8 hours to create XHTML and CSS for basic templates. Then, it will approximately take another 2-3 hours, depending on the complexity of the site to get it to work in all browsers, specifically IE 6. We’ve spent countless hours, re-coding for IE6, so much so, I probably don’t even want to know the true number.

We keep adding web browsers to the equation, but haven’t taken any away yet. With 24% of the market using a tool like IE 6, which must be getting close to 8 years old, we’re still forced to find new ways to hack backwards and make them work on old browsers.

Personally, I use Firefox 3 and tend to like it the most. Safari has had some compliancy issues in the past with forms and simple WYSIWYG editors that really turned me off of their browser.

I wish I had a solution and could wave my magic browser wand and get everyone to upgrade form IE 6, but who knows when we’ll get to stop pulling our hair out supporting IE 6.

Can’t we get everyone to upgrade from Internet Exploder 6!

I want to preface this discussion by stating that this topic is for advanced Ecommerce websites with multiple categories and product quantities ranging from 10 – 5,000.

We often get requests to bid Ecommerce websites here at Chico Web Design.  With every inquiry we get, we tell all our potential clients the same thing, “Every web site is different, and the cost is based on your needs, feature set, and business requirements”.  Believe it or not, it’s a true statement! When you’re looking for a car, you can’t pick up the phone and call your local Chevrolet dealer and say, “how much for a blue vehicle”, right?  Just as the car dealer would say, we would also explain, “we need to know more information”!  Below are some common functionality questions that we ask when speaking to a client for the first time about their ECommerce site.

Ecommerce Questions

1. Site Structure – Do you have any ideas of what you’d like your product catalog to look like?  I.E. If you have a retail store, sample categories would be something along the lines of, Handbags, Hoodies, Pants, Tops, etc.
2. Shipping – How would you like to handle shipping, flat fee ($6.00 per product), table rate (0-$24.99: $4.95, $24.99-$99.99: $5.95) or anything different? Express shipping?  2 or 3 Day shipping? International shipping?  Free shipping?
3. Wish list – Would you like to allow users to create a wish list and then send their list of products to a friend or family member?
4. Recommended products – Recommending products to cross sell with a product of interest is another value added option you may want to think about.
5. Shop by Brand/Manufacturer – Would you like users to sort by brand or manufacturers?
6. Tell-a-Friend – Would you like to allow users to send product links to a friend via HTML Email?
7. Featured Products – Featuring products is a great way to capture interest in specific inventory!  If this is something of interest, where would you like them place?  Rotating on the front page?  Above each category?
8. Sale products – Would you like a link to sale items?  We can implement sale functionality which would allow you to mark items already in inventory for sale.
9. Coupons – Do you plan on offering discount coupons?  Do you want to offer gift cards?
10. Newsletters – How often or do you want to capture emails for newsletters?
11. Taxes – Does your state have any special tax rates on specific products or product categories?

This is by no means a full list of questions to ask for every Ecommerce web site, but these are some basic questions to ponder when you are searching for a design and development firm to bring your dream business from a thought to reality.

In the works for over a year, the official website for Saves The Day has finally been released to the public. Saves The Day, under label Vagrant Records, just released their new album “Under the Boards” and is touring the country for their new Bug Sessions album.

With strategic partners, Voltaic Brothers and Syosoft, Chico Web Design came up with a content management solution for the band to create and manage a community of fans to share videos, music, and photos.

My same theories can be used to determine your site requirements. The context in which we will be discuss dynamic and static is merely for website content.

Static

Static content is often referred to as an “Online Brochure”; the content is there for the taking! A static website is a great, inexpensive tool to convey the basics of your business to an end user, create/recreate an online presence to keep up with or surpass your competitors, or simply post your contact details. When I think of a static website, I think of a 5 page website. For Example:

• Home
• About us
• Contact us
• Products/services
• Miscellaneous page (testimonials, terms of service, missions statement, etc)

A lot of web sites can be broken down into this static category, as a matter of fact Basque Norte’s brand new site couldn’t convey a static web site example any better.

Dynamic

Dynamic content can be defined as content, products, photo’s, etc that are constantly changing depending on user interaction. For example, when you think of an e-commerce website, you first select a category, perhaps a sub-category, then you see a list of products. Once you see a product you are interested in, you select the details to determine whether or not you would like to purchase that item. Well, you may not know it, but you’ve just browsed through what would be considered a dynamic web site.

Uses for dynamic content:

• E-Commerce
• Easily Managed Photo Gallery
• Content Management
• Online Forms
• Career Postings
• Etc

The uses are virtually endless. You can introduce infinite dynamic possibilities to the modern day website. The portfolio section (http://www.chicowebdesign.com/portfolio) of the website you are now browsing is dynamic and it allows us to easily add and maintain new and existing portfolio items with ease.

Dynamic content, for the context of this discussion, is pulled from a database. Without making you fall asleep (although probably too late!), a dynamic web language such as PHP interacts with a database to withdraw pertinent information based on what the end user selected or clicked on.

Bringing it back to our e-commerce example, the database has relationships between products and categories so when the user clicks on a particular category it knows what products to display to the user. This is a typical dynamic interaction between the user and database.

Advantages of dynamic web sites
First and foremost, one of the largest benefits to developing a dynamic site is the maintainability. Now that the content is being stored in a database, we can easily design an interface between the administrator and the database for any novice to maintain the data, products, images, etc on there website.

It also allows us to structure or retrieve the information any format you’d like to display it to the end user. Let’s say for example you want ten products per page, 35 products per page, or view all, it can all be done since the information is already being stored in the database. It makes loading new products, photos, content to your website a snap.

Remember, content is what is going to drive people to your website. Having up to date, easy to read and understand content is what’s going to keep them coming back or call your business.