Blog of Shaun McCran - Architecting robust, elegant technical and business solutions - HTML

Creating a baseline HTML 5 document

Sun, 14 Aug 2011 09:11:00 -0000

Browser standards and cutting edge web design are not great bedfellows. I've heard the arguments from creative designers that you have to write specific browser CSS styles to accommodate the multitude of browsers and their own unique way of rendering CSS. I disagree. I firmly believe that with a good understanding of the structure of CSS elements and how they interact with each other you can develop a completely cross-browser non JavaScript baseline template. This article explains how I have approached creating a HTML 5 layout file, that works across legacy browsers just as well as the more modern interpreters. [More]

Using JQuery to disable all form fields

Thu, 23 Dec 2010 16:05:00 -0000

Whilst writing a new timesheet application I added a function to 'lock' an entire dataset, IE stop a user from editing the form on the page.

I'd spent a lot of time layout the timesheet page, designing the form, and help text etc. I didn't really want to destroy the visuals if a record was locked, I wanted it just the same, but 'non-active'.

This is where JQuery is simply awesome. Understanding 'selectors' and the power they can give you, with only very simple construction is key.

In this example imagine a page that has a div within it, the div has a id of 'divLabel'. Within that div there is a form. The code below will disable all the input elements within that div. Every single one of them. In one line of code. How cool is that.

$(document).ready(function(){ $('#divLabel :input').attr('disabled', true); }); // end

~~What its actually doing is adding the disabled attribute to each input, then setting the value to 'true'.~~

~~Get familiar with how JQuery selectors work, the docs are here: http://api.jquery.com/category/selectors/~~

Showing and hiding Divs using JQuery and a select field

Thu, 16 Dec 2010 15:30:00 -0000
Ever want to show and hide div elements using form controls? JQuery makes this sort of functionality super easy.
In this blog entry I'll show you how to create a simple JQuery function that shows and hides elements based on a form select field.
You can see an example of the finished script here: Demo JQuery show / hide using a select field
[More]

Fck editor inserting xhtml and browser specific code

Thu, 03 Jun 2010 10:47:00 -0000
I've been using the fck editor to handle my rich text areas in a content management application. I have to say I like the way it works, and it integrates easily with a Coldfusion platform. It does however have a few issues. This article deals with fck editor using xhtml code, and the editor using a few browser specific html rewrites. Note: I can't have xhtml code in my site, as the definition type is not xhtml, and it fails an accessibility check if any is present. [More]

Strict or Transitional DTD type validation, worth hacking just to pass?

Fri, 22 Jan 2010 12:34:00 -0000
An area of web development that I previously had little exposure to was WCAG validation. This is the industry standard for Accessibility coding for web platforms. For version two (V2) of the WCAG there are three standards, A, AA and triple A (AAA). Each represents different levels of Accessible compatibility. What this also does is validate against the W3C doctype standards. This is where my problems arose. The main aim of the doctype standard is to clearly define a separation layer between content and behaviour. In practical terms this equates to best practices such as having an external .CSS files rather than inline styling, and declaring the language types for scripting, such as JavaScript etc. Using a free online tool, http://www.totalvalidator.com/ you can check if your site is W3C and WCAG complaint. It will base the validation on the doctype declared in your html. There are three types of DTD declaration for html 4.01. You can read more about Doctypes here: http://www.w3schools.com/tags/tag_DOCTYPE.asp The main difference between these is that the frameset DTD will accept frameset as valid html, whereas the others will not. Also the Strict DTD imposes a very tight restriction of what is accepted as valid in comparison to the Transitional DTD. One is a Strict adherance to the standard, whereas the other shows that you are Transitioning from old code into the new. The site http://24ways.org/2005/transitional-vs-strict-markup goes into more detail about what the exact differences are, what I am going to discuss is the option of creating functional hacks, merely to pass validation. One of the deprecated attributes in Strict validation is the target attribute. Follow this link to go to my website We are all familiar with this attribute, but when you examine it you find that it is actually a declaration of behaviour. We are forcing the user into a specific action. IE open a new window. As a best practice guideline whenever we have a link on a site that exits that site, we open a new window. The only work around for this is creating a specific JavaScript function to open a new window, as this will not be marked as invalid. This seems overkill, just to pass validation. So I am left with the dilemma that if I want my sites to pass Strict DTD validation I must create a JavaScript hack, or compromise the functionality. I'd like to pass the validation, but I view the functionality as key to a site, so it's an easy decision for me.

Creating a CSS only cross browser drop down menu

