A link is either one color or another. A text field is either one size or another. A photo is either transparent or opaque. No in-betweens from one state to the next. No transitions.

This has led to most web pages feeling abrupt, with elements shifting and changing ungracefully.

Yes, we can use DHTML and leverage the jQuery library for transitions, but this requires a lot of code for something that should be very simple.

What we need is a quick and easy way to add simple transitions to the page and in this article you’ll find useful information about CSS transitions and how to use them.

A few months back, I stuck my foot in my mouth by suggesting that designers should start using the new CSS 3 techniques that allow them to do some of the basic styling that they’ve been pleading for. The only issue: none of them worked in Internet Explorer. Nope, not even IE8.

Some readers felt that suggesting techniques that around 75% of audiences would not be able to see was imprudent.

To those readers I say, ‘Hold onto your hats’, because I’m going to introduce you to another new CSS property that allows you to add transitions to any element with only a couple of lines of code.

CSS transitions are being introduced right now in CSS Level 3 but have already been added as an extension to Webkit. Right now that means they work only in browsers based on Webkit, including Apple Safari and Google Chrome.

Where CSS Transitions Come From

Transitions have been a part of Webkit for a while and are the basis of a lot of the cool things that the Safari UI can do that other browsers cannot.

But the W3C CSS Workgroup resisted adding transitions to its official specs, some members arguing that transitions are not style properties and would be better handled by a scripting language.

But many designers and developers, myself included, argued that these are in fact styles— only dynamic styles, rather than the traditional static styles that so many of us are used to.

Fortunately, the argument for dynamic styles held the day. Last March, representatives from Apple and Mozilla began adding the CSS Transitions Module to the CSS Level 3 specification, closely modeled on what Apple had already added to Webkit.

A Brief Note on Design Enhancements

Before we continue, let me emphasize one point: never rely on styles for website functionality if the styles are not browser interoperable (i.e. available on all common browsers).

One more time for those who missed it: never rely on styles for website functionality if the styles are not browser interoperable.

That said, you can use styles, such as transitions, as design enhancements to improve the user experience, without sacrificing usability for those who cannot see them. This is okay as long as you could otherwise live without the transitions and users can still complete their tasks.

First, a Few Transition Ideas

CSS transitions will not replace all uses of DHTML, but here are a few ways to enhance your design in browsers that support transitions, without ruining it for the rest of your audience.

You will need to view this page in Apple Safari 3+ or Google Chrome to see these transitions work. Both browsers are available in Mac and PC flavors.

Roll-Overs

The most obvious use for transitions is to highlight elements (whether links, tables, form fields, buttons or something else) when the user’s mouse hovers over them. Transitions are a great way to give the page a smoother look.

Example #1

Drop-Down Menus

Pure CSS menus are easy to accomplish, and transitions let you give menus slide-down and highlighting effects.

Example #2

Animation

You can move an object between two points on the page and use transitions to animate its movement.

Example #3

Click & Hold!

Transitions, States and Actions

But hold on a minute there, Tex. Before diving into transitions, we have to understand the various states to which an element can transition.

States define how a particular element currently interacts with the user or the page, and they are specified in CSS using the pseudo-classes. For example, when the user hovers over an element, that element would be styled with the hover pseudo-class.

Transitions work by changing a style over a period of time between different element states. For example, the color value of the default state of an element will pass through intermediate colors in the spectrum before appearing as the color value for the hover state.

A Simple Transition

Let’s consider a simple transition from one color to another when the user hovers over a link. Like any other CSS property, transitions are added directly to the selector that it is to be applied to. The property can then take one of following four values.

CSS property
The property that is to be altered (for example, color). See the table below for a list of all of the CSS properties that can be transitioned.

Duration
How long the transition will last, generally in seconds (for example, .25s).

Timing function
Allows you to control how the duration is timed. Rather than using a simple linear count, you can speed up or slow down the transition or even specify a beat or count (for example, linear). More on this later in the article.

Delay
How long to wait between the action and the beginning of the transition, usually expressed in seconds (for example, .1s). This value can be omitted if you don’t want a delay.

Because the transition property started out as a Webkit extension, we have to include both the transition and -webkit-transition properties for backwards compatibility.

Let’s first add both of these properties to the :hover pseudo-class:

a:hover {
   color: red;
   -webkit-transition: color .25s linear;
   transition: color .25s linear;
}

Now, when a link is hovered over, rather than jumping from blue to red, it will transition for a quarter of a second through the intermediate colors.

Of course, we also want to transition back to the default link color, so we’ll add a transition to the :link (and probably :visited) pseudo-classes, with just a very brief delay (one-tenth of a second) before it fades:

a:link, a:visited {
   color: blue;
   -webkit-transition: color .25s linear .1s;
   transition: color .25s linear .1s;
}

Adding Multiple Transitions

Because a transition is a CSS property, if you add multiple instances of the transition property in the same rule, then the last one will override previous ones, rather than add to them. So in the following rule, the only transition would be the background color:

a:hover {
  color: red;
  background-color: rgb(235,235,185);
  -webkit-transition: color .25s linear;
  transition: color .25s linear;
  transition: background-color .15s linear .1;
}

Multiple transitions are added as a comma-separated list in the same transition property definition:

a:hover {
  color: red;
  background-color: rgb(235,235,185);
   -webkit-transition: color .25s linear, background-color .15s linear .1s;
  transition: color .25s linear, background-color .15s linear .1s;
 }

This will create both a color and background-color transition.

What Can Be Transitioned?

Almost any CSS property that has a color, length or position component, including many of the new CSS 3 properties, can be given a transition. One notable exception seems to be box-shadow.

Straight from the W3C’s Transitions spec, here is a list of CSS properties that can be given a transition, along with the aspects that are transformed. I’ve highlighted a few of the more useful properties.

Transition Timing and Delay

With transitions, you can vary the count rate, counting slower at the beginning and speeding up at the end, vice versa, or anything in between. CSS transitions come with five keywords for transition timing and allow you to specify values for your own timing curve.

A Universal Transition?

Transitions will quickly become standard operating procedure for all websites, enhancing user interface feedback.

To add ubiquitious transitions across your entire website, one option is to add a transition to the universal selector, similar to a CSS reset. This applies a default transition to all elements on the page, allowing you to keep a consistent transition:

*:link, *:visited, *:hover, *:active, *:focus {
   -webkit-transition:
     color .25s linear,
      background-color .25s linear,
     border-color .25s linear;
   transition:
     color .25s linear,
     background-color .25s linear,
     border-color .25s linear;
}

One argument against a universal transition, and indeed against using the universal selector for CSS resets in general, is that applying a style to every element on the page may slow down page rendering. However, I’ve never found any evidence that this is the case. Anyone know different?

Jason Cranford Teague is the author of more than 13 books on digital media, including Speaking In Styles: The Fundamentals of CSS for Web Designers. For more information on CSS and web typography, check out Jason’s new book, Fluid Web Typography. Follow Jason on Twitter: @jasonspeaking.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: f2cc9y

Go to Source

Users can search for every property listed on Realtor.com by price, location, property type, MLS ID number, square foot, lot size, open house events, distance from a user’s current location and age.

The real estate iPhone app allows users to send a link of a specific property via email, Twitter or Facebook to family, friends or a realtor.

"The Realtor.com iPhone app places the power of Realtor.com in the hands of millions of highly mobile consumers that depend on us to deliver the largest collection of properties with the freshest and most accurate information available on the market," said Errol Samuelson, president of Realtor.com.

"By combining our unmatched search power with the ability to instantly share listings and feedback by email, Twitter or Facebook from an iPhone, millions now have mobile access to a phenomenal property search experience superior to other apps already on the market. We expect Realtors and their clients will appreciate the ease and convenience that our app brings to their experience as they work together to find the ideal property."
 

Related Articles:

> New Google Phone Has Tech Community Licking Chops

> New Google Maps For Android Gets Experimental

> Apple Fans Respond To The "Droid Does" Advertising Campaign

Go to Source

Washington D.C. has filed a lawsuit against AT&T claiming that the telecom company should turn over unused calling card balances.

The attorney general’s office argues that “AT&T’s prepaid calling cards must be treated as unclaimed property under district law”, and thus the AT&T balances are Washington D.C.’s property if they have not been used for 3 years and the customer’s last known address was in Washington D.C.

If the case is won, it would be a major blow to AT&T: unused balances account for perhaps 5 to 20 percent of the calling card market, according to Reuters, which broke the news.

Tags: att, Washington DC

Go to Source

Go to Source

Since previous article about CSS text effects got really big attention I decided to research and find more interesting articles and websites just focused on CSS3, teaching you how to use it, showing pros and cons and much more. To be honest it’s hard for me to keep up with technologies myself, but we really cannot not to use those new great selectors to make our designs even more beautiful, user-friendly and lightweighted. However since HTML5 is sort of tied with CSS3, I will soon continue with HTML5 article as well, so don’t miss it and keep coming back! Enjoy!

1. Take Your Design To The Next Level With CSS3

In this article you’ll learn why CSS3 should be used and how web designers use it already in good way. Great article for getting you started with CSS3.

2. Push Your Web Design Into The Future With CSS3

Here are five CSS3 techniques snatched from the future that you can put into practice in your website designs today.

3. Super Awesome Buttons with CSS3 and RGBA

Learn how to create super cool, scalable buttons with CSS3.

View Demo

4. A Look at Some of the New Selectors Introduced in CSS3

5. CSS 3 Cheat Sheet (PDF)

This is printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification.(Download *pdf)

6. CSS3.Info

CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more. Also check excellent CSS3 Preview page there, which shows demos of new features.

7. Get Started with CSS 3

Beautiful CSS3 tutorial article explaining several new CSS3 features and giving solutions how to create them actually.

8. Introduction to CSS3 – Part 1: What Is It?

These six part series are providing an introduction to the new CSS3 standard which is set to take over from CSS2 from DesignShack.

9. Accessibility Features of CSS from W3

This document summarizes the features of the Cascading Style Sheets (CSS), level 2 Recommendation ([CSS2]) known to directly affect the accessibility of Web documents. Some of the accessibility features described in this document were available in CSS1 ([CSS1]) as well. This document has been written so that other documents may refer in a consistent manner to the accessibility features of CSS.

