While in the process of doing a redesign for one of our clients I was changing the pages over to XHTML Transitional and was having some really weird character reference issues. It seems HTML4 handles the characters correctly but once i moved into the new XHTML declaration the quotes coming in form our SQL server were being converted to… who even knows?

They looked like some sort of mix between AE and Trademark special characters. But what made it even weirder was it was picking and choosing which ones to change and what it changed them too was different for the same Quotes. Now I have often know if the issues with using left quotes and right double quotes, etc. but had never had a problem with doing a string replace on the content prior to writing out the content in HTML.

I tried and Tried…

I racked my brain trying to do a string replace on many different variations of the same characters, I had Database access so I could see and even copy the characters in the table column but I could not get them to write correctly.

My boss and I both agreed it was a character issue and probably just needed set somewhere but either I was never tought this or I completely forgotten how to do this. I tried numerous searches on Google with no solution in sight. Finally today I came across the meta tag I was looking for:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

So for future reference I wanted to post this to make sure I have it available as I undoubtedly will run into this again. Since the whole purpose of my blog is to keep these types of issues and solutions close, so I don’t have to go searching through sites to find what I did, there it is; but this doesn’t give me the meaning of life, I was hoping one of you could enlighten me as to the issue and what caused it? While I consider myself and advanced developer I don’t know a lot about browsers or character references. So if you know what my problem was, tell ME!!

Yesterday, I ran across this again and tried giving my anchor tag a width of 100% and it worked. The surprising part is not only did it fill the entire width properly but now the height was working as expected. So the bug I see is in declaring a width for a block level element. If you do not declare a width the anchor remains an inline element as far as hover goes but does take the rest of the properties as expected; padding, height, etc. So apparently this simple fix is to add a width to the anchor as well as the block declaration and it will truly become a block element.

Here is an example in case I lost you:

With no width defined in IE6 the hover will only register when you are directly over the text. As I said the padding still works but the hover doesn’t. Now let’s do it again with a specified width.

If you don’t have IE6 or a way to preview site’s with IE6, I would suggest going over to Microsoft and getting Virtual PC and downloading the IE6 compatibility virtual hard drive. These will allow you to run another Windows XP operating system, complete with IE6 SP2, without leaving your true Windows operating system. I use this to test my CSS for cross browser compatibility before I launch all my site’s.

While you won’t notice a difference with modern browsers there is a huge difference from what IE6 does with the first link.

If you are serious about web form design and accessibility then I have just inadvertently stumbled into what I have dubbed “Real-Time Form Feedback”. So imagine, as you are filling out a questionnaire on a web site; totally uninterested in the fact that they, are requesting more data from you, then you were seeking form them to begin with. But understanding the nature of the beast, I know this is how they formulate their response to my interest, so I obligingly begin answering the questions.

On the second page I stopped and spoke to Amanda for a moment and suddenly realized I was missing the coolest addition to a form that I have seen yet. Not only did I get instant recognition that I was typing in the field, but because my response was technically less than 1; I typed -1, in the hopes that someone, if a real person reading the data, would realize I wanted to say less then one. Instantly, to the right side of the form field it simply requested that I, “Please enter a number between 0 and 100.” I immediately changed my answer to 1 and to my surprise, it responded with real-time feedback stating my response was “1 Year.”

Now that is what made me stop… I turned to Amanda and said now that is cool. I immediately typed in .7 to see if I was “allowed” to input a decimal point, and as I expected, I was given my response, “0.7 Years.”

In a time where we use JavaScript libraries everywhere in order to improve the “WOW” factor of our sites, it seems we often spend the least time with the most important aspects of our work, user interface. Everything you do on the internet is about data and information. Users are looking for it and we are hopefully delivering it easily.

Now think about how easy it would be to just throw a little JavaScript in their and have Real-Time Form Feedback helping your user complete the task of giving his information to you. I was perfectly willing to just hand it over, considering the expectation of great information in return. But imagine if me, of all people, got frustrated with the fact that I had to rewrite my data again due to a very informal error created after I had, in my mind completed the task. This is the same guy, that will close a form the second I see “that” Captcha.

Instead, I was given immediate feedback that not only helped me complete the field properly but gave me the ability to give a more accurate response by realizing I could still say less than 1 by using .7 which is 8.4 months.

The site is called PayScale and it promises to give you a salary comparison for your field. Obviously in return for you giving them your career information.

Ha! Ha! I am underpaid! I think I’ll print that out for the bosses

As suggested by Teresa, let’s debate this. Leave some comments and tell me what you think!

/* I know.. but heres the reset: way better than an asterisk: */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
body {
	font:68% Georgia,serif;
	color:#464646;
}
a img {
	border:0;
}
/* Standardize styling:
   Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
        margin:1em 0;
        padding: 0;
}

/* Apply left margin:
   Only to the few elements that need it: */
li, dd, blockquote {
        margin-left: 1em;
}
/* Miscellaneous conveniences: */
form label {
        cursor: pointer;
}
fieldset {
        border: none;
}
input, select, textarea {
        font-size: 100%;
		font-family: inherit;
}
em {
	font-style:italic;
}
strong {
	font-weight:bold;
}
/* Custom styles:
	ordered by syntax hierarchy */