Fri, 08 Jan 2010 16:47:00 -0000
I'll say this up front, I'm not a CSS guru. I like CSS, but it can be incredibly frustrating. One of the clients I am currently producing work for requires a high level of Accessibility. High enough that we need to avoid using JavaScript unless any script has a "Non" JavaScript equivalent. The site navigation is through a top level horizontal menu, but what if we also want a drop down menu? Can we do it in CSS only, and it still be Firefox, Internet Explorer 6,7 and 8 compatible? Yes, we can, but it's a lot of code, and it's not pretty. The basic concept behind most CSS menus is to use a list, and transform each list item to suit your styling. So we will create a div, with a class of menu. Then create a list inside it. Top menu option Link 1 Link 2 Link 3 Link 4 Link 5 Link 6 Notice that there are some specific if statements relating to different versions of Internet Explorer. these basically make the functionality the same for each version, they are compensating for the differences in code handling between IE versions. Next create a set of CSS styles to alter the appearance of the list. I am not going to go into the CSS line by line, as it is commented, but I'll explain the methodology behind it. The top level menu item is always displayed, but the list is hidden using "visibility:hidden". When the user mouse's over the menu div the CSS applies a:hover ul{visibility:visible;. This makes the list visible. .menu {width:149px; height:32px; position:relative; z-index:100;border-right:1px solid #000; font-family:arial, sans-serif;} /* hack to correct IE5.5 faulty box model */ * html .menu {width:149px; w\idth:149px;} /* remove all the bullets, borders and padding from the default list styling */ .menu ul {padding:0;margin:0;list-style-type:none;} .menu ul ul {width:149px;} /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */ .menu li {float:left;width:149px;position:relative;} /* style the links for the top level */ .menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; width:138px; height:30px; border:1px solid #000; border-width:1px 0 1px 1px; background:#c0c0c0; padding-left:10px; line-height:29px; font-weight:bold;} /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited {width:149px; w\idth:138px;} /* style the second level background */ .menu ul ul a.drop, .menu ul ul a.drop:visited {background:#c0c0cc url(arrow.gif) no-repeat 130px center;} /* style the second level hover */ .menu ul ul a.drop:hover{background:#c0c0cc url(arrow.gif) no-repeat 130px center;} .menu ul ul :hover > a.drop {background:#c0c0cc url(arrow.gif) no-repeat 130px center;} /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;} /* another hack for IE5.5 */ * html .menu ul ul {top:30px;t\op:31px;} /* style the table so that it takes no part in the layout - required for IE to work */ .menu table {position:absolute; top:0; left:0; border-collapse:collapse;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited {background: ghostwhite; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;} /* yet another hack for IE5.5 */ * html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;} /* style the top level hover */ .menu a:hover, .menu ul ul a:hover{color:#000; background:#c0c0cc;} .menu :hover > a, .menu ul ul :hover > a {color:#000; background:#c0c0cc;} /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul{visibility:visible;} There are also a lot of other browser specific hacks present, as the aim was to get the menu working in every Internet Explorer version, and be Accessible. There is a demo of this here: CSS menu demo

My handy IE CSS tweaks list

Fri, 18 Dec 2009 12:05:00 -0000
I'm not really a design kind of person, I like designing things, and I'm learning more and more CSS all the time, but it's the server side coding that I love like Apple Pie and custard. Recently I've had to do a bit more design work, so I've been tripping all over myself to get CSS working in IE6,IE7,IE8 and firefox. I've learnt a few interesting things in the last few days, and I know I'm going to need to use them again. Some are considered 'hacks', some are just clever CSS techniques. They all feel a bit like secret rules of a club I'm not really a member of yet though. So I'm making a handy list, so I don't loose them. I hope to refine and add to this on an ongoing basis, so if you know a better / easier way please let me know. After all coding standards are for life, not just Christmas, and I don't like the idea of anything being a hack, even if it is CSS.
Adding a 1px high line to IE
I am trying to add a 1px line, like a HR line to the page, it displays fat in IE? It seems that some versions of IE will display a div without content as the same height as your font size. Add html comments to it to drop it down to the right height:
IE is adding padding and margins to everything by default
I think there is a lot more information about this out there, but for now I've found that adding the code below will kill most of IE's random padding/margin issues. * {margin:0; padding:0; border: 0px;}
I've built a JQuery accordion and the content doesn't move correctly
When expanding a JQuery accordion element the content underneath it is not moving down, and the accordion is expanding over it. This was a simple fix, but a bit of a pain to find. Just do not specify a height attribute on the div that hold the accordion, IE will stick to the height, but firefox will let it grow to be longer.
Styling form element borders
If you have a CSS rule like the one above that removes all the margins, padding and borders then all your form elements will have no border. IE your text fields and textareas etc will not have a clearly defined edge to them. By adding the line of CSS under this (select,input, etc) you can set the style width and colour of your form elements so that you control them, rather than the browser defaults. In Internet explorer this will also add borders to the checkbox and radio form elements. There does not seem to be any way of writing a CSS style to remove this inherently, so create a style of borderless and set all your radio and checkbox fields to "class=borderless". * {margin:0; padding:0; border: 0px;} select,input,textarea{border-width: 1px; border-style: solid; border-color: grey;} /* IE stops the radio borders */ .borderless{border: 0px;}
Strange IE positioning fix
Sometimes in IE (mainly 6) using position: absolute just does not render the div on screen. I am not sure why. Adding a "clear: both;" or a "clear: left;" or a "clear: right;" appears to fix this.
Easy centering of elements
I used to struggle with centering elements on a page all the time, but now you can do something like this: P.blockoftext { margin-left: auto; margin-right: auto; width: 6em } Text This will center a block of text and give it a width of 6. For images you can do this: img.displayed { display: block; margin-left: auto; margin-right: auto } That will auto center the image inside its containing div.

Firefox helpfully caching forms and their values

Mon, 14 Dec 2009 14:58:00 -0000
Whilst building a form recently I hit a real noob stumbling block. I was trying to set a select value to selected if the value had previously been submitted, something like this: Pretty straight forward, you'll all agree. The issue comes in where I had entered selected="selected". This isn't the correct code for a select option. Handily Firefox will cache the form structure and form data, so that when you refresh the page it just loads up the cached version. This is great if you coded it correctly, otherwise it happily serves you up your coding errors again. So don't refresh your forms in testing. Add ?test=1 or something to make the request a new URL.

Altering bullet point styling using css

Fri, 13 Nov 2009 08:53:00 -0000
I've been writing an error handler that uses JQuery to output a list of errors on a validation event. The error display uses a html list display, and the default display style is a bullet list. This is a simple css script to change the bullet style to something else. In this case nothing! First list item Second list item Third list item Output:

First list item

Second list item

Third list item

I think it looks a bit cleaner than bullet points.

Changing a table row colour with JavaScript

Thu, 03 Sep 2009 09:52:00 -0000
I was recently looking at a way of people selecting many records from a data display. You know the usual table layout of data, populated with a query object. I decided on a column of checkboxes so that a user could select multiple records. The only issue with this was that it is not the most visible indicator of whether a record is selected. So I thought I would add a JavaScript function to change the table row background colour, to show selected records. Firstly here is a simple mock up of a table, populated with a list. bgcolor="CCCCCC" > Row #variables.row# Data 2 The table rows are alternately coloured based on a basic odd/even check. This value is also passed to the function, as if we uncheck the record we want the row to return to its original colour. Next we have the JavaScript function that each checkbox is running when it is clicked. The 'row_color' function uses the 'this' variable to work back up two elements using the 'parentNode' function. This targets the table row (tr) tag, and changes its colour to whichever value is set at the top of the script. There are two colour off values as the table rows are alternately coloured, and we want them to return to their original colour when unselected. var color_on = '#FFE7DF'; var color_off_1 = '#CCCCCC'; var color_off_2 = '#FFFFFF'; function row_color(pTarget,row) { var pTR = pTarget.parentNode.parentNode; if(pTR.nodeName.toLowerCase() != 'tr') { return; } if(pTarget.checked == true) { pTR.style.backgroundColor = color_on; } else { if(row == 1) { pTR.style.backgroundColor = color_off_1; } else { pTR.style.backgroundColor = color_off_2; } } }

Writing back to a multi select box using javascript

Mon, 03 Aug 2009 11:06:00 -0000
During the building of an online form I discovered that there was the need for a user to select multiple values from a select form field. This is done easily enough using multiple="true". What I then found was that I wanted them to be able to add more options to the select field, preferably without reloading the entire template. These options would then also be 'selected' on being added to the select box. Below is a test script demonstrating this. Initially I created a standard select form field, and populate it with a simulated query. Next we will add the form button that allows the user to add new values to the select field. The 'Add' button invokes the javascript function AddItem(). So a user enters their new item into the text box, and it is inserted into the select field drop down, and automatically selected. function AddItem(){ var newItemValue = document.getElementById("newItem").value; var list = document.getElementById('item'); var startNewNum = document.getElementById('item').options.length; var newOption = new Option((newItemValue), newItemValue); // do it if there is a value if(newItemValue.length !== 0) { newOption.selected = true; list.options.add(newOption); newItem.value = ""; window.alert('You new value has been added'); } } The javascript above gets the new item value, and inserts it as the last item in the select list. There is also a check to see if there is any text value in the form field. Just to round it off I remove the text field value, and alert the user. There is probably a shinier way of doing this in something like JQuery, but I'm not that up to speed on that. It would be interesting to see an example though. (hint!).

Displaying raw html onscreen using the Example html tag

Thu, 30 Jul 2009 14:32:00 -0000
Ever needed to display an example block of HTML code in a web based document or regular web page? I had just that requirement recently, so thought I'd have a dig around. It is one of the smallest html tags I've found, it is the example tag. html code It works very much like the 'pre' tag in the way that it displays whatever it contains without any sort of formatting, in its raw state. Except that this also display html, rather than interpreting it, it displays it exactly as is. Nothing revolutionary, but a nice surprise and handy for code samples etc.

Apostrophe ( ' ) display issues

Wed, 01 Jul 2009 11:07:00 -0000
It appears that the character entity ' is not a valid HTML entity. It was just XML, and thus XHTML. If you are using a browser that doesn't support XHTML then you probably shouldn't use it, as it will appear as a normal text string. I found this whilst testing something in IE 8, as that is not XHTML compliant. So just use the ' character, or if you really feel that you have to escape it use: ' Just be careful with that one, as it will cause coldFusion to flip out. Then you may need to escape your escape characters, and then where will you be?

IE 8 Https security warning pop up prompt annoyances

Fri, 19 Jun 2009 11:57:00 -0000
With the continue rollout of IE 8 some issues rise to the top of pile in the way the browser interacts with users. I can see 'why' this next issue occurs, but it doesn't handle the user interaction very well at all. One of the more significant changes is the way that IE handles security exceptions. The message to the user has been changed to be inversed. Usually a user will look for an 'ok' button, but in this instance 'ok' is the wrong answer (see screenshot). This pop up happens when the site you are on is serving up non https content on an https URL, IE images and style links that are http://url/image.src rather than https://. The only work around for this seems to be either having a user manually edit their IE settings, like this: Tools > internet options > security > custom level > display mixed content: Enable This isn't exactly reasonable though. The other fix is to change all your content to be https. This is potentially a huge code change depending on how your site works. I was hoping to find an IE 8 compatibility setting to revert this back to the same handling method as IE 7, but that doesn't seem to exist. If anyone has any ideas feel free to comment!

Gmail incorrectly displaying email content

Thu, 28 May 2009 15:58:00 -0000
I was recently working on an email application where users are sent emails on an automatic basis from the main web platform. There are many pitfalls to bulk email sending, and one of the oldest is how the email content will actually render in the users email client. Usually this is simply a case of people turning off images, or active scripting so they lose the majority of the design and layout. Often people will include a 'Click here to view this online' link at the top of the email as a substitute, as it's much easier to control the how the content of a web page displays than an email. A new pitfall (for me!) is Gmail. I found that sending exactly the same content to a hotmail account and a Gmail account resulted in two different displays! The email is a three column layout, with both of the side columns being coloured to provide a bordered edging. In Hotmail it displayed as designed and tested, but in Gmail the third column was gone, and the central column had lost its shape and was overlapping the right area! I eventually tracked down the error to an extra set of ending tags: I spent a few hours looking for them at this point, but couldn't find them anywhere. After backtracking and examining the rest of the email (it is made of several component blocks) I discovered that there was a small table layout error in the code. This was causing G mail to attempt to fix it itself! It was reading through the code and interpreting the error and trying to correct it. It was writing in the end tags above itself, so I was never going to find them in a template! So one to note for the future, G mail is strict about the code it renders, and will happily rewrite anything it doesn't like.

Blog of Shaun McCran - Architecting robust, elegant technical and business solutions - HTML

Creating a baseline HTML 5 document

Using JQuery to disable all form fields

Showing and hiding Divs using JQuery and a select field

Fck editor inserting xhtml and browser specific code

Strict or Transitional DTD type validation, worth hacking just to pass?

Creating a CSS only cross browser drop down menu

My handy IE CSS tweaks list

Adding a 1px high line to IE

IE is adding padding and margins to everything by default

I've built a JQuery accordion and the content doesn't move correctly

Styling form element borders

Strange IE positioning fix

Easy centering of elements

Firefox helpfully caching forms and their values

Altering bullet point styling using css

Changing a table row colour with JavaScript

Writing back to a multi select box using javascript

Displaying raw html onscreen using the Example html tag

Apostrophe ( &apos; ) display issues

IE 8 Https security warning pop up prompt annoyances

Gmail incorrectly displaying email content

Apostrophe ( ' ) display issues