10. Progressive Enhancement with CSS 3: A better experience for modern browsers

In this article you will look at how you can use graceful (or, progressive) enhancement techniques to make use of CSS3 features in browsers that support them, while ensuring that your code will still provide a satisfactory user experience in older browsers that do not yet support those features.

11. Conversation with CSS 3 team

In this article, xhtml.com interviews Bert Bos, chair of the CSS Working Group at W3C, about the next release of the CSS specification and how past design decisions are influencing the future of CSS. This interview offers a rare opportunity to learn more about the inner workings and thought processes of the CSS Working Group at W3C.

12. Six Questions: Eric Meyer on CSS3

Great interview with Eric Meyer about CSS3.

13. The fundamental problems with CSS3

This article brings up several problems and issues with CSS3, interesting reading.

14. CSS3 Exciting Functions and Features: 30+ Useful Tutorials

In this post you will take a look at some interesting properties of CSS3 that you can put into practice in your website designs today.

15. Old School Clock with CSS3 and jQuery

16. The CSS3 border-radius property

One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS – no images needed.

17. Get the best out of CSS3

Craig Grannell turns into a cross between Jeffrey Zeldman and Russell Grant, taking a peek at what the future of CSS has to offer – with a little help from Opera, Safari and Firefox

18. How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

View Demo

19. Rounded Corner Boxes the CSS3 Way

20. #57: Using CSS3 by Chris Coyier

This screencast covers many of CSS3 techniques now possible, focusing on the ones that can be used for progressive visual enhancement. Border radius, @font-face, animations/transitions, text-shadow, box-shadow, multiple backgrounds, RGBa, gradients, border image.

21. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, your are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them.

View Demo

22. 11 Classic CSS Techniques Made Simple with CSS3

In this tutorial from Nettuts you will learn eleven different time-consuming effects that can be achieved quite easily with CSS3.

23. CSS 3 selectors explained – Overview of CSS 3 selector syntax

24. 3 Easy and Fast CSS Techniques for Faux Image Cropping

25. CSS3 Borders Preview

CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. Mozila, Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.

26. CSS3 property tests

27. CSS3 Background Images (Sizing & Multiple Imgs)

Background images / textures are being used and implemented in many ways, often adding the nicest of finishing touches to a website. It is now proposed that in CSS 3, we can apply background image dimensions as well as use multiple background images. Along with the +/- quick list of compatible browsers, here is how

28. Overview of CSS3 Structural pseudo-classes

29. 5 CSS3 Techniques For Major Browsers using the Power of jQuery

30. jSlickmenu: A jQuery plugin for slick CSS3 menus

View Demo

31. Multiple Backgrounds (CSS3)

32. CSS: border-radius and -moz-border-radius

33. Modernizr

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Related posts:

1. 55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection
2. 22 Advanced CSS Text Effects And Web Typography Tips
3. Google Adsense Monetizing, Traffic, Testing Tips, Tricks And Resources
4. 35 Websites To Teach You How To Use CSS Effectively
5. Easy Brush Text Nature Effect: Tutorial

Go to Source

Let’s start this list of tutorials with one that will definitely show you the potential of the text-shadow property. In this tutorial, you’ll learn how to create a stunning (and very popular theses days) text effect using CSS and the text-shadow property.

» Read tutorial

Creating cross browser compatible CSS text shadows

As text-shadow is a part of CSS3, some browsers (who said IE??) didn’t implemented it yet and you have to use some hacks to make it work properly.
The following article will show you how to create cross browser text shadows.

» Read tutorial

Improve the Quality of Bold Text in Safari with text-shadow

Although Mac OS X have a pretty good font rendering engine, bold text in Safari is often a bit dirty. Did you know that using the text-shadow property you can create beautiful bolds? This article will show you how to do.

» Read tutorial

CSS text-shadow Fun: Realtime Lighting Demo

Using the text-shadow CSS property as well as some JavaScript, funny experimental effects can be created. If you haven’t already, you can definitely say goodbye to Flash.

» Read tutorial

Cross browser text shadow

The filter non-standard property, which have been created by Microsoft, can fix some compatibility issues of IE 6, 7 and 8.
This interesting article will show you how to efficiently use the filter property to create text effects similar to those you can get with text-shadow.

» Read tutorial

Mootools text drop-shadow

When you need a full cross-browser compatibility and still want to use CSS3 properties, JavaScript is always here to help. This tutorial will show you how to recreate the text-shadow CSS property using the MooTools JavaScript framework.

» Read tutorial

Text embossing technique with CSS

Text embossing is very popular in the world of web design and front-end web development. Indeed, even if I’m quite bored to see it on so many websites, it looks very nice.
And it is also very easy to implement. Just read this tutorial and you’ll know how to do.

» Read tutorial

Photoshop like effects using CSS

Some browsers allow multiple values to the text-shadow property, which allow you to create effects like this one. I don’t think I’ll implement that kind of effect on my websites, but I’m happy to know how I can do it.

» Read tutorial

“Acid” text effect using text-shadow

Another nice text effect created using the text-shadow property. The page is in German, but happily everyone can understand the CSS code.

» Read tutorial

Super awesome buttons with CSS3

CSS buttons are very cool and they are a nice way to use your CSS3 skills. In this very nice tutorial, you’ll learn how to create stunning buttons using text-shadow and a few other CSS3 properties.

» Read tutorial

Get 20% off on the MyHomePro Premium WordPress Theme by using this exclusive code: wpcats20.

10 resources to get the most out of the CSS text-shadow property

Go to Source

Javascript Object Property Accessing Example

/* setting */
var myObject = {
	left : 30,
	top: 20
};
/* basic access */
var left = myObject.left; //OR
var left = myObject['left'];

/* accessing it or variables */
var mode = 'vertical';
var value = myObject[mode == 'horizontal' ? 'left' : 'top'];

You may use array-style syntax to access an object’s properties. The string within brackets returns the properties.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Access Javascript Object Variable Properties

Related posts:

1. Javascript Arrays: The Difference Between [] and { }
2. Code-Parsing Regular Expressions via Lighter.js
3. Implementing an Array.count() Method in Javascript
4. MooTools Window Object Dumping
5. Logging Information to the Firebug Javascript Console

Go to Source

Rentate is the online property management system designed for any size property owner. It is too simple to manage, yet too sophisticated to rely.

http://www.rentate.com/

Go to Source

Read full post

Posted in CSS, Web Standards.

Go to Source

Be sure to check out the other great themes by ThemeShift.

Click the image for a live demo.

Custom Search Panel

The most important feature of a real estate site is the search. deCasa comes with a custom search panel that lets your user easily browse your properties by keyword search or category select drop downs.

Built-In Google Map

Based on the address provided for the object details deCasa automatically generates a Google Map pointing at the location of the property. You can optionally hide the map on the entire site or for individual properties.

Property Image Gallery

Creating a professional image gallery for real estate objects is really easy with deCasa. Just provide the URLs of your property photos and deCasa generates a gallery with automatically resized images and a zoom view in a lightbox.

Full Feature List

• Customizable header section
• Customizable search panel
• Searchable custom fields
• Featured properties on home page
• Custom widgets (recent properties, recent news)
• Muli-level dropdown menu
• Menu control (exclude home link, categories and/or pages)
• Layout options (background, button color)
• Nice property exposée
• Automatic image resizing
• Property image gallery
• Built-in contact form
• Built-in Google Map to display porperty location
• Custom search results
• Custom page template: list all agents
• Custom author template: agents listings
• Optional news / blog section
• Threaded comments
• Search form validation
• Comment form validation
• CSS styles for WP-PageNavi plugin – activate and you’re done (see plugin page)
• Theme options page
• Post settings custom meta box

Download deCasa

About this Partner

Themeshift is a WordPress theme shop operated by Simon Rimkus. His themes are beautifully designed and of the highest quality.

Go to Source

While in the past it was a common argument that JavaScript was a basic language and was very ’slap dash’ with no real foundation; this is no longer the case, especially with the introduction of high scale web applications and ‘adaptations’ such as JSON (JavaScript Object Notation).

JavaScript can have all that an Object-Orientated language has to offer, albeit with some extra effort outside of the scope of this article.

Let’s Create an Object

    function myObject(){

    };

Congratulations, you just created an object. There are two ways to
create a JavaScript object: they are ‘Constructor functions’ and
‘Literal notation’. The one above is a Constructor function,
I’ll explain what the difference is shortly, but before I do, here
is what an Object definition looks like using literal notation.

    var myObject = {

    };

Literal is a preferred option for name spacing so that your JavaScript
code doesn’t interfere (or vice versa) with other scripts running on the
page and also if you are using this object as a single object and not requiring
more than one instance of the object, whereas Constructor function type
notation is preferred if you need to do some initial work before the object
is created or require multiple instances of the object where each instance
can be changed during the lifetime of the script. Let’s continue to build
on both our objects simultaneously so we can observe what the differences are.

Defining Methods and Properties

Constructor version:

    function myObject(){
        this.iAm = 'an object';
        this.whatAmI = function(){
            alert('I am ' + this.iAm);
        };
    };

Literal version:

    var myObject = {
        iAm : 'an object',
        whatAmI : function(){
            alert('I am ' + this.iAm);
        }
    }

For each of the objects we have created a property ‘iAm’ which contains a
string value that is used in our objects method ‘whatAmI’ which alerts a message.

Properties are variables created inside an object and methods are functions created inside an object.

Now is probably as good a time as any to explain how to use properties and
methods (although you would already have done so if you are familiar with a library).

To use a property first you type what object it belongs to – so in this case it’s myObject –
and then to reference its internal properties, you put a full stop and then the name of the
property so it will eventually look like myObject.iAm (this will return ‘an object’).

For methods, it is the same except to execute the method, as with any function, you must
put parenthesis after it; otherwise you will just be returning a reference to the function
and not what the function actually returns. So it will look like myObject.whatAmI()
(this will alert ‘I am an object’).

Now for the differences:

• The constructor object has its properties and methods defined with the
  keyword ‘this’ in front of it, whereas the literal version does not.
