Various bits

This is just a random group of bits I have come across since my last post.

Portable Forms

One of my previous posts was about creating Portable CSS Forms. Dragan Babić has took this idea and expanded it in to the Uni-Form. By grouping a collections of semantically correct tags in to "units".

Fixing 'standalone' IE6

If you have 'standalone' IE6 on your pc, you may have noticed that some stuff (particularly the conditional comments shown earlier) doesn't work. Manfred Staudinger on Position is Everything has brought together all the stuff you need to do to fix these and get it working properly article here. If you only need the Conditional Comments to work, it's under 'Repairing Conditional Comments' about ¼ down the page.

UK Stamp Icons

WOW! Another post

Well I have finally got around to making another post, and this one is quite substantial

UK Mail (and others) stamp icons

Re-hosted due to popular demand. (I have had a few requests for this recentely)
When Apple introduced it's email app along with OSX I felt that the Icon (an eagle) was very USA orientated so I created a more UK based set, using Royal Mail stamps. This set also keeps with the Uk theme by having "Hello From Stockley Park .UB" instead of "Cupertino .CA", Stockley Park being where Apple UK is based. They are available as two sets, the more traditional flat, and with a slight gradient, making them look shiny. Both set contain the modern Gold, and older Red first class stamps, along with the Blue second class stamp (as I thought I fitted with the look of OSX better).

Download (zipped)
.png .icns

Download (zipped)
.png .icns

I also did a second type. These were done using a Special Edition set of stamps that the Royal Mail where doing at the time.

Download
.png .icns .sit

Download
.png .icns .sit

Download
.png .icns .sit

Download
.png .icns .sit

Along with the four UK stamps I also did some others.

Download
.png .icns

Download
.png .icns

Download
.png .icns .sit

Download
.png

If you wish to create your own, you can download the source Photoshop file Original (UK_mail_icon_psd.zip 336kb) & 2nd type (Mailicon.psd.sit 616kb)

Other bits (IE6 Conditional  Comments)

The release of IE7 was a few months back now, and it's popularity seams to be growing quite well. Even on the Parkside Action Group site, which will have a decidedly non Tec/geek visitor demographic has around 40% of it's visitors now using IE7 (according to Google Analytics). With this in mind, and the fact that it supports lot's of nice CSS with less bugs that IE6 can only be a good thing. But you say you can't just start giving up on IE6 this is where Conditional Comments come to the rescue. With this short bit of code you can send IE6 the CSS that can fix the bits it wont understand (such as Min & Max width).

1. you first have your link to the regular CSS

<link rel="stylesheet" href="pagestyle.css" type="text/css" media="screen" />

2. Then anywhere below this in the HTML head you place the Conditional Comment bit

<!--[if lte IE 6]>
<style type="text/css" media="screen">
#hp_col_1 {width:301px; height:530px;}
#hp_col_2 {width:301px; height:530px;}
#hp_col_single {width:603px; height:400px;}
#head div.pic, #hp_col_single, .imagecont {width:603px;}
#hp_col_1 .imagecont {width:301px} #minwrap {width:770px;}
</style>
<![endif]-->

Easy eh! I have chose to inline a bit of CSS to replace the min-width and min-height that is in the main Style Sheet. But there is nothing stopping putting in a link to a complete CSS file.

All other browsers ignore it as a HTML comment, but IE6 understands the [if lte IE 6] bit and see's the code.

One problem, If you have got IE6 as a 'standalone' app, so you can test alongside IE7 the above doesn't work as the PC says it's using IE7 and skips the comment. There is a similar problem that effects the Google map Api as the location pointers etc don't appear on the maps with the standalone IE6.

Merry Christmas

Merry Christmas to everybody who has discovered my blog.

I will hopefully get round to doing some more posts in the new year, work has been a bit hectic over the past few weeks so I haven't got round to making new posts.

sIFR 3 beta

One thing that has caught my eye in the past few days is a BETA of the next generation of the excellent sIFR which (by utilising Flash) enables you to use almost any font on a webpage.
The new version promised by this beta is ushering in a host of updates an modifications, including script support for the various effects modes that arrived with Flash 7.

sIFR 3b1: The Mo’ Betta Beta

Google Maps extra Info

I have had some feedback that the earlier Google maps post neglected on how to get the GLatLng value for the centre (and placing other locations) on the map. It's fairly simple using main Google map site.

1. Go to the Google map site for the chosen region eg. http://maps.google.co.uk/ and search for the required location. (postcode, location, whatever)
2. Double click on the point on the map you want the GLatLng code for (the double click re-centres the map).
3. click the 'Link to this page' link over on the right just above the map. This places a 'real' URL for the location in the address bar.
4. Towards the end of this 'Full' address are 4 sets of long numbers with possibly a lot of decimal places ie. 53.272836,-2.491193&spn=0.00734,0.020599 the first two of these are your GLatLng values (ie.53.272836,-2.491193 in the example).

here are some other links you may find useful

Dreamweaver Tools for Google™ 1.0.1 A set of Dreamweaver extensions for simple placing of Google components on webpages without touching any Jscript
Googles own Map wizard Automatically creates the code (and an API Key) for placing a map on your page, just copy and paste. It will also place a 'Search Map' box also.

Google Maps

Google's map API has been available for ages now allowing anybody to put a Google map on there webpage. But yesterday one of the people I work with asked how to use one to show the location of a place on the site he was building, I told him to do a Google search for Google Map API and click on the first link, easer than remembering the exact address. He than called me over as to help as Google's documentation goes off a cliff. They have the simple example, then how to add the controls, but then it jumps a mile, instead of a example of how to add one marker, they show how to add ten random ones within a contained area. A quick search also didn't show any 'Simple' documented examples.

