<option disabled=”disabled”>?</option> not implemented in MSIE

This was a complete shock to me recently, even after years of ‘assuming’ that something this simple would be well supported… after all, this is pretty basic.

All modern browsers Mozilla (Firefox), Safari, Opera, even old Netscape (eg: 4.x) browsers work properly with the following code and comply with the W3C HTML specification making the value “Two” unable to be selected by the user within the browser… MSIE doesn’t comply and allows the user to select it!

<form name="example" action="#" method="get">
<select name="test">
<option value="1">One</option>
<option value="2" disabled="disabled">Two</option>
<option value="3" selected="selected">Three</option>
<option value="4" style="color:green;">Four</option>
</select>

</form>

This ‘failure’ to support standards actually seems to be due to the way the <select> tag is handled by the browser… it passes off control to the operating system (Windows). Obviously, Microsoft was able to pass along ‘other’ attributes, like ‘style’ in the example above, but chose to not support ‘disabled’.

In this case, the developer is left to find a solution… easiest is to just remove the unwanted value from the list of options, otherwise it requires extensive amounts of JavaScript.

Good luck!

NOTE: Tested on MSIE 6.0 (WinXP), hopefully Microsoft will fix this in MSIE7.

CSS implemention in HTML

CSS = Cascading Style Sheets, this is done primarily to externalize the ‘look and feel’ of a web page from the actual ‘data’ being presented.

There are several ways to do this…
1. External file (most common)… add the following to the <head> section of your page:

<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="/filename.css" media="all" />

2. Inline (usually in the <head> section of every page):

<style type="text/css" media="screen">
<!--
... // some stuff here.
-->
</style>

3. Inline (on individual tags):

<div style="color:red;">Red text</div>

NOTES:
1. Media types (common – though others exist!):
* screen
* print
* all

2. Guideline: always use lowercase names in your CSS, MUST start with an alpha (not numeric).

Why <!DOCTYPE …>?

The !DOCTYPE directive is one of the most commonly misunderstood parts of markup in the entire page, additionally, most WYSIWYG editors get it wrong.

This serves two major purposes, with one common goal – ‘standards’!

1. Validators can easily look to the markup to determine which version of the HTML/XHTML standard to validate against (actually, it’s done against the DTD that you define within the tag).

2. Browsers also use this tag to determine which version of the HTML/XHTML standard to render with… however, the most common browser currently on the market (MSIE), chooses to ignore it!

3. Other markup languages (decendent of SGML, like HTML and XHTML) like WML also use this tag.

NOTES:
1. This tag doesn’t follow standard XML rules, there is NO close tag, but it’s not self-closing either.
2. This MUST be the very first line of output in your HTML.
3. Because of the MSIE issue, you cannot start your page with: <?xml version="1.0"?> for XML!

Some common examples:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

References:

NOTE: this process is obsolete, from what I can gather it was only supported in MSIE6, and possibly MSIE7.

Use of this tag will disable the Image Toolbar (normally accessed via right-click) within MSIE. Typically it is enabled whenever an image larger than 130×130 is displayed.

Implementation:
Add the following to the <head> section of your webpage(s):
<meta http-equiv="imagetoolbar" content="false" />

Alternately, you COULD use some proprietary MSIE attributes on the <img /> tag.
<img src="..." galleryimg="false" />

Even when you use the META tag to disable this feature for all images, you can explicitly re-enable it with the following proprietary tag…
<img src="..." galleryimg="true" />

References:

NOTE: this is an obsolete practice, and should be removed unless you plan to support beta versions of MSIE6.

The story behind this tag is one of virtue. Microsoft, as they do TOO often, added a ‘feature’ in beta versions of Windows XP (MSIE 6.0) that enabled the browser itself to analyze the content on a given page, and insert links to other websites. This was "e;spun" as being good the the visitors of your website, because they could be exposed to related products or services. Unfortunately, the webmaster and site owners had no say in what content was being linked or to where… which could be a competitor!

This tag was added as a method to prevent these "Smart Tags" from operating on websites… in the end, Microsoft did not leave this feature (enabled?) in the released version of Internet Explorer 6!

BTW, there are some JavaScript libraries today that offer similar functionality, but they are not related to this tag.

Implementation:
Add the following to the <head> section of your webpage(s):
<meta name="MSSmartTagsPreventParsing" content="TRUE" />

REFERENCES:


GeoTags

To build on my recent post on ‘geoURL’, there’s also another system available known as GeoTags. Adding your site to their list is also trivial…

1. The “hardest” step – find your Latitude and Longitude, several sites like Google Maps make this simple if you don’t have access to a GPS reciever…

2. Add the following to the <head> section of your page(s):
<meta name="geo.position" content="41.937891;-88.142111" />
<meta name="geo.placename" content="Carol Stream" />
<meta name="geo.region" content="US-IL" />

NOTE: The above entries are my own, yours should be different.

3. After you’ve uploaded the change, submit your site at the following URL:
http://geotags.com/

FYI, It appears that they’ve also worked out a way to define your location in an RSS Feed… more on that later!

geoURL