• In the constructor object the properties/methods have their ‘values’
  defined after an equal sign ‘=’ whereas in the literal version, they are
  defined after a colon ‘:’.
• The constructor function can have (optional) semi-colons ‘;’ at the
  end of each property/method declaration whereas in the literal version
  if you have more than one property or method, they MUST be separated with
  a comma ‘,’, and they CANNOT have semi-colons after them, otherwise JavaScript will return an error.

There is also a difference between the way these two types of object declarations are used.

To use a literally notated object, you simply use it by referencing its variable name,
so wherever it is required you call it by typing;

    myObject.whatAmI();

With constructor functions you need to instantiate (create a new instance of)
the object first; you do this by typing;

    var myNewObject = new myObject();
    myNewObject.whatAmI();

Using a Constructor Function.

Let’s use our previous constructor function and build upon it so it performs some basic
(but dynamic) operations when we instantiate it.

    function myObject(){
        this.iAm = 'an object';
        this.whatAmI = function(){
            alert('I am ' + this.iAm);
        };
    };

Just like any JavaScript function, we can use arguments with our constructor function;

function myObject(what){
	this.iAm = what;
	this.whatAmI = function(language){
		alert('I am ' + this.iAm + ' of the ' + language + ' language');
	};
};

Now let’s instantiate our object and call its whatAmI method, filling in the required
fields as we do so.

    var myNewObject = new myObject('an object');
    myNewObject.whatAmI('JavaScript');

This will alert ‘I am an object of the JavaScript language.’

To Instantiate or not to Instantiate

I mentioned earlier about the differences between Object Constructors and Object Literals and that
when a change is made to an Object Literal it affects that object across the entire script, whereas when
a Constructor function is instantiated and then a change is made to that instance, it won’t affect any
other instances of that object. Let’s try an example;

First we will create an Object literal;

	var myObjectLiteral = {
    	myProperty : 'this is a property'
    }

    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a property'

    //change myProperty
    myObjectLiteral.myProperty = 'this is a new property';

    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a new property', as expected

Even if you create a new variable and point it towards the object, it will have the same effect.

	var myObjectLiteral = {
    	myProperty : 'this is a property'
    }

    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a property'

    //define new variable with object as value
    var sameObject = myObjectLiteral;

    //change myProperty
    myObjectLiteral.myProperty = 'this is a new property';

    //alert current myProperty
    alert(sameObject.myProperty); //this will still alert 'this is a new property'

Now let’s try a similar exercise with a Constructor function.

	//this is one other way of creating a Constructor function
	var myObjectConstructor = function(){
    	this.myProperty = 'this is a property'
    }

    //instantiate our Constructor
    var constructorOne = new myObjectConstructor();

    //instantiate a second instance of our Constructor
    var constructorTwo = new myObjectConstructor();

    //alert current myProperty of constructorOne instance
    alert(constructorOne.myProperty); //this will alert 'this is a property'

     //alert current myProperty of constructorTwo instance
    alert(constructorTwo.myProperty); //this will alert 'this is a property'

So as expected, both return the correct value, but let’s change the myProperty for one of the instances.

	//this is one other way of creating a Constructor function
	var myObjectConstructor = function(){
    	this.myProperty = 'this is a property'
    }

    //instantiate our Constructor
    var constructorOne = new myObjectConstructor();

    //change myProperty of the first instance
    constructorOne.myProperty = 'this is a new property';

    //instantiate a second instance of our Constructor
    var constructorTwo = new myObjectConstructor();

    //alert current myProperty of constructorOne instance
    alert(constructorOne.myProperty); //this will alert 'this is a new property'

     //alert current myProperty of constructorTwo instance
    alert(constructorTwo.myProperty); //this will still alert 'this is a property'

As you can see from this example, even though we changed the property of constructorOne
it didn’t affect myObjectConstructor and therefore didn’t affect constructorTwo. Even if
constructorTwo was instantiated before we changed the myProperty property of constructorOne,
it would still not affect the myProperty property of constructorTwo as it is a completely different
instance of the object within JavaScript’s memory.

So which one should you use? Well it depends on the situation, if you only need one object of its kind for
your script (as you will see in our example at the end of this article), then use an object literal, but if you need several instances of an object, where each instance
is independent of the other and can have different properties or methods depending on the way it’s constructed, then use a constructor function.

This and That

While explaining constructor functions, there were a lot of ‘this’ keywords being thrown around
and I figure what better time to talk about scope!

Now you might be asking ‘what is this scope you speak of’?’ Scope in JavaScript is function/object based, so that means if you’re outside
of a function, you can’t use a variable that is defined inside a function (unless you use a closure).

There is however a scope chain, which means that a function inside another function can access a
variable defined in its parent function. Let’s take a look at some example code.

<script type="text/javascript">

var var1 = 'this is global and is available to everyone';

function function1(){

	var var2 = 'this is only available inside function1 and function2';	

	function function2(){

		var var3 = 'this is only available inside function2';

	}		

}

</script>

As you can see in this example, var1 is defined in the global object
and is available to all functions and object, var2 is defined inside function1
and is available to function1 and function2, but if you try to reference it from the global object
it will give you the error ‘var2 is undefined’, var3 is only accessible to function2.

So what does ‘this’ reference? Well in a browser, ‘this’ references the window object, so technically
the window is our global object. If we’re inside an object, ‘this’ will refer to the object itself however
if you’re inside a function, this will still refer to the window object and likewise if you’re inside a method
that is within an object, ‘this’ will refer to the object.

Due to our scope chain, if we’re inside a sub-object (an object inside an object), ‘this’ will refer to
the sub-object and not the parent object.

As a side note, it’s also worth adding that when using functions like setInterval, setTimeout and eval,
when you execute a function or method via one of these, ‘this’ refers to the window object as these are methods of window, so
setInterval() and window.setInterval() are the same.

Ok now that we have that out of the way, let’s do a real world example and create a
form validation object!

Real world Usage: A Form Validation Object

First I must introduce you to the addEvent function which we will create and is a
combination of ECMAScript’s (Firefox, Safari, etc.. ) addEventListener() function and
Microsoft ActiveX Script’s attachEvent() function.

    function addEvent(to, type, fn){
        if(document.addEventListener){
            to.addEventListener(type, fn, false);
        } else if(document.attachEvent){
            to.attachEvent('on'+type, fn);
        } else {
            to['on'+type] = fn;
        }
    };

This creates a new function with three arguments, to being the DOM object we are attaching
the event to, type being the type of event and fn being the function run when
the event is triggered. It first checks whether addEventListener is supported, if so it will use that, if not it will check
for attachEvent and if all else fails you are probably using IE5 or something equally obsolete so
we will add the event directly onto its event property (note: the third option will overwrite any
existing function that may have been attached to the event property while the first two will add
it as an additional function to its event property).

Now let’s set up our document so it is similar to what you might see when you develop jQuery stuff.

In jQuery you would have;

    $(document).ready(function(){
        //all our code that runs after the page is ready goes here
    });

Using our addEvent function we have;

    addEvent(window, 'load', function(){
		//all our code that runs after the page is ready goes here
	});

Now for our Form object.

var Form = {

	validClass : 'valid',

	fname : {
		minLength : 1,
		maxLength : 15,
		fieldName : 'First Name'
	},

	lname : {
		minLength : 1,
		maxLength : 25,
		fieldName : 'Last Name'
	},

	validateLength : function(formEl, type){
		if(formEl.value.length > type.maxLength || formEl.value.length < type.minLength ){
			formEl.className = formEl.className.replace(' '+Form.validClass, '');
			return false;
		} else {
			if(formEl.className.indexOf(' '+Form.validClass) == -1)
			formEl.className += ' '+Form.validClass;
			return true;
		}
	},

	validateEmail : function(formEl){
		var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
		var emailTest = regEx.test(formEl.value);
		if (emailTest) {
			if(formEl.className.indexOf(' '+Form.validClass) == -1)
			formEl.className += ' '+Form.validClass;
			return true;
		} else {
			formEl.className = formEl.className.replace(' '+Form.validClass, '');
			return false;
		}
	},		

	getSubmit : function(formID){
		var inputs = document.getElementById(formID).getElementsByTagName('input');
		for(var i = 0; i < inputs.length; i++){
			if(inputs[i].type == 'submit'){
				return inputs[i];
			}
		}
		return false;
	}			

};

So this is quite basic but can easily be expanded upon.

To break this down first we create a new property which is just the string name of our ‘valid’ css class
that when applied to the form field, adds valid effects such as a green border. We also define our two sub-objects, fname and lname,
so we can define their own properties that can be used by methods elsewhere, these properties are minLength
which is the minimum amount of characters these fields can have, maxLength which is the max characters
the field can have and fieldName which doesn’t actually get used, but could be grabbed for
things like identifying the field with a user friendly string in an error message (eg. ‘First Name field is required.’).

Next we create a validateLength method that accepts two arguments: formEl the DOM element to validate
and the type which refers to one of the sub-object to use (i.e. fname or lname).
This function checks whether the length of the field is between the minLength and maxLength range, if it’s not
then we remove our valid class (if it exists) from the element and return false, otherwise if it is then we add the valid class and return true.

Then we have a validateEmail method which accepts a DOM element as an arguement, we then test this DOM elements value against an
email type regular expression; again if it passes we add our class and return true and vice versa.

Finally we have a getSubmit method. This method is given the id of the form and then loops through all input elements inside the specified form
to find which one has a type of submit (type=”submit”). The reason for this method is to return the submit button so we can
disable it until the form is ready to submit.

Let’s put this validator object to work on a real form. First we need our HTML.

    <body>

    <form id="ourForm">
        <label>First Name</label><input type="text" /><br />
        <label>Last Name</label><input type="text" /><br />
        <label>Email</label><input type="text" /><br />
        <input type="submit" value="submit" />
    </form>

    </body>

Now let’s access these input objects using JavaScript and validate them when the form submits.

addEvent(window, 'load', function(){

	var ourForm = document.getElementById('ourForm');
	var submit_button = Form.getSubmit('ourForm');
	submit_button.disabled = 'disabled';

	function checkForm(){
		var inputs = ourForm.getElementsByTagName('input');
		if(Form.validateLength(inputs[0], Form.fname)){
			if(Form.validateLength(inputs[1], Form.lname)){
				if(Form.validateEmail(inputs[2])){ 					 

						submit_button.disabled = false;
						return true;

				}
			}
		}

		submit_button.disabled = 'disabled';
		return false;

	};

	checkForm();
	addEvent(ourForm, 'keyup', checkForm);
	addEvent(ourForm, 'submit', checkForm);

});

