The CSS:

.store-countries {
    padding-left: 20px;
    background-position: 4px 2px;
    background-repeat: no-repeat;
}
.store-countries option {
    padding: 0 0 0 24px;
    background-position: 2px 4px;
    background-repeat: no-repeat;
}
.store-countries option.Belgium {
    background-image: url(../images/icons/flags/be.gif);
}
.store-countries option.France {
    background-image: url(../images/icons/flags/fr.gif);
}
.store-countries option.Germany {
    background-image: url(../images/icons/flags/de.gif);
}

The jQueries:

function dropDownCountries() {
    $('.store-countries').find('option').each(function() {
        var country = $j(this).val();
        $(this).addClass(country);
    });

    var selectedFlag = $('.store-countries').find('option:selected').css('background-image');
    $('.store-countries').css('background-image',selectedFlag)

    $('.store-countries').change( function() {
        var selectedFlag = $('.store-countries').find('option:selected').css('background-image');
        $('.store-countries').css('background-image',selectedFlag)
    });
}

1. Wrap the checkbox in a label:

<label>Save for later <input type="checkbox" value="1" name="list" class="checkbox" /></label>

2: Hide the checkbox and style the label:

.save-for-later {
	cursor: pointer;
}
.save-for-later input {
	display: none;
}
.checked {
	text-shadow: 1px -1px 1px rgba(68,68,68,0.4);
	position: relative;
	top: 1px;
	left: 1px;
}

3. Check the box when the label is clicked:

jQuery(function() {
    labelCheck();
});

function labelCheck() {
    $("#container .save-for-later").each( function(){
	$(this).find('input:checkbox').change(function() {
	    $(this).parent().toggleClass('checked');
	});
    });
}

2. http://www.modernizr.com/ – adds feature capability as classes to the HTML tag.

3. http://selectivizr.com/ – adds pseudo classes for IE6 & 7

4. Webkit doesn’t do inset shadows with round corners, but adding normal drop shadow in a minus direction may give a good equivalent. (corrected in latest version)

5. For IE it’s difficult to add round corners and drop shadows.

There’s a good tutorial from http://www.w3.org/Style/Examples/007/roundshadow.en.html to add drop shadows without extra markup. Good only for IE8.

In conjunction with http://selectivizr.com/ this can allow us to even add round corners in IE6 & 7. (also good for zebra table styling, IE6 hover, targeting a variety of different inputs)

or use jQuery:

$('blockquote:after').addClass(&quot;boom&quot;); <br />
$('blockquote').after(' &lt;img src=&quot;/images/external.png&quot; alt=&quot;external link&quot;/&gt;'); <br />
$(&quot;img.dropshadow&quot;).wrap(&quot;&lt;div class='wrap1'&gt;&lt;div class='wrap2'&gt;&quot; + &quot;&lt;div class='wrap3'&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&quot;);

Or use curvy corners: http://blue-anvil.com/jquerycurvycorners/test.html

6. Gradient filters
- e.g.
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#c31026′, EndColorStr=’#5f0004′);

for IE – only work on IE6 & 7 if a height is set. (If you cannot use a height then set a background image – you will need background images for gradients in older versions of Firefox and Safari.)

7. Combining background images and gradients:

Opera cannot combine background images and gradients, but purports to support css-gradiesnts. Therefore the background image needs to be positioned using a separate element e.g. a span inside a button, – if for example you want just the gradient to reverse on hover, or you need to serve different css to opera browsers. This is the same for IE (including IE9)

8. Test in:

Firefox 3.6.13
Firefox 3.0 (No support for CSS3 round corners & gradients)
Firefox 2.0 (No support for CSS3 round corners & gradients)

IE 8 – (No support for CSS3 round corners)
IE 7 – (No support for CSS3 round corners & gradients)
IE 6 – (Fully functional, No support for PNG opacity, CSS3)

Safari 5 (5.0.2)
Safari 4 (4.0.5)
Safari 3 (3.2.3)

Chrome 8

Opera 11
Opera 10 (10.6.3) (No support for CSS3 round corners & gradients)

These will stretch to fit any amount of text – even if it gets so large it becomes a banner.
They use just one image – and have a ”web 2.0” sheen.
They have an icon (which can be positioned to the left or right)
They have a hover state – the text and the background colour can change.

Shrink-wrapped buttons
Shrink-wrapped buttons

Shrink-wrapped buttons
..and a final one!

Here’s the code:

a.btn,
a.btn:visited {
    float:left;
    background-color: #80c64c;
    background-image: url(/images/blog/btn.png);
    color:#fff;
    text-decoration:none;
    font-size:0.95em;
    clear:both;
    margin:0 0 12px 6px;
    line-height: 1.1;
    letter-spacing: 0;
}
a:hover.btn {
    color:#ff0;
}
a.btn * {
    display:block;
    font-weight:normal;
}
a.btn b {
    margin-left:6px;
    padding:2px 0 0 0;
    background: transparent url(/images/blog/btn.png) right top;
}
    a.btn b b {
    margin:0 0 0 -6px;
    padding:0 0 0 12px;
    background-position: left bottom;
}
a.btn b b b {
    padding:6px 12px 12px 0px;
    margin: 0;
    background-position: right bottom;
    text-indent: -3px;
}

