To create a group of options, wrap them in an optgroup element. To give the group a label, use the label attribute. Here is a simple example:

1
2
3
4
5
6
7
8
9
10
11
12

<label for="phones">Select a phone:</label>
<select name="phones" id="phones">
	<option value="" selected>None</option>
	<optgroup label="Apple">
		<option value="iphone">iPhone</option>
	</optgroup>
	<optgroup label="Nokia">
		<option value="n91">N91</option>
		<option value="e60">E60</option>
		<option value="6300">6300</option>
	</optgroup>
</select>

And here is how the browser you are currently using will render the above example:

Select a phone:
None

iPhone


N91
E60
6300

One caveat is that assistive technology support for the optgroup element and the label attribute is inconsistent, as noted in Creating Accessible Forms at WebAIM and the WCAG 2 technique H85: Using OPTGROUP to group OPTION elements inside a SELECT.

So I tend to stick with fixed-width layouts, a 960px web design width in particular. It reduces the effects of the visitor x-factor and it’s just about perfect for any website.

960px for the largest audience and the most flexibility
Below is a screenshot of the screen resolution statistics from W3Counter for September 2009. (Percentages were calculated from traffic to over 27,000 websites.)

The most popular screen resolution for the last several years has been 1024×768. And that’s been trailed by even larger resolutions. Granted, the numbers may change depending on the audience for a website. Sites dedicated to design, photography, or technology, for instance, will show a higher percentage of large screens. But, if you want a website to stay true to your vision for the largest number of visitors, then 1024×768 is the starting point.

From there, you have to take into account all the kooky things visitors can do with their browsers and what design options a particular size offers. This is where a 960px web design width shines.

• It leaves room for browser chrome and window resizing – The title bar, search box, scrollbars, menus, and toolbars all take up space within the 1024×768 viewing area. You also have to account for the fact that some visitors won’t have their browser windows maximized, so you may lose even more space. A 960px width allows you to pack in a lot of information and still leaves room for inconsistencies in window size.
• It’s evenly divided by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, and more – That leads to a staggering amount of grid options. Whether you’re into complex magazine-style layouts or just want a simple two-, three-, or four-column layout, a 960px width makes it easy to create a well-proportioned design.

What about 800×600 screen resolutions?
Some businesses and government agencies have been slow to upgrade from small displays and ancient browsers. If you’re sure the majority of your audience will sit in front of screens with an 800×600 resolution, then it’s a design limitation you have to live with.

If, however, you just want to accommodate every last visitor (I know the feeling), there’s a workaround. Create your design with a width of 960px, then position the navigation on the right side of the layout. Even though visitors with small screens will see a horizontal scrollbar, the full width of the content area should be visible on every page without scrolling. It’s a compromise, but that’s why I said a 960px width is just about perfect.

As web designers, we don’t have the luxury of creating a pixel-perfect layout for every visitor. But a 960px web design width can go a long way toward putting control over finished sites back in our hands.

Five Finger Coding

border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image

border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

border-image currently does not work in Opera and IE.

Let’s start. I use this image for borders:

The syntax to use it is:

1
2
3
4
5
6

-o-border-image: url('border.gif') 27 round round;
-icab-border-image: url('border.gif') 27 round round;
-khtml-border-image: url('border.gif') 27 round round;
-moz-border-image: url('border.gif') 27 round round;
-webkit-border-image: url('border.gif') 27 round round;
border-image: url('border.gif') 27 round round;

Which results in:

Lorem ipsum dolor sit amet.

Or:

1
2
3
4
5
6

-o-border-image: url('border.gif') 27 stretch stretch;
-icab-border-image: url('border.gif') 27 stretch stretch;
-khtml-border-image: url('border.gif') 27 stretch stretch;
-moz-border-image: url('border.gif') 27 stretch stretch;
-webkit-border-image: url('border.gif') 27 stretch stretch;
border-image: url('border.gif') 27 stretch stretch;