GeoURL is a location-to-URL reverse directory. This will allow you to find URLs by their proximity to a given location. Adding your site to their database requires minimal work.

1. The “hardest” step – find your Latitude and Longitude, several sites like Google Maps make this simple if you don’t have access to a GPS reciever…

2. Add the following to the <head> section of your pages:
<meta name="ICBM" content="XXX.XXXXX, XXX.XXXXX" />
<meta name="DC.title" content="THE NAME OF YOUR SITE" />

3. After you’ve uploaded the change, submit your site at the following URL:
http://www.geourl.org/add.html

For more info:
http://www.geourl.org/

Why .PNG?

Many of you may be questioning why my examples always use PNG images, and not GIF or JPEG…. the answer is really simple, PNG is better suited to most usage of images on the Internet. It’s well supported by most modern browsers and allows for smaller images of higher quality than is available with GIF.

Additionally, PNG offers advanced features such as GAMA correction and Alpha Transparency.

Previously there were several patents that restricted the use of GIF online, JPG has similar restrictions that are occasionally disputed. PNG has always been an open standard and as such isn’t encumbered by any legal issues.

Here’s the simple rules that I generally apply…
1. JPG / JPEG = Photo quality images.
2. GIF = Animated Images
3. PNG = Static (non-photo) Images

References:

Adding ‘drop shadows’ to your HTML INPUT fields with CSS

Eventually there comes a time when either you, or your client(s) want you to make your HTML <form>’s sexier… one of the simplest approaches you can take is the addition of a ‘drop-shadow’ to the ‘text’ entry box. One new image and some simple CSS and you’re done!

For the purposes of this article, lets use the image i have here (INPUT white background).

Now for the CSS….
If you’re doing this inline it’ll cause you less trouble if you have a large site and only want this in a few locations.
<input type="text" style="background:#fff url(/images/input_white.png);" value="" />

Now… if you want to put this in an external CSS file you could add a ‘class’ or ‘id’ to this &input> tag, as follows…
<style type="text/css">
input#shadowclass { background:#fff url(/images/input_white.png); }
input.shadowid { background:#fff url(/images/input_white.png); }
</style>
<input type="text" class="shadowclass" name="x1" value="" />
<input type="text" id="shadowid" name="x2" value="" />

NOTE: There are better ways to do the above, but i showed the above to make the implementation obvious.

Now, we can stick the above in an external CSS and use some more specificity to prevent other problems that we’ll elaborate on…

PROBLEM…
If you assign the CSS to the <input> tag itself, you’ll get the undesired background on your CHECKBOX, RADIO, and SUBMIT input types.
The fix… either use a ‘class’ for the cases where you want to apply this style… alternately, apply a ‘class’ for the cases that you don’t want this style.
Future (not well supported currently)… use the ‘type’ in you CSS definition, like so..
input[type='text'] { background:#fff url(/images/input_white.png); }
NOTE: there’s a method in MSIE to use the ‘expression’ concept in your CSS, but i advocate ‘standards’ here, so we won’t delve any further into that topic other than to say it ‘exists’!

So here’s our final approach/recommendation for ‘current’ browsers (in our designs)… you’ll get the shadow ONLY on ‘text’ and ‘password’ input fields and not on the others…

<style type="text/css">
input { background:#fff url(/images/input_white.png); }
input#noshadow { background:transparent; }
</style>
<input type="text" name="x" value="" />
<input type="password" name="p" value="" />
<input type="radio" class="noshadow" name="r" value="" />
<input type="checkbox" class="noshadow" name="c" value="" />
<input type="submit" class="noshadow" name="s" value="" />

WARNING: the background image we use in the example above is only 200px wide, if your text field is larger than that you’ll need to account for it in some way! (otherwise you’ll get a tiled background or run out of ‘shadow’)

More advice…

  1. You can also apply this technique to <textarea> using a similar approach!
  2. This may also be a useful way to indicate ‘errors’, ‘required fields’ or ‘passwords’ in a Rich UI.

RSS Implementation Guide (Part 1 of ‘many’)

First off… the abbreviation RSS has two conflicting (but similar) meanings, both of which are XML file formats for web syndication:

  • RDF Site Summary
  • Really Simple Syndication

If you are already running a Blog or other web application that provides support for RSS, most of the work is already done for you. Here we will cover the integration of the “Feed” into your other websites.

If you take a look at the HTML source of this page, it should closely resemble what is shown below…


<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.giantgeek.com/blog/?feed=rss2" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://www.giantgeek.com/blog/?feed=rss" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://www.giantgeek.com/blog/?feed=atom" />

There's not a whole lot of difference in the actual content of these different feeds, they all contain the same 'core'
content, but apply it to different standards (each of which has it's own strengths and weaknesses).

To add the feed link to your site, it's recommended to use one or more of the 'feed' types and place the appropriate <link> into the <head> section of your website.

A 'standard' icon for RSS was recently agreed upon by Microsoft (for MSIE 7.0) and the Mozilla Organization - it is the orange colored icon that is shown here (RSS Feed Icon). Many websites that support RSS subscriptions have opted to place this in the footer of their pages.

In upcoming articles we'll show you how the RSS feed itself is created and discuss the differences in each format.