So this is a SIMPLE Google map

Here is a nice simple Google map with one fixed location. It also uses some Javascript so you don't need to add onload="load()" onunload="GUnload()" in to the head HTML tag that is often locked within the un-editable section of a Dreamwever template.

Download Source

ziped HTML File With comments to help
Don't forget you need a Google map Key for your site. Sign up Here

Portable CSS Forms

Forms have always been a right pain to layout nicely. When tables where used to lay them out you always ended up with very complicated tables, with often ages spent dragging the table borders around in Dreamweaver in an attempt to get it to behave. The transition to table less CSS controlled layouts didn't seam to make things any simpler, with some people sticking to using tables to layout them, but using CSS to control the sizing etc.

There are many tutorials and Ideas around on the web for creating CSS forms. Having tried what seams like almost all of them, I have merged the best ideas from each in to my Portable Forms. So called because with this I can easily use almost exactly the same (fairly light) XHTML code (I just copy & paste the entire Form Container div) and make some minor tweaks to the CSS from one site to the next. Adding more fields is extremely simple, Even fairly complicated multiple column form layouts don't add too much extra code.

Simple Example

Below is a simple example showing the concept

HTML

<div id="form-container">
<form action="" method="post" enctype="multipart/form-data" name="form1" >
<p>
<label for="name">Name </label>
<span class="formw"><input type="text" name="name" class="singleline-field" id="name" />
</span></p>
<p><span class="formw">
<input type="submit" id="Submit" value="Submit" /></span></p>
</form>
<br class="clear" />
</div><!--/#form-container-->

CSS

#form-container{
float: left;
width: 300px;
margin-bottom: 8px;
}
#form-container form p {
width: auto;
clear: both;
height: auto;
margin: 3px 0 2px 0;
background-color: transparent;
}
#form-container form p label {
float: left;
width: 15%;
text-align: right;
margin-top: 5px;
}
#form-container form p span.formw {
float: right;
width: 83%;
text-align: left;
}
#form-container .singleline-field {
width: 250px;
height: 15px;
font: 11px Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 3px 0 3px 0;
}

Expatiation

The form-container div (which wraps round the entire form) can be named anything, so if the site is going to have multiple very different forms there isn't problem there and it's a easy way to 'target' all the HTML tags within the form without adding loads of classes to everything. The P tags keep the lines separate. The often overlooked label tag comes (which is useful for accessibility) in very handy here allowing to set a width of the field labels and float them left. The only 'extra' bit of HTML that is added is the span tag round the form fields, this allows us to to set a width to contain the field (I always find a few percent less than 'perfect' works best, i.e. the widths of the label and this span adding up to less than 100%)

Drawbacks:
I have found this code to be fairly rock solid, but there are some unforeseen drawbacks. As you can see above you really need to set a width for the actual form fields themselves, for some reason each different field is measured slightly differently i.e. if both select (drop down menu) and text (single line) fields have the same width set in the CSS, they end up slightly different lengths in the browser (and a file field, for uploading images for example is even worse). For a multiple column form (example linked below) the XHTML code isn't really in the correct order, this can be partly solved in the browser for entering information with the addition of 'tabindex' properties to the input tags, but if CSS is disabled the form field order my be out of sync

Full Examples

Single Column : Twin Column
View source on the resulting pages to see the XHTML and CSS, although I would recommend linking the CSS file for 'real life' use

Full CSS buttons (with mouse overs)

Provides accessible links too Lots of thanks to Petr Stanicek (a.k.a. “Pixy”) who devised the original tecnique for headers on which this idea is based
There a few ways of creating 'buttons' on sites that fit within the style of your site. From just using an image link to applying graphics to 'form' buttons. This method is both quite simple, and code lite, along with the bonus of keeping the link accessible by the both screen-readers and search-engine 'bots'. example below

HTML

<span class="examplebutton">
<a class="button" title="pure CSS button" href="#"><span>&nbsp;</span>Go</a>
</span>

CSS

.examplebutton a.button {
float: left;
width: 33px;
height: 25px;
background: url(butn-go.gif) no-repeat top;
cursor: pointer;
overflow:hidden;
}
.examplebutton a.button span {
display: block;
width: 33px;
height: 25px;
}
.examplebutton a.button:link, .examplebutton a.button:active, .examplebutton a.button:visited {
width: 33px;
height: 25px;
display: block;
text-decoration: none;
}
.examplebutton a.button:hover span {
width: 33px;
height: 25px;
display: block;
text-decoration: none;
background: url(butn-go-hov.gif) no-repeat top;
}

Expatiation

What we have is a an '<a>' tag with class (so it can be targeted from the CSS) in which is contained the text thats relevent (this is why it's more accessable than a regular image within a <a href> without the CSS or the image it's just a regular text link) and a <span> containing a non breaking space, the non breaking space gives the hover something to 'hold' on to. What hapens is the fixed size of the <a> stops whatever text the button requires spilling out and taking up too much browser space. This lets the span, with it's display:block take up all the <a> tags space, placing the button image as a background then covers over the remaning visible text in the <a> tag. In all the sudo classes (:hover, :active, :visited & :link) text decoration: none is added to keep the underline off the non breaking space, keeping it invisible. The final part is to add a 'mouseover' state, this is done by using the :hover sudo class adding the <span>, this places the mouseover on top of the existing button image, instead of replacing it. So reducing the likelyhood of thet ugly flicker that sometimes happens in IE when loading a background image on a :hover state.

Hopefully these buttons should be of use to someone. My next post should be an example of highly portable 100% CSS forms. These are a mixture of a few CSS form methods that are flexable enough to use in multiple sites with fairly small changes to the HTML & CSS, thay are also WC3 compliant.