Which then results in:

Lorem ipsum dolor sit amet.

For those of you not so lucky as to be able to see this, here are screenshots of the two examples.

The First Example:

The Second Example:

Also use:
-moz-border-image – for Firefox
-o-border-image – Opera
-khtml-border-image – KDE
-webkit-border-image – Safari
-icab-border-image – iCab

Read an original specification here

CSS3 info

Opera Software’s newest browser, Opera 10 with Turbo, was downloaded 10 million times during the first week of release. With record download rates, Opera 10 is already in use by millions of users around the world.

New to the Opera 10 browser is the concept of turbo browsing under circumstances of low bandwidth. Low bandwidth is a universal factor in multiple browsing situations, for example, on a train, in a hotel or in areas with limited connectivity. With the launch of Opera 10 with Turbo, Opera has pointedly addressed the needs of Web users when browsing on slow or congested networks.

• Exclusive Opera Turbo compression boosts slow connection speeds
• Innovative visual tabs displays Web sites in thumbnails
• Intuitive, sleek design
• Easy-to-personalize Speed Dial visual bookmarks
• Everything built-in, no need for extensions
• It’s free!

To rescue the web designers from this aching job of testing browser compatibility in different browsers there are few websites which offer this service. On these websites you can check the compatibility of your website in all desired browsers. You can find these websites below:

Browsershots	Browsershots
Spoon	CrossBrowserTesting
NetRenderer	Litmus
BrowserCam

Private Browsing
Sometimes it’s nice to go undercover. When this feature is enabled, you won’t leave a single browsing fingerprint behind for others to discover. You can slip in and out of private browsing mode quickly, so it’s easy to return to what you were doing before as if nothing ever happened (you can also browse privately all the time).

Forget This Site
Having second thoughts about having visited a certain Web site? With this feature, you can remove every trace of that site from your browser—no questions asked!

Super Speed
Fasten your seatbelt: Firefox 3.5 includes the TraceMonkey JavaScript engine, which gives the browser dramatically better performance than ever before. Firefox has always been fast, but this is the fastest Firefox ever (more than twice as fast as Firefox 3, and ten times as fast as Firefox 2), meaning Web applications like email, photo sites, online word processors and more will feel snappier and more responsive.

Easy Organization
Get your sites in order. Simply arrange the order of your tabs by dragging them in one swift move of your mouse. Or, if your browser window is getting cluttered with too many tabs, just drag a tab out of its existing spot and it will automatically open up in a new window.

Downloadable Fonts
View a wider variety of fonts on Web sites while you surf. Site designers and developers can create custom fonts that will be displayed and rendered properly even if you don’t have the font installed on your computer.

Location-Aware Browsing
Now Firefox can tell websites where you’re located so you can find info that’s more relevant and more useful (for example, getting directions or finding restaurants near you). It’s all optional – Firefox doesn’t share your location without your permission – and is done with the utmost respect for your privacy.

Open Video and Audio
Introducing the future of online media! Firefox is the first browser to support open video and audio formats, allowing practically limitless new ways for sites to display rich content. The open formats also allow modern web pages to display media without requiring a plug-in or a proprietary software download.

And many other… Read more here

For all examples I will use same Xhtml code.

1
2
3
4
5
6
7
8
9
10
11
12

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Example - Crazy Xhtml</title>
	<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
	<div id="wrapper">
	</div>
</body>
</html>

All changes I am doing in the style.css in #wrapper{ … }

Let’s define standard styles for wrapper block of our small website. I am adding borders and background. It helps to see website position.

1
2
3
4
5
6

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
}

Center Middle Align (Center Horizontal)

Use next #wrapper styles:

1
2
3
4
5
6
7
8
9
10
11
12

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -150px;
}

So, in my example width=400px, so for margin-left I calculated value as this 400/2=200. The same do for margin-top – 300/2=150.