a.btn_grn,
a.btn_grn:visited {
    background-color: #80c64c;
}
a.btn_grn b b b b {
    padding: 0 28px 0 0;
    background-image: url(/images/blog/arrows.png);
    background-position: right center;
    background-repeat: no-repeat;
}

<a class="btn" href="#">
    <b><b><b>Shrink-wrapped buttons</b></b></b>
</a>

<a class="btn_grn btn" href="#">
    <b><b><b><b>Shrink-wrapped buttons<b></b></b></b>
</a>

<a class="btn_grn2 btn" href="#">
   <b><b><b><b>Shrink-wrapped buttons</b></b></b></b>
</a>

<a class="btn_brwn btn" href="#">
    <b><b><b>..and a final one!</b></b></b>
</a>

This is an adaption to the work done by:
schillmania.com – More Rounded Corners with CSS
456bereastreet.com – Bulletproof shrinkwrapping buttons

Here’s the code and image:

    .tags {
	margin: 0 0 5px 0;
	padding: 0;
	list-style: none;
	background-colour: transparent;
    }
    .tags li {
	display: inline;
    }
    .tags li a {
	display:block;
	float:left;
	font-size:14px;
	line-height:16px;
	height:20px;
	overflow: hidden;
	margin: 5px 0 0 0;
	padding: 4px 14px 0 26px;
	text-decoration:none;
	background:transparent url(/images/blog/tag.gif) no-repeat 0 0;
	border-right:1px solid #666666;
    }
    .tags li a:hover {
	background-position: 0 -24px;
    }

<ul class="tags">
      <li><a href="#">tag 1</a></li>
      <li><a href="#">tag whatever you like</a></li>
      <li><a href="#">tag three</a></li>
</ul>

.replace {
      position:relative;
      margin:0; padding:0;
}
.replace span{
      position:absolute;
      top:0; left:0;
}
#logo a, #logo span {
      display: block;
      width:218px;
      height:51px;
      background-image: url('images/logo.jpg');
}

<h1 id="logo">
<a class="replace" href="#" title="Site name">Site Name<span></span></a>
</h1>

Note: This example ensures the text is visible if images are turned off. This technique does not work with transparent images.

Testing and evaluating DHTML menu trees.

Each menu included in the list (below) has it’s own testing area. They’ve been tested for full functionality within a working ‘mini site’ and adapted to demonstrate whether it’s possible to open nested levels and display the current location without altering the body tag.

Here’s the list of menus with a link to the test and a link to the original sites:

Displaying the ‘current location’ is vital for clear site navigation. This feature is not usually included with the original menu source code. In order to test whether it is possible to adapt the menus to include this feature each menu has been set up – where possible – to indicate the ‘current location’ and automatically open the tree at that level.

Links below include the local test area and the original URL providing the source code.

Only free-of-charge menu systems are included in this evaluation.

Overview of evaluation criteria:

• Is it accessible? Driveable by keyboard only?
• How separate is the content, presentation, and behaviour.
• Does it degrade well without JavaScript or CSS?
• How easy is it to indicate the ‘current location’ of the page selected?
• Does it opens and displays current status for an included page – [e.g. HTML: main.php?page=page1.] i.e. cannot use body tags or code in section of page?
• When clicking on the parent item / title of the section do the nested list items open – i.e. not just clicking on the graphic which can cause confusion?
• Is it xhtml 1.0 strict valid?

In order to keep the nested levels visible at a specific location I have used one of two types of server-side functions:

<?php
$theuri = $_SERVER['REQUEST_URI']; ?>
<?php
if ( ($theuri =="/s01sub1a01.php") or ($theuri ==
"/tests/menu13/section1pages/s01sub1a02.php"))
echo " class="liOpen"";
else echo " class="liClosed""; ?>

or

<?php
if ( ($thisPage=="s01sub1b01")
or ($thisPage=="s01sub1b02") or ($thisPage=="s01sub1b03") )
echo " rel="open""; ?>

A better method to use is demonstrated below.
This has not been used in these tests because of the need for
modRewrite using the RewriteEngine:

$lines = split("n", $menu);
foreach ($lines as $line) {
$current = false;
preg_match('/href="([^" mce_href="([^"]+)"/', $line, $url);
if (substr($_SERVER["REQUEST_URI"], 0, 5) == substr($url[1], 0, 5)) {
$line = str_replace('<a h', '<
a id="current" h', $line); }
echo $line."n";
}

[Full source code available at: http://photomatt.net/ ]

or

<?php
$menu =
file_get_contents("/inc/menu.htm");
$menu = preg_replace("|<li><
a xhref="" .
basename($_SERVER['PHP_SELF']) . "">(.*),/code><!--[^-->]+>
</li>|U","<
li class="current">$1</li>", $menu);
echo $menu;
?>