Let’s break down this code.

We wrap our code in the addEvent function so when the window is loaded this script runs.
Firstly we grab our form using its ID and put it in a variable named ourForm, then we grab
our submit button (using our Form objects getSubmit method) and put it in a variable named submit_button,
and then set the submit buttons disabled attribute to ‘disabled’.

Next we define a checkForm function. This stores all the inputs inside the form field as an array and we attach it to a
variable named.. you guessed it.. inputs!
Then it defines some nested if statements which test each of the fields inside the inputs array against our Form methods.
This is the reason we returned true or false in our methods, so if it returns true, we pass that if statement and continue onto the next,
but if it returns false, we exit the if statements.

Following our function definition, we execute the checkForm function when the page initially loads and also attach the function to a keyup event
and a submit event.

You might be asking, why attach to submit if we disabled the submit button. Well if you are focused on an input field and hit the enter key, it will
attempt to submit the form and we need to test for this, hence the reason our checkForm function returns true (submits the form) or false (doesn’t submit form).

Conclusion

So we learned how to define the different object types within JavaScript and create properties and methods within them. We also learned a nifty addEvent function and got to use our object in a basic real world example.

This concludes the basics of JavaScript Object Orientation. Hopefully, this may start you on your way to building your own JavaScript library! If you liked this article and are interested in other JavaScript related topics, post them in the comments as I’d be happy to continue writing them. Thanks for reading.

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

Go to Source

While relatively easy to understand, CSS backgrounds often lead to some questions and confusion when it comes to pulling off specific techniques. Let’s see if we can clear up some of that confusion and then answer a few of those technique specific questions.

What Are CSS Backgrounds?

CSS backgrounds are pretty much what the name implies. They’re something you add to the background of an element. More specifically they are colors and images that sit behind whatever content is added inside the element. When developing a css driven site these background colors and images are usually responsible for most of the design elements in your template.

The background of the element is defined according to the css box model. Margins are not included as part of the background, but borders, paddings, and the width of the content are included.

There are 5 background properties you can apply to a css selector, 4 of which apply to background images:

• background-color — sets the background color of an element. The color can be specified as a hex value, an rgb value, or by one of the limited color names. The background-color can also be set as transparent or it can be set to inherit the background-color of its parent element.
• background-image — sets an image as the background of an element and it’s value will look like url(”path-to-an-image”). The background-image property can also have values of none and inherit
• background-repeat — sets how a background-image is repeated. Values are repeat, no-repeat, repeat-x, repeat-y, and inherit
• background-attachment — set how the background image will move with the page. It can scroll (moves with the element as the page scrolls), remain fixed (stays in position even when the page is scrolled), or inherit from the parent element
• background-position — sets the starting position of the background image within the element. Images can be set to start vertically at the top, center, or bottom and horizontally at the left, center, or right. The background position can also be set to start a fixed amount or a % from the top left corner of the element.

CSS Background Shortcut

While you can specify each background property (PDF) individually, in practice you’ll want to use the shortcut. When using the shortcut you should specify properties in the following order: color, image, repeat, attachment, position.

div {background: #0088ff, url("path-to-an-image"), repeat-x, scroll, top left}

You don’t need to specify all the properties when using the shortcut, but you do want to use the right order. Any property you don’t specify will be assigned a default value as follows:

• background-color: transparent
• background-image: none
• background-repeat: repeat
• background-attachment: scroll
• background-position: 0% 0%

You can for example use the shortcut as in the following

background: #0077ff
background: url("path-to-image") no-repeat
background: url("path-to-image") top left

In each of the above lines of code the default values will be used for the properties not specifically mentioned.

CSS Background Images are not HTML Images

One important concept to understand is that images you set with a css background do not behave the same way as an image you set using the html <img> tag.

An html img tag creates a new box. A css background image is placed in an existing box. You can’t add padding or margins or a border to a css background image. You don’t set a width and height on a css background image.

Because an html image is a new box it has width and height, paddings and margins, and a border. It can also have a css background image applied to it. I’m not sure how often this is done in practice, but you can add a background image behind an html image if you’d like.

photo credit: comedy_nose

Solutions to Common CSS Background Questions

While the background property is fairly easy to understand and use there still arise a variety of questions around it.

1. Why won’t my background image show?

This is usually because the element has no width or height. Remember a background image doesn’t create a box. It fills the existing box. If that box has no width or height there’s nothing to fill. The solution is to give your element some dimensions. You can explicitly set a height and width on the element (not the background image) or fill the element with some content creating a height and width.

In some cases you do have content inside the element, but all that content has been floated taking it out of the normal document flow. When that happens the containing element (where you’re wanting to add the background) technically has no dimensions. You can add the overflow property to the element to force it to have dimensions as though the floated elements inside were still part of the normal document flow.

2. Can I use multiple background images?

Yes and no. The CSS3 spec allows for multiple background images, but since all browsers haven’t quite adopted the CSS3 spec you’ll want to hold off on multiple background images for awhile.

However remember that all html elements can have a background applied. Say you have a div which contains an h2 element and a paragraph. You could apply background images to each and by controlling other css properties you can often achieve the same effect you want. You could also add more html divs and spans inside or outside your element to have more places to add a background. This does get somewhat clunky, but it can work.

3. How do I swap background images when hovering over an element?

You can do this in 2 ways. Add a new css rule for your element:hover and either change the background-image property to point to a new image or have your image be a css sprite and change it’s background-position to show a different part of your sprite image.

It’s important to note that older versions of IE only accept :hover on a link element so you’ll need a little javascript to make this magic happen for IE. My preference is the suckerfish solution, which is the same solution I use for drop down menus.

4. How can I make my background images transparent?

Unfortunately you can’t. You can set transparency on the element, but not specifically on the background image. If you do set transparency on the element know that everything inside the element will get that same transparency.

Depending on your situation you may find it best to add the transparency when creating the image in Photoshop. That way you can control the look of the image, though you still won’t be able to see through the image.

5. Can I set a background image on my table, table row, or table cell?

Yes. Each is an html element and so takes the background property. However tables have a complex way in which backgrounds are determined through the use of layers and transparency, which can be seen in the following image.

The background for an element in one layer is only visible if the layers above it have a transparent background. That can be a little confusing to get working right, which is why many people fall back on html attributes to set backgrounds on tables.

Fortunately transparent is the default so the layers above should already be transparent. Once you start adding backgrounds to one part of the table, though it can become more complex to work out.

6. Can I add background images to borders?

Not yet. This is another of those coming in CSS3 things. You can use it now if you don’t mind it not working across all browsers.

7. Can I add background images to lists?

Yes. Lists are html elements and so can take a background image. Here’s a simple way to set the background-image property to use an image of your choice as the bullet in a list.

8. How do I add padding to a background image?

As I mentioned above a background image doesn’t create a new css box so you can’t give it padding. What you want to do is use the background-position property to offset where the image appears.

9. How do I align a background image to the right?

Similar to the above question, this is a background-position thing. Use a value of right in your background-position and the image will be aligned to the right edge of the element.

10. Why won’t my background image show when printing?

You don’t have control over this for good reason. It takes a lot of ink to print an image and many people would prefer not to print them. Whether or not to print background images is set in the browser by the individual. I’d recommend not forcing the issue, but you can try this workaround to sort of force printing on css background images.

11. How do I stretch a background image to fit an element?

Once CSS3 is fully here you’ll be able to do this with the background-size property. Until then you can try to fake it.

Another possible solution that may fit your needs is to create an image much wider than you need and set the background-position to 50% 50%. This will center your background image inside the element and as the element grows wider more of your image gets revealed, while the entire image remains centered.

Not exactly stretching, but useful for ensuring your image fills the space even as the space grows larger.

12. Can I wrap a link around my background image

No. Again background images do not create boxes. The solution is to add the link around all the content inside the html element or wrap the link around the element itself. Which you would use depends on the specific html element and the content inside that element.

Summary

Hopefully the above clears up some confusion you may have when it comes to working with the css background property or offers a solution to a problem you’ve had. The key point to remember is that css backgrounds do not create new boxes. They only fill existing html boxes. Understanding that point will help you see what you can and can’t do with background images.

CSS backgrounds are a vital part of giving your design its look and feel. Most of the images you’ll create for your site’s template will want to be set using the background property so it’s a good property to become familiar with and learn how to master.

If you have any questions or problems using the css background property please ask, and I’ll do my best to find a solution for you.

Go to Source

Here’s a roundup of our top ten favorite design-related posts for the past week. Enjoy!

Waterscape Photography: Beautiful Waterscapes and Tricks of the Trade

Nature provides us with a never-ending supply of inspiration, look no further than the coast for an array of majestic scenery. This article focuses on the point where land and sea meet, with 24 stunning waterscapes, essential tools of the trade.

Systematizing the Graphic Design Process

Unlike other forms of art, graphic design is not just about taking paper and pen and letting the work flow. Graphic designers have to help viewers get the message and help sell a service or product. Creating a design for a client with little or no strategy just doesn’t work. Unlike traditional art, graphic design has to convey a very narrow message.

14 jQuery Plugins for Enhanced Content Viewing

Whether you need to display content within a limited amount of space or you just want to make a section of your website more engaging, jQuery is an excellent solution. With jQuery you can easily create accordion style content boxes, image galleries, and content sliders. Here are 14 excellent jQuery plugins for adding this type of functionality to your site.

35 Creative Twitter User Profile Designs

One of the most important aspects of attracting followers on Twitter, in addition to quality tweets, is your Twitter page profile design; it has to be creative and attractive to show that you take tweeting seriously. This collection of Twitter user profile designs follows up on an earlier showcase that we published called 50 Beautiful & Unique Twitter Profile Designs. In this collection, you’ll find some of the great Twitter user profile designs out there.

The Mystery Of The CSS Float Property

Years ago, when developers first started to make the transition to HTML layouts without tables, one CSS property that suddenly took on a very important role was the float property. The reason that the float property became so common was that, by default, block-level elements will not line up beside one another in a column-based format. Since columns are necessary in virtually every CSS layout, this property started to get used — and even overused — prolifically.

Solution For Very Long Dropdown Menus

I like to be confident with post titles, but the reality in this case is a *possible* solution for very long dropdowns. The problem with long dropdowns is that the dropdown itself can go below the “fold” of the website. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window. For those of us with scroll wheels of some kind on our mice (mouses?), it’s not a big deal. For those without, those lower menu items are totally inaccessible, because to use the browser scrollbar means mousing off the menu (and probably having it close).

20 Handy Photoshop Tips For a Faster Workflow

We all use Photoshop on a daily basis, but I bet there’s at least one tip in this post that will give you the old ‘Why didn’t I know of this before’ moment! It’s tips like these that make the most common of tasks quicker and easier than ever to help speed up your Photoshop workflow.

Top 10 Site Search Options

Part of having a user-friendly site involves making it possible for visitors to quickly find what they are looking for. A site-wide search is one of the best ways to accomplish this. In this post we’ll look at 10 of the leading options for helping visitors to find the content that they want. Of course, most CMSs come with a standard search functionality, but this may not always be the best options (as is the case with WordPress’ default search).

Daily Inspiration #335

This post is part of our daily series of posts showing the most inspiring images selected by some of the Abduzeedo’s writers and users. If you want to participate and share your graphic design inspiration, just send us, via email, the image with the link from where you found it, also use “Daily Inspiration” in the subject, and don’t forget to send your Abduzeedo username; or via Twitter sending to http://twitter.com/abduzeedo

200+ Truly Useful Free Halloween Icons for Everyone

It’s only a week before we celebrate Halloween. As for our second collection of useful resources for the Halloween season, We compiled 200+ Truly Useful Free Halloween Icons for Everyone. These icons can be downloaded right into your desktop for FREE! Each set includes several icons that you can get for personal use. The following sets of icon were made by several of our creative graphics designers on the web to share their talents and uplift Halloween spirit.

No related posts.

Go to Source

Nokia has filed a lawsuit against Apple in Delaware District Court. The Finish cellular giant claims that Apple is infringing on its wireless technologies patents.

Nokia holds patents on GSM, UMTS and WLAN standards and licenses that technology to more than forty other companies. Nokia claims that Apple never paid to license this technology.

From Nokia’s press release:

The ten patents in suit relate to technologies fundamental to making devices which are compatible with one or more of the GSM, UMTS (3G WCDMA), and wireless LAN standards. The patents cover wireless data, speech coding, security and encryption and are infringed by all Apple iPhone models shipped since the iPhone was introduced in 2007.

“The basic principle in the mobile industry is that those companies who contribute in technology development to establish standards create intellectual property, which others then need to compensate for,” said Ilkka Rahnasto, Vice President, Legal & Intellectual Property at Nokia. “Apple is also expected to follow this principle. By refusing to agree appropriate terms for Nokia’s intellectual property, Apple is attempting to get a free ride on the back of Nokia’s innovation.”

Apple has not issued a statement responding to the lawsuit at this time. We’ll post an update when they do.

Tags: apple, iphone, Nokia, patent infringement

Go to Source

  

Years ago, when developers first started to make the transition to HTML layouts without tables, one CSS property that suddenly took on a very important role was the float property. The reason that the float property became so common was that, by default, block-level elements will not line up beside one another in a column-based format. Since columns are necessary in virtually every CSS layout, this property started to get used — and even overused — prolifically.

The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. If it were not for the CSS float property, CSS layouts would not be possible except using absolute and relative positioning — which would be messy and would make the layout unmaintainable.

In this article, we’ll discuss exactly what the float property is and how it affects elements in particular contexts. We’ll also take a look at some of the differences that can occur in connection with this property in the most commonly-used browsers. Finally, we’ll showcase a few practical uses for the CSS float property. This should provide a well-rounded and thorough discussion of this property and its impact on CSS development.

Definition and Syntax

The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the document flow. This allows naturally-flowing content to wrap around the floated element. This concept is similar to what you see every day in print literature, where photos and other graphic elements are aligned to one side while other content (usually text) flows naturally around the left- or right-aligned element.

Flickr photo by presentday

The photo above shows the “Readers’ sites” section of .net magazine, which displays 3 readers’ photos each aligned left in their respective columns with text wrapping around the aligned images. That is the basic idea behind the float property in CSS layouts, and demonstrates one of the ways it has been used in table-less design.

The effectiveness of using floats in multi-columned layouts was explained by Douglas Bowman in 2004 in his classic presentation No More Tables:

No More Tables

Bowman explained the principles behind table-less design, using Microsoft’s old site as a case study. Floats were used prominently in his mock overhaul of the Microsoft layout.

Syntax

The float CSS property can accept one of 4 values: left, right, none, and inherit. It is declared as shown in the code below.

#sidebar {
	float: left;
}

