Shaun Mccran

My digital playground


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

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, 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.

view plain print about
3<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">

You can read more about Doctypes here:

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 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.

view plain print about
1<a href= target=_blank>Follow this link to go to my website</a>

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

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.

view plain print about
1<div class="menu">
2        <ul>
3        <li><a href="">Top menu option
4        <!--[if IE 7]><!--></a><!--<![endif]-->
5        <!--[if lte IE 6]><table><tr><td><![endif]-->
7        <ul>
8            <li><a href="">Link 1</a></li>
9            <li><a href="">Link 2</a></li>
10            <li><a href="">Link 3</a></li>
11            <li><a href="">Link 4</a></li>
12            <li><a href="">Link 5</a></li>
13            <li><a href="">Link 6</a></li>
14        </ul>
16            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
17        </li>
19        </ul>
21    </div>

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.

view plain print about
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
2 {width:149px; height:32px; position:relative; z-index:100;border-right:1px solid #000; font-family:arial, sans-serif;}
5/* hack to correct IE5.5 faulty box model */
6* html .menu {width:149px; w\idth:149px;}
8/* remove all the bullets, borders and padding from the default list styling */ ul {padding:0;margin:0;list-style-type:none;} ul ul {width:149px;}
12/* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */ li {float:left;width:149px;position:relative;}
15/* style the links for the top level */ 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;}
18/* a hack so that IE5.5 faulty box model is corrected */
19* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}
21/* style the second level background */ ul ul a.drop, .menu ul ul a.drop:visited {background:#c0c0cc url(arrow.gif) no-repeat 130px center;}
24/* style the second level hover */ ul ul a.drop:hover{background:#c0c0cc url(arrow.gif) no-repeat 130px center;} ul ul :hover >
a.drop {background:#c0c0cc url(arrow.gif) no-repeat 130px center;}
28/* hide the sub levels and give them a positon absolute so that they take up no room */ ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}
31/* another hack for IE5.5 */
32* html .menu ul ul {top:30px;t\op:31px;}
34/* style the table so that it takes no part in the layout - required for IE to work */ table {position:absolute; top:0; left:0; border-collapse:collapse;}
37/* style the second level links */ 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;}
40/* yet another hack for IE5.5 */
41* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}
43/* style the top level hover */ a:hover, .menu ul ul a:hover{color:#000; background:#c0c0cc;} :hover > a, .menu ul ul :hover > a {color:#000; background:#c0c0cc;}
47/* make the second level visible when hover on first level list OR link */ ul li:hover ul, 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

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:

view plain print about
2.yellow-ruler {color: #ffd520; background-color:#ffd520; width: 100%; height:2px; margin: 3px 0px 0px 0px;}
4<div class="yellow-ruler"><!-- --></div>

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.

view plain print about
1* {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".

view plain print about
1* {margin:0; padding:0; border: 0px;}
3select,input,textarea{border-width: 1px; border-style: solid; border-color: grey;}
5/* IE stops the radio borders */
6.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:

view plain print about
1P.blockoftext {
2 margin-left: auto;
3 margin-right: auto;
4 width: 6em
7<p class="blocktext">Text</p>

This will center a block of text and give it a width of 6.

For images you can do this:

view plain print about
1img.displayed {
2 display: block;
3 margin-left: auto;
4 margin-right: auto }
6<img class="displayed" src="..." alt="...">

That will auto center the image inside its containing div.


Firefox helpfully caching forms and their values

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:

view plain print about
1<cfset variables.prefix = "Mr,Mrs,Ms,Miss,Dr">
2                <select name="title" size="1" class="form-select">
3                    <option value="">Please select from</option>
4                    <cfloop list="#variables.prefix#" index="variables.index" delimiters=",">
5                        <option value="#variables.index#" <cfif attributes.title EQ #variables.index#> selected="yes" </cfif>>#variables.index#</option>
6                    </cfloop>
7                </select>

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.