You can download example here

Center Bottom Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8
9
10
11

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-200px;
}

The main idea is same, but I am using bottom=0 to move #wrapper block to the bottom of the browser.

You can download example here

Center Top Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	margin:0 auto;
}

If you want, you can add top margin for #wrapper. For example, I add 20px:

1
2
3
4
5
6
7
8

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	margin:20px auto 0 auto;
}

You can download example here

Left Middle Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8
9
10

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	top:50%;
	margin-top:-150px;
}

The main thing is to correct calculate of margin-top.

You can download example here

Right Middle Align

1
2
3
4
5
6
7
8
9
10
11

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	top:50%;
	margin-top:-150px;
	right:0;
}

The code the same as above, but I add right:0 to move #wrapper to right part of browser.

You can download example here

In Conclusion, I think you can create code for Right-Top, Right-Bottom, Left-Top and Left-Bottom easily using my code above.

Thanks for the reading.

This is a simple example of Creating Cross Browser Compatible CSS Text Shadows. We will not use Images, only clear CSS code which work for all browsers.

Let’s create xhtml code:

1
2
3
4

<p>
   <span class="shadow">Cross Browser Compatible CSS Text Shadows</span>
   <span class="text">Cross Browser Compatible CSS Text Shadows</span>
</p>

I do not know if it is good for SEO, but for this method you need to duplicate content where you want add shadows. I think it is good for SEO, because you will not do shadows for ALL content of your website.

Next step: add this CSS code:

1
2
3
4
5
6
7
8
9
10

.text{
	position:relative;
	z-index:10;
}
.shadow{
	color: #cccccc;
	position:absolute;
	z-index:5;
	margin:2px 0 0 2px;
}

I think this is a very simple way to use shadows.

You can download an example here.

Each browser uses its methods, so we need to create styles for each browser. Let’s start with default xhtml code which we will use for our example.

1
2
3
4
5
6
7
8
9
10
11
12
13

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Example - Crazy Xhtml</title>
	<style type="text/css" media="all">@import "style.css";</style>
	<!--[if lte IE 8]><style media="screen,projection" type="text/css">@import "ie.css";</style>< ![endif]-->
</head>
 
<body>
	<p class="shadow">Cross Browser Compatible CSS Text Shadows</p>
</body>
</html>

All versions of Internet Explorer

I have added special code which will load stylesheet file only for Internet Explorer, like this:

1

<!--[if lte IE 8]><style media="screen,projection" type="text/css">@import "ie.css";</style>< ![endif]-->

So, enter to ie.css next CSS style:

1
2
3
4

.shadow {
	height:20px;
	filter: Shadow(Color=#cccccc, Direction=120, Strength=4);
}

Filter is supported only by Internet Explorer. Also for Internet Explorer 8 will add next code too.

1
2
3
4
5

.shadow:before {
  margin: 0;
  padding: 0;
  content: '';
}

Firefox , Chrome, Safari, Opera and SeaMonkey

1
2
3
4
5
6
7
8
9
10

.shadow{
	white-space:nowrap;
}
.shadow:before {
	display: block;
	margin: 0 0 -25px 3px;
	padding: 0;
	color: #cccccc;
	content: 'Cross Browser Compatible CSS Text Shadows';
}

white-space:nowrap; – this is a hack I am using to fix a small bug in Opera and Safari.

By the way, the next code you can use only for Safari and Opera:

1
2
3

.shadow {
	text-shadow: #cccccc 2px 2px 2px;
}

This is a method rendering more beauty and real shadows.

Lol, last code is very simple. Why don’t all browsers use it? Maybe next generation of Firefox and Internet Explorer will use it too.

You can download an example here.

P.S. Read here about a very easy way how to add shadows for all Browsers using only one xhtml/css code.

• Crash in nsTextFrame::ClearTextRun()
• Fixed a major stability issue.

You can read more here