The most commonly-used values are left and right. A value of none is the default, or initial float value for any element in an HTML page. The value inherit, which can be applied to nearly any CSS property, does not work in Internet Explorer versions up to and including 7.

The float property does not require the application of any other property on a CSS element for float to function correctly, however, float will work more effectively under specific circumstances.

Generally, a floated element should have an explicitly set width (unless it is a replaced element, like an image). This ensures that the float behaves as expected and helps to avoid issues in certain browsers.

#sidebar {
	float: left;
	width: 350px;
}

Specifics on Floated Elements

Following is a list of exact behaviours of floated elements according to CSS2 Specifications:

• A left-floated box will shift to the left until its leftmost margin edge (or border edge if margins are absent) touches either the edge of the containing block, or the edge of another floated box
• If the size of the floated box exceeds the available horizontal space, the floated box will be shifted down
• Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of document flow
• Margins of floated boxes do not collapse with margins of adjacent boxes
• The root element (<html>) cannot be floated
• An inline element that is floated is converted to a block-level element

Float in Practice

One of the most common uses for the float property is to float an image with text wrapping it. Here is an example:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.

Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Lifesaver Image from stock.xchng

The CSS applied to the image in the box above is as follows:

img {
	float: left;
	margin: 0 15px 5px 0;
	border: solid 1px #bbb;
}

The only property required to make this effect work is the float property. The other properties (margin and border) are there for aesthetic reasons. The other elements inside the box (the <p> tags with text inside them) do not need any styles applied to them.

As mentioned earlier, floated elements are taken out of document flow, and other block elements remain in flow, acting as if the floated element is not even there. This is demonstrated visually below:

In the above example, the <p> element is a block-level element, so it ignores the floated element, spanning the width of the container (minus padding). All non-floated, block-level elements will behave in like manner.

The text in the paragraph is inline, so it flows around the floated element. The floated box is also given margin settings to offset it from the paragraph, making it visually clear that the paragraph element is ignoring the floated box.

Clearing Floats

Layout issues with floats are commonly fixed using the CSS clear property, which lets you “clear” floated elements from the left or right side, or both sides, of an element.

Let’s take a look at an example that commonly occurs — a footer wrapping to the right side of a 2-column layout:

If you view this page in IE6 or IE7, you won’t see any problems. The left and right columns are in place, and the footer is nicely tucked underneath. But in Firefox, Opera, Safari, and Chrome, you’ll see the footer jump up beside the left column. This is caused by the float applied to the columns. This is the correct behaviour, even though it is a more problematic one. To resolve this issue, we use the aforementioned clear property, applied to the footer:

#footer {
	clear: both;
}

The result is shown below:

The clear property will clear only floated elements, so applying clear: both to both columns would not cause the footer to drop down, because the footer is not a floated element.

So use clear on non-floated elements, and even occasionally on floated elements, to force page elements to occupy their intended space.

Fixing the Collapsed Parent

One of the most common symptoms of float-heavy layouts is the “collapsing parent”. This is demonstrated in the example below:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Notice that the bottom of the floated image appears outside its parent. The parent does not fully expand to hold the floated image. This is caused by what we discussed earlier: the floated element is out of the natural document flow, so all block elements will render as if the floated element is not even there. This is not a CSS bug; it’s in line with CSS specifications. All browsers render the same in this example. It should be pointed out that, in this example, adding a width to the container prevents the issue from occurring in IE, so this would normally be something you would have to resolve in Firefox, Opera, Safari, or Chrome.

Solution 1: Float the container

The easiest way to fix this problem is to float the containing parent element:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Now the container expands to fit all the child elements. But unfortunately this fix will only work in a limited number of circumstances, since floating the parent may have undesirable effects on your layout.

Solution 2: Adding Extra Markup

This is an outdated method, but is an easy option. Simply add an extra element at the bottom of the container and “clear” it. Here’s how the HTML would look after this method is implemented:

<div id="container">
<img src="http://www.neurosoftware.ro/programming-blog/wp-content/plugins/wp-o-matic/cache/badf9_lifesaver.jpg" width="200" height="222" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>

	<div class="clearfix"></div>
</div>

And the resulting CSS applied to the new element:

.clearfix {
	clear: both;
}

You could also do this by means of a <br /> tag with an inline style. In any case, you will have the desired result: the parent container will expand to enclose all of its children. But this method is not recommended since it adds nonsemantic code to your markup.

Solution 3: The :after Pseudo-Element

The :after pseudo-element adds an element to the rendered HTML page. This method has been used quite extensively to resolve float-clearing issues. Here is how the CSS looks:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

The CSS class “clearfix” is applied to any container that has floating children and does not expand to enclose them.

But this method does not work in Internet Explorer up to version 7, so an IE-only style needs to be set with one of the following rules:

.clearfix {
	display: inline-block;
}

.clearfix {
	zoom: 1;
}

Depending on the type of issue you’re dealing with, one of the above two solutions will resolve the issue in Internet Explorer. It should be noted that the zoom property is a non-standard Microsoft proprietary property, and will cause your CSS to become invalid.

So, because the :after pseudo-element solution does not work in IE6/7, is a little bit bloated code-wise, and requires additional invalid IE-only styles, this solution is not the best method, but is probably the best we’ve considered so far.

Solution 4: The Overflow Property

By far the best, and easiest solution to resolve the collapsing parent issue is to add overflow: hidden or overflow: auto to the parent element. It’s clean, easy to maintain, works in almost all browsers, and does not add extra markup.

You’ll notice I said “almost” all browsers. This is because it does not work in IE6. But, in many cases, the parent container will have a set width, which fixes the issue in IE6. If the parent container does not have a width, you can add an IE6-only style with the following code:

// This fix is for IE6 only
.clearfix {
	height: 1%;
	overflow: visible;
}

In IE6, the height property is incorrectly treated as min-height, so this forces the container to enclose its children. The overflow property is then set back to “visible”, to ensure the content is not hidden or scrolled.

The only drawback to using the overflow method (in any browser) is the possibility that the containing element will have scrollbars or hide content. If there are any elements with negative margins or absolute positioning inside the parent, they will be obscured if they go beyond the parent’s borders, so this method should be used carefully. It should also be noted that if the containing element has to have a specified height, or min-height, then you would definitely not be able to use the overflow method.

So, there really is no simple, cross-browser solution to the collapsing parent issue. But almost any float clearing issue can be resolved with one of the above methods.

Float-Related Bugs in Internet Explorer

Over the years, there have been numerous articles published online that discuss common bugs in connection with floats in CSS layouts. All of these, not surprisingly, deal with problems specific to Internet Explorer. Below, you’ll find a list of links to a number of articles that discuss float-related issues in-depth:

• The Internet Explorer Guillotine Bug
• The IE5/6 Doubled Float-Margin Bug
• IE7 Bottom Margin Bug
• The IE Escaping Floats Bug
• The IE6 Peekaboo Bug
• The IE6 “Ghost Text” Bug
• The IE6 Expanding Box Problem
• The IE6 3-pixel Gap

Changing the Float Property with JavaScript

To change a CSS value in JavaScript, you would access the style object, converting the intended CSS property to “camel case”. For example, the CSS property “margin-left” becomes marginLeft; the property background-color becomes backgroundColor, and so on. But with the float property, it’s different, because float is already a reserved word in JavaScript. So, the following would be incorrect:

myDiv.style.float = "left";

Instead, you would use one of the following:

// For Internet Explorer
myDiv.style.styleFloat = "left";

// For all other browsers
myDiv.style.cssFloat = "left";

Practical Uses for Float

Floats can be used to resolve a number of design challenges in CSS layouts. Some examples are discussed here.

2-Column, Fixed-Width Layout

Roger Johansson of 456 Berea Street outlines an 8-step tutorial to create a simple, cross-browser, 2-column, horizontally centered layout. The float property is integral to the chemistry of this layout.

“The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. It is also horizontally centered in the browser window. A pretty basic layout, and not at all difficult to create with CSS once you know how to deal with the inevitable Internet Explorer bugs.”

Simple 2 column CSS layout

3-Column, Equal-Height Layout

Petr Stanicek of pixy.cz demonstrates a cross-browser 3-column layout, again using float:

“No tables, no absolute positioning (no positioning at all), no hacks(!), same height of all columns. The left and right columns have fixed width (150px), the middle one is elastic.”

3-Column Layout with CSS

Floated Image with Caption

Similar to what we discussed earlier under “Float in Practice”, Max Design describes how to float an image with a caption, allowing text to wrap around it naturally.

Floating an Image and Caption

Horizontal Navigation with Unordered Lists

The float property is a key ingredient in coding sprite-based horizontal navigation bars. Chris Spooner of Line25 describes how to create a Menu of Awesomeness, in which the <li> elements that hold the navigation buttons are floated left:

How to Create a CSS Menu Using Image Sprites

To demonstrate the importance of the float property in this example, here is a screen shot of the same image after using firebug to remove the float: left:

Grid-Based Photo Galleries

A simple use for the float property is to left-float a series of photos contained in an unordered list, which gets the same result as what you would see in a table-based layout.

Foremost Canada’s product page (above) displays their products in grid-based format, next to a left-column sidebar. The photos are displayed in an unordered list with the float property for all <li> elements set to float: left. This works better than a table-based grid, because the number of photos in the gallery can change and the layout would not be affected.

Paragon Furniture’s futons page (above) is another example of a product page using an unordered list with floated list items.

iStockphoto’s search results page (above) is a similarly-structured grid of photos, but this time the photos are contained in left-floated <div> elements, instead of <li> elements.

Aligning an <input> Field with a Button

Default styling on form elements across different browsers can be a pain to deal with. Often times, in a single-field form like a search form, it is necessary to place the <input> element next to the submit button. Here is a simple search form, with an image used for the submit button:

In every browser, the result is the same: The button appears slightly higher than the input field. Changing margins and padding does nothing. The simple way to fix this is to float the input field left, and add a small right margin. Here is the result:

Conclusion

As was mentioned at the outset, without the CSS float property, table-less layouts would be, at worst, impossible, and, at best, unmaintainable. Floats will continue to be prominent in CSS layouts, even as CSS3 begins to gain prominence — even though there have been a few discussions about layouts without the use of floats.

Hopefully this discussion has simplified some of the mysteries related to floats, and provided some practical solutions to a number of issues faced by CSS developers today.

Further Reading

• Sitepoint CSS Reference: Float
• All About Floats on CSS-Tricks
• Float Layouts @ The Autistic Cuckoo
• Simple Clearing of Floats
• Visual Formatting Model: Floats
• Floating and Clearing

About the Author

Louis Lazaris is a writer and freelance Web Developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts web design articles and tutorials on his blog, Impressive Webs. You can follow Louis on Twitter or contact him using this form.

© Louis Lazaris for Smashing Magazine, 2009. |
Permalink |
34 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: CSS, float

Go to Source

  

Years ago, when developers first started to make the transition to HTML layouts without tables, one CSS property that suddenly took on a very important role was the float property. The reason that the float property became so common was that, by default, block-level elements will not line up beside one another in a column-based format. Since columns are necessary in virtually every CSS layout, this property started to get used — and even overused — prolifically.

The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. If it were not for the CSS float property, CSS layouts would not be possible except using absolute and relative positioning — which would be messy and would make the layout unmaintainable.

In this article, we’ll discuss exactly what the float property is and how it affects elements in particular contexts. We’ll also take a look at some of the differences that can occur in connection with this property in the most commonly-used browsers. Finally, we’ll showcase a few practical uses for the CSS float property. This should provide a well-rounded and thorough discussion of this property and its impact on CSS development.

Definition and Syntax

The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the document flow. This allows naturally-flowing content to wrap around the floated element. This concept is similar to what you see every day in print literature, where photos and other graphic elements are aligned to one side while other content (usually text) flows naturally around the left- or right-aligned element.

Flickr photo by presentday

The photo above shows the “Readers’ sites” section of .net magazine, which displays 3 readers’ photos each aligned left in their respective columns with text wrapping around the aligned images. That is the basic idea behind the float property in CSS layouts, and demonstrates one of the ways it has been used in table-less design.

The effectiveness of using floats in multi-columned layouts was explained by Douglas Bowman in 2004 in his classic presentation No More Tables:

No More Tables

Bowman explained the principles behind table-less design, using Microsoft’s old site as a case study. Floats were used prominently in his mock overhaul of the Microsoft layout.

Syntax

The float CSS property can accept one of 4 values: left, right, none, and inherit. It is declared as shown in the code below.

#sidebar {
	float: left;
}

The most commonly-used values are left and right. A value of none is the default, or initial float value for any element in an HTML page. The value inherit, which can be applied to nearly any CSS property, does not work in Internet Explorer versions up to and including 7.

The float property does not require the application of any other property on a CSS element for float to function correctly, however, float will work more effectively under specific circumstances.

Generally, a floated element should have an explicitly set width (unless it is a replaced element, like an image). This ensures that the float behaves as expected and helps to avoid issues in certain browsers.

#sidebar {
	float: left;
	width: 350px;
}

Specifics on Floated Elements

Following is a list of exact behaviours of floated elements according to CSS2 Specifications:

• A left-floated box will shift to the left until its leftmost margin edge (or border edge if margins are absent) touches either the edge of the containing block, or the edge of another floated box
• If the size of the floated box exceeds the available horizontal space, the floated box will be shifted down
• Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of document flow
• Margins of floated boxes do not collapse with margins of adjacent boxes
• The root element (<html>) cannot be floated
• An inline element that is floated is converted to a block-level element

Float in Practice

One of the most common uses for the float property is to float an image with text wrapping it. Here is an example:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.

Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Lifesaver Image from stock.xchng

The CSS applied to the image in the box above is as follows:

img {
	float: left;
	margin: 0 15px 5px 0;
	border: solid 1px #bbb;
}

The only property required to make this effect work is the float property. The other properties (margin and border) are there for aesthetic reasons. The other elements inside the box (the <p> tags with text inside them) do not need any styles applied to them.

As mentioned earlier, floated elements are taken out of document flow, and other block elements remain in flow, acting as if the floated element is not even there. This is demonstrated visually below:

In the above example, the <p> element is a block-level element, so it ignores the floated element, spanning the width of the container (minus padding). All non-floated, block-level elements will behave in like manner.

The text in the paragraph is inline, so it flows around the floated element. The floated box is also given margin settings to offset it from the paragraph, making it visually clear that the paragraph element is ignoring the floated box.

Clearing Floats

Layout issues with floats are commonly fixed using the CSS clear property, which lets you “clear” floated elements from the left or right side, or both sides, of an element.

Let’s take a look at an example that commonly occurs — a footer wrapping to the right side of a 2-column layout:

If you view this page in IE6 or IE7, you won’t see any problems. The left and right columns are in place, and the footer is nicely tucked underneath. But in Firefox, Opera, Safari, and Chrome, you’ll see the footer jump up beside the left column. This is caused by the float applied to the columns. This is the correct behaviour, even though it is a more problematic one. To resolve this issue, we use the aforementioned clear property, applied to the footer:

#footer {
	clear: both;
}

The result is shown below:

The clear property will clear only floated elements, so applying clear: both to both columns would not cause the footer to drop down, because the footer is not a floated element.

So use clear on non-floated elements, and even occasionally on floated elements, to force page elements to occupy their intended space.

Fixing the Collapsed Parent

One of the most common symptoms of float-heavy layouts is the “collapsing parent”. This is demonstrated in the example below:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Notice that the bottom of the floated image appears outside its parent. The parent does not fully expand to hold the floated image. This is caused by what we discussed earlier: the floated element is out of the natural document flow, so all block elements will render as if the floated element is not even there. This is not a CSS bug; it’s in line with CSS specifications. All browsers render the same in this example. It should be pointed out that, in this example, adding a width to the container prevents the issue from occurring in IE, so this would normally be something you would have to resolve in Firefox, Opera, Safari, or Chrome.

Solution 1: Float the container

The easiest way to fix this problem is to float the containing parent element:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Now the container expands to fit all the child elements. But unfortunately this fix will only work in a limited number of circumstances, since floating the parent may have undesirable effects on your layout.

Solution 2: Adding Extra Markup

This is an outdated method, but is an easy option. Simply add an extra element at the bottom of the container and “clear” it. Here’s how the HTML would look after this method is implemented:

<div id="container">
<img src="http://www.neurosoftware.ro/programming-blog/wp-content/plugins/wp-o-matic/cache/f8c33_lifesaver.jpg" width="200" height="222" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>

	<div class="clearfix"></div>
</div>

And the resulting CSS applied to the new element:

.clearfix {
	clear: both;
}

You could also do this by means of a <br /> tag with an inline style. In any case, you will have the desired result: the parent container will expand to enclose all of its children. But this method is not recommended since it adds nonsemantic code to your markup.

Solution 3: The :after Pseudo-Element

The :after pseudo-element adds an element to the rendered HTML page. This method has been used quite extensively to resolve float-clearing issues. Here is how the CSS looks:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

The CSS class “clearfix” is applied to any container that has floating children and does not expand to enclose them.

But this method does not work in Internet Explorer up to version 7, so an IE-only style needs to be set with one of the following rules:

.clearfix {
	display: inline-block;
}

.clearfix {
	zoom: 1;
}

Depending on the type of issue you’re dealing with, one of the above two solutions will resolve the issue in Internet Explorer. It should be noted that the zoom property is a non-standard Microsoft proprietary property, and will cause your CSS to become invalid.

So, because the :after pseudo-element solution does not work in IE6/7, is a little bit bloated code-wise, and requires additional invalid IE-only styles, this solution is not the best method, but is probably the best we’ve considered so far.

Solution 4: The Overflow Property

By far the best, and easiest solution to resolve the collapsing parent issue is to add overflow: hidden or overflow: auto to the parent element. It’s clean, easy to maintain, works in almost all browsers, and does not add extra markup.

You’ll notice I said “almost” all browsers. This is because it does not work in IE6. But, in many cases, the parent container will have a set width, which fixes the issue in IE6. If the parent container does not have a width, you can add an IE6-only style with the following code:

// This fix is for IE6 only
.clearfix {
	height: 1%;
	overflow: visible;
}

In IE6, the height property is incorrectly treated as min-height, so this forces the container to enclose its children. The overflow property is then set back to “visible”, to ensure the content is not hidden or scrolled.

The only drawback to using the overflow method (in any browser) is the possibility that the containing element will have scrollbars or hide content. If there are any elements with negative margins or absolute positioning inside the parent, they will be obscured if they go beyond the parent’s borders, so this method should be used carefully. It should also be noted that if the containing element has to have a specified height, or min-height, then you would definitely not be able to use the overflow method.

So, there really is no simple, cross-browser solution to the collapsing parent issue. But almost any float clearing issue can be resolved with one of the above methods.

Float-Related Bugs in Internet Explorer

Over the years, there have been numerous articles published online that discuss common bugs in connection with floats in CSS layouts. All of these, not surprisingly, deal with problems specific to Internet Explorer. Below, you’ll find a list of links to a number of articles that discuss float-related issues in-depth:

• The Internet Explorer Guillotine Bug
• The IE5/6 Doubled Float-Margin Bug
• IE7 Bottom Margin Bug
• The IE Escaping Floats Bug
• The IE6 Peekaboo Bug
• The IE6 “Ghost Text” Bug
• The IE6 Expanding Box Problem
• The IE6 3-pixel Gap

Changing the Float Property with JavaScript

To change a CSS value in JavaScript, you would access the style object, converting the intended CSS property to “camel case”. For example, the CSS property “margin-left” becomes marginLeft; the property background-color becomes backgroundColor, and so on. But with the float property, it’s different, because float is already a reserved word in JavaScript. So, the following would be incorrect:

myDiv.style.float = "left";

Instead, you would use one of the following:

// For Internet Explorer
myDiv.style.styleFloat = "left";

// For all other browsers
myDiv.style.cssFloat = "left";

Practical Uses for Float

Floats can be used to resolve a number of design challenges in CSS layouts. Some examples are discussed here.

2-Column, Fixed-Width Layout

Roger Johansson of 456 Berea Street outlines an 8-step tutorial to create a simple, cross-browser, 2-column, horizontally centered layout. The float property is integral to the chemistry of this layout.

“The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. It is also horizontally centered in the browser window. A pretty basic layout, and not at all difficult to create with CSS once you know how to deal with the inevitable Internet Explorer bugs.”

Simple 2 column CSS layout

3-Column, Equal-Height Layout

Petr Stanicek of pixy.cz demonstrates a cross-browser 3-column layout, again using float:

“No tables, no absolute positioning (no positioning at all), no hacks(!), same height of all columns. The left and right columns have fixed width (150px), the middle one is elastic.”

3-Column Layout with CSS

Floated Image with Caption

Similar to what we discussed earlier under “Float in Practice”, Max Design describes how to float an image with a caption, allowing text to wrap around it naturally.

Floating an Image and Caption

Horizontal Navigation with Unordered Lists

The float property is a key ingredient in coding sprite-based horizontal navigation bars. Chris Spooner of Line25 describes how to create a Menu of Awesomeness, in which the <li> elements that hold the navigation buttons are floated left:

How to Create a CSS Menu Using Image Sprites

To demonstrate the importance of the float property in this example, here is a screen shot of the same image after using firebug to remove the float: left:

Grid-Based Photo Galleries

A simple use for the float property is to left-float a series of photos contained in an unordered list, which gets the same result as what you would see in a table-based layout.

Foremost Canada’s product page (above) displays their products in grid-based format, next to a left-column sidebar. The photos are displayed in an unordered list with the float property for all <li> elements set to float: left. This works better than a table-based grid, because the number of photos in the gallery can change and the layout would not be affected.

Paragon Furniture’s futons page (above) is another example of a product page using an unordered list with floated list items.

iStockphoto’s search results page (above) is a similarly-structured grid of photos, but this time the photos are contained in left-floated <div> elements, instead of <li> elements.

Aligning an <input> Field with a Button

Default styling on form elements across different browsers can be a pain to deal with. Often times, in a single-field form like a search form, it is necessary to place the <input> element next to the submit button. Here is a simple search form, with an image used for the submit button:

In every browser, the result is the same: The button appears slightly higher than the input field. Changing margins and padding does nothing. The simple way to fix this is to float the input field left, and add a small right margin. Here is the result:

Conclusion

As was mentioned at the outset, without the CSS float property, table-less layouts would be, at worst, impossible, and, at best, unmaintainable. Floats will continue to be prominent in CSS layouts, even as CSS3 begins to gain prominence — even though there have been a few discussions about layouts without the use of floats.

Hopefully this discussion has simplified some of the mysteries related to floats, and provided some practical solutions to a number of issues faced by CSS developers today.

Further Reading

• Sitepoint CSS Reference: Float
• All About Floats on CSS-Tricks
• Float Layouts @ The Autistic Cuckoo
• Simple Clearing of Floats
• Visual Formatting Model: Floats
• Floating and Clearing

About the Author

Louis Lazaris is a writer and freelance Web Developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts web design articles and tutorials on his blog, Impressive Webs. You can follow Louis on Twitter or contact him using this form.

© Louis Lazaris for Smashing Magazine, 2009. |
Permalink |
21 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: CSS, float

Go to Source

  

One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share.

The interesting part of those statistics is that the numbers across IE6, IE7, and IE8 are very close, preventing a single Microsoft browser from dominating browser stats — contrary to what has been the trend in the past. Due to these unfortunate statistics, it is imperative that developers do thorough testing in all currently-used Internet Explorer browsers when working on websites for clients, and on personal projects that target a broader audience.

Thanks to the many available JavaScript libraries, JavaScript testing across different browsers has become as close to perfect as the current situation will allow. But this is not true in CSS development, particularly in relation to the three currently used versions of Internet Explorer.

This article will attempt to provide an exhaustive, easy-to-use reference for developers desiring to know the differences in CSS support for IE6, IE7 and IE8. This reference contains brief descriptions and compatibility for:

• Any item that is supported by one of the three browser versions, but not the other two
• Any item that is supported by two of the three browser versions, but not the other one

This article does not discuss:

• Any item that is not supported by any of the three browser versions
• Proprietary or vendor-specific CSS

Therefore, the focus is on differences in the three, not necessarily lack of support. The list is divided into five sections:

• Selectors & Inheritance
• Pseudo-Classes and Pseudo-Elements
• Property Support
• Other Miscellaneous Techniques
• Significant Bugs and Incompatibilities

Selectors & Inheritance

Child Selectors

Example

body>p {
	color: #fff;
}

Description

The child selector selects all elements that are immediate children of a specified parent element. In the example above, body is the parent, and p is the child.

Support

Bugs

In IE7, the child selector will not work if there is an HTML comment between the parent item and the child.

Chained Classes

Example

.class1.class2.class3 {
	background: #fff;
}

Description

Chained classes are used when the same HTML element has multiple classes declared, like this:

<div class="class1 class2 class3">
<p>Content here.</p>
</div>

Support

Bugs

IE6 appears to support this property, because it matches the last class in the chain to an element having that class, however, it does not restrict the class to an element that has all the classes in the chain, like it should.

Attribute Selectors

Example

a[href] {
	color: #0f0;
}

Description

This selector allows an element to be targeted only if it has the specified attribute. In the example above, all anchor tags that have href attributes would qualify, but not anchor tags that did not have href attributes.

Support

Adjacent Sibling Selectors

Example

h1+p {
	color: #f00;
}

Description

This selector targets siblings that are adjacent to the specified element. The example above would target all paragraph tags that are siblings of, and come directly after, primary heading tags. For example:

<h1>heading</h1>
<p>Content here.</p>
<p>Content here.</p>

In the code above, the CSS styles specified would target only the first paragraph, because it is a sibling to the <h1> tag and is adjacent. The second paragraph is a sibling, but is not adjacent.

Support

Bugs

In IE7, the adjacent sibling selector will not work if there is an HTML comment between the siblings.

General Sibling Selectors

Example

h1~p {
	color: #f00;
}

Description

This selector targets all siblings that appear after a specified element. Applying this selector to the HTML example given in the previous section will select both paragraph tags, however, if one of the paragraphs appeared before the heading, that paragraph would not be targeted.

Support

Pseudo-Classes and Pseudo-Elements

Descendant Selector After :hover Pseudo-Class

Example

a:hover span {
	color: #0f0;
}

Description

An element can be targeted with a selector after a :hover pseudo class, similar to how any descendant selector works. The above example would change the font color inside all <span> elements inside of anchor elements while the anchor is hovered over.

Support

Chained Pseudo-Classes

Example

a:first-child:hover {
	color: #0f0;
}

Description

Pseudo-classes can be chained to narrow element selection. The above example would target every anchor tag that is the first child of its parent and apply a hover class to it.

Support

:hover on Non-Anchor Elements

Example

div:hover {
	color: #f00;
}

Description

The :hover pseudo-class can apply a hover, or rollover state, to any element, not just anchor tags.

Support

:first-child Pseudo-Class

Example

div li:first-child {
	background: blue;
}

Description

This pseudo-class targets each specified element that is the first child of its parent.

Support

Bugs

In IE7, the first-child pseudo-class will not work if an HTML comment appears before the targeted first child element.

:focus Pseudo-Class

Example

a:focus {
	border: solid 1px red;
}

Description

This pseudo-class targets any element that has keyboard focus.

Support

:before and :after Pseudo-Elements

Example

#box:before {
	content: "This text is before the box";
}

#box:after {
	content: "This text is after the box";
}

Description

This pseudo-element places generated content before or after the specified element, used in conjunction with the content property.

Support

Property Support

Virtual Dimensions Determined by Position

Example

#box {
	position: absolute;
	top: 0;
	right: 100px;
	left: 0;
	bottom: 200px;
	background: blue;
}

Description

Specifying top, right, bottom, and left values for an absolutely positioned element will give the element “virtual” dimensions (width and height), even if width and height are not specified.

Support

Min-Height & Min-Width

Example

#box {
	min-height: 500px;
	min-width: 300px;
}

Description

These properties specify minimum values for either height or width, allowing a box to be larger, but not smaller, than the specified minimum values. They can be used together or individually.

Support

Max-Height & Max-Width

Example

#box {
	max-height: 500px;
	max-width: 300px;
}

Description

These properties specify maximum values for either height or width, allowing a box to be smaller, but not larger, than the specified minimum values. They can be used together or individually.

Support

Transparent Border Color

Example

#box {
	border: solid 1px transparent;
}

Description

A transparent border color allows a border to occupy the same space as would be occupied if the border was visible, or opaque.

Support

Fixed-Position Elements

Example

#box {
	position: fixed;
}

Description

This value for the position property allows an element to be positioned absolutely relative to the viewport.

Support

Fixed-Position Background Relative to Viewport

Example

#box {
	background-image: url(images/bg.jpg);
	background-position: 0 0;
	background-attachment: fixed;
}

Description

A fixed value for the background-attachment property allows a background image to be positioned absolutely relative to the viewport.

Support

Bugs

IE6 incorrectly fixes the background image in relation to the containing parent of the element that has the background set, therefore this value only works in IE6 when its used on the root element.

Property Value “inherit”

Example

#box {
	display: inherit;
}

Description

Applying the value inherit to a property allows an element to inherit the computed value for that property from its containing element.

Support

Bugs

IE6 and IE7 do not support the value inherit except when applied to the direction and visibility properties.

Border Spacing on Table Cells

Example

table td {
	border-spacing: 3px;
}

Description

This property sets the spacing between the borders of adjacent table cells.

Support

Rendering of Empty Cells in Tables

Example

table {
	empty-cells: show;
}

Description

This property, which only applies to elements that have their display property set to table-cell, allows empty cells to be rendered with their borders and backgrounds, or else hidden.

Support

Vertical Position of a Table Caption

Example

table {
	caption-side: bottom;
}

Description

This property allows a table caption to appear at the bottom of a table, instead at the top, which is the default.

Support

Clipping Regions

Example

#box {
	rect(20px, 300px, 200px, 100px)
}

Description

This property specifies an area of a box that is visible, making the rest “clipped”, or invisible.

Support

Bugs

Interestingly, this property works in IE7 if the deprecated comma-less syntax is used (i.e. whitespace between the clipping values instead of commas).

Orphaned and Widowed Text in Printed Pages

Example

p {
	orphans: 4;
}

p {
	widows: 4;
}

Description

The orphans property specifies the minimum number of lines to display at the bottom of a printed page. The widows property specifies the minimum number of lines to display at the top of a printed page.

Support

Page Breaks Inside Boxes

Example

#box {
	page-break-inside: avoid;
}

Description

This property specifies whether a page break should occur inside of a specified element or not.

Support

Outline Properties

Example

#box {
	outline: solid 1px red;
}

Description

outline is the shorthand property that encompasses outline-style, outline-width, and outline-color. This property is preferable to the border property since it does not affect document flow, thus better aiding debugging of layout issues.

Support

Alternative Values for the Display Property

Example

#box {
	display: inline-block;
}

Description

The display property is usually set to block, inline, or none. Alternative values include:

• inline-block
• inline-table
• list-item
• run-in
• table
• table-caption
• table-cell
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group

Support

Handling of Collapsible Whitespace

Example

p {
	white-space: pre-line;
}

div {
	white-space: pre-wrap;
}

Description

The pre-line value for the white-space property specifies that multiple whitespace elements collapse into a single space, while allowing explicitly set line breaks. The pre-wrap value for the white-space property specifies that multiple whitespace elements do not collapse into a single space, while allowing explicitly set line breaks.

Support

Other Miscellaneous Techniques

Media Types for @import

Example

@import url("styles.css") screen;

Description

A media type for an imported style sheet is declared after the location of the style sheet, as in the example above. In this example, the media type is "screen".

Support

Bugs

Although IE6 and IE7 support @import, they fail when a media type is specified, causing the entire @import rule to be ignored.

Incrementing of Counter Values

Example

h2 {
	counter-increment: headers;
}

h2:before {
	content: counter(headers) ". ";
}

Description

This CSS technique allows auto-incrementing numbers to appear before specified elements, and is used in conjunction with the before pseudo-element.

Support

Quote Characters for Generated Content

Example

q {
	quotes: "'" "'";
}

q:before {
	content: open-quote;
}

q:after {
	content: close-quote;
}

Description

Specifies the quote characters to use for generated content applied to the q (quotation) tag.

Support

Significant Bugs and Incompatibilities

Following is a brief description of various bugs that occur in IE6 and IE7 that are not described or alluded to above. This list does not include items that lack support in all three browsers.

IE6 Bugs

• Doesn't support styling of the <abbr> element
• Doesn't support classes and IDs that begin with a hyphen or underscore
• <select> elements always appear at the top of the stack, unaffected by z-index values
• :hover pseudo-class values are ignored if anchor pseudo-classes are not in the correct order (:link, :visited, :hover)
• An !important declaration on a property is overridden by a 2nd declaration of the same property in the same rule set that doesn't use !important
• height behaves like min-height
• width behaves like min-width
• Left and right margins are doubled on floated elements that touch their parents' side edges
• Dotted borders appear identical to dashed borders
• line-through value for text-decoration property appears higher on the text than on other browsers
• List items for an ordered list that have a layout will not increment their numbers, leaving all list items preceded by the number "1"
• List items don't support all possible values for list-style-type
• List items with a specified list-style-image will not display the image if they are floated
• Offers only partial support for @font-face
• Some selectors will wrongly match comments and the doctype declaration
• If an ID selector combined with a class selector is unmatched, the same ID selector combined with different class selectors will also be treated as unmatched

IE7 Bugs

• List items for an ordered list that have a layout will not increment their numbers, leaving all list items preceded by the number "1"
• List items don't support all possible values for list-style-type
• List items with a specified list-style-image will not display the image if they are floated
• Offers only partial support for @font-face
• Some selectors will wrongly match comments and the doctype declaration

Some IE bugs not mentioned here occur only under particular circumstances, and are not specific to one particular CSS property or value. See the references below for some of those additional issues.

Further Resources

• Details of Changes in Internet Explorer 8
• CSS Compatibility for Internet Explorer (MSDN)
• CSS Improvements in Internet Explorer 8 (MSDN)
• Internet Explorer Exposed - CSS Bugs @ Position Is Everything
• SitePoint CSS Reference
• CSS Contents and Browser Compatibility
• 10 Useful CSS Properties Not Supported By Internet Explorer

About the Author

Louis Lazaris is a writer and freelance Web Developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts web design articles and tutorials on his blog, Impressive Webs. You can follow Louis on Twitter or contact him using this form.

© Louis Lazaris for Smashing Magazine, 2009. |
Permalink |
36 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: CSS, internet explorer

Go to Source

Don’t you wonder sometimes, when looking at something, how you can create something like that yourself? I have to admit that I do. This is why I came up with the Skype for Mac and the iPhone examples in your webbrowser. Today, we’re trying something new in this Proof of Concept category: creating a theatrical movie trailer with jQuery

This technique could be really well used when creating a slide-show that just needs some text. Using the CSS letter-spacing property, we can really make it look like the movies.

  

I’ll leave out the CSS in this tutorial, since not much really important stuff is going on there. This example works best in Firefox – Although it works in Safari and Opera too, the letter-spacing CSS property gets rounded up (or down) and you won’t be able to see the full effect. Also, you’ll need to imagine the sound effects yourself.

Read more…

Go to Source