Yesterday I was feeling pretty good about how CornerPixel's website and blog are valid XHTML 1.0 Transitional markup. I had just got done posting my entry about Google Analytics when I decided to run the blog home page through the W3C Markup Validation site. 

Ackkkkk! I had 78 errors.  What is up with that.  Well I got to looking and I noticed there were markup errors in the blog posts.  Well I use Windows Live Writer to post my blogs and I do it from several different computers throughout the week.  I hadn't had that problem before, so I decided to start looking through Windows Live Writer settings. 

I didn't find anything in the Tools / Options menu, and I was starting to get a little worried.  I did notice that you can view the HTML (markup) so I figured worse case scenario I could just change the markup, but I didn't want to have to do that with every post.

Finally I noticed the Weblog menu.  Under Weblog there is an option to "Edit Weblog Settings"  If you click that you will get a popup window where you can make the necessary changes.  Once the window is open just click "Advanced" on the left and you will see the section where you can choose the Markup Type. 

There you go.  Now Windows Live Writer will spit out good markup.  Wooo hooo !

I also noticed that when I had an "&" in the title of the post I got 1 XML parsing error and 1 warning.  So for a good valid blog site with Live Writer, don't place an "&" in the title of your posts.

Well I hope that helps for all you blogger's using Windows Live Writer.

I am getting to the stage where I want to implement Google Analytics and see just how much traffic I am getting on my new website.  I went to Google Analytics and started my account and started the process of getting my script to add to my site.

At this point I was thinking about having to make different profiles for each of my subdomains.  I thought about it and I didn't like that idea.  I would end up getting referrals from my own domains, and that would mess up my stats a fair bit.

Well I did what I always do when posed with an issue I am not sure how to solve.  I went to Google and did a search.  I came up with a very good site and post to help me through.  I found that I just had to add one line of script to my Google Analytics code and all would be good.

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXXX-X");
pageTracker._setDomainName("domain.com");
pageTracker._initData();
pageTracker._trackPageview();
</script>

Notice the part of the code in bold.  pageTracker._setDomainName("domain.com");

Just change out the domain.com to match your domain and you are good to go.  Above is the simple solution, but for a very cool explanation go to the Google Analytics "Unofficial" Blog.

There was an announcement yesterday about Google's new browser called Chrome.  I went through three different emotions upon hearing about this new browser.

1. I felt a quick kid like excitement.  I was rushing to download it and try it out.
2. Then I felt a feeling of worry when I thought that I now had yet another browser to test all my websites against.  So at that point I went to the Chrome site and started to read the little comic they have to explain their new browser.  As I read I found that there was a lot of good sound things about Google's new browser.
3. Lastly my feeling was amusement and curiosity as I started to realize just how good the browser was.  Here are some of the things I like about Chrome.

Things I like

• I was happy to see that it passed all the CSS3 tests on the CSS3.info site.  This is encouraging to me and it will be GREAT to test CSS3 stuff and know I have a playground that supports all of CSS3 and not just a little bit of it.
• I was happy that each tab is it's own process.  That way when a site goes mad and freezes, I don't loose what I was doing on another tab.
• It is very lite looking but pretty browser.  (ya I know I am a professional and that shouldn't matter.  But it does.)
• The search bar is the address bar.  I think that is how browsers should have all been made.
• Most visited sites page.  Kind of cool, but I want to see it in action a couple months from now.
• Load times are pretty darned fast.

Things I don't like

• When I was using Chrome on my Vista PC disc bullets were displayed with white corners which made the bullets look like stars at certain sizes.
• I don't like what it did to my favorites.  It imported my favorites from IE7 and then tried to logically sort them.  I can't find anything anymore.  I wish I hadn't imported them.  My advice is do NOT import favorites.
• The "Inspect Element" is a nice try but it isn't as good as IE8's Developer Toolbar or Firefox's Firebug extension.  I can't get to a mode where I can hover over the page and click an element I want to inspect.  I can go through the markup and eventually find my element by watching what lights up.  But it just isn't as good as I would like.

Well I think that is it for now.  I am going to use this browser a LOT in the next couple weeks to test things out.  I know I will be able to soon ad much more to both of the above lists.  I can't wait to find out what cool tools Google has added to the browser.  I also can't wait to see if I can take some things off my "Things I don't like" list when I get to know the browser a bit more.

Well thanks Google for giving me more work to do.  The good thing is that I really like my work.

~Mike

The normal way of preloading images is by using JavaScript to do the job.  In the lieu of Firefox and it's NoScript type extensions I have stopped relying so heavily on JavaScript in my pages.  So where does that leave us when it comes to preloading images?

In steps CSS.  Most of the time when I want to preload and image it is for hover menu's or rollover type images that I know the user most likely won't hover over right away.  In this case I want the rollover's to work right away.  My next example won't please some of the real hard core standards people because it adds a little markup to the page, but in my opinion it is better than and less markup than the common JavaScript usually used to preload images.

At the bottom of the page before the closing body tag I add a preload DIV.  I assign the class of preload to the div and then let CSS handle the rest.  (you will also have to add a DIV element inside the preload DIV for every image you want to preload.  Hopefully in CSS  3 we can assign multiple images to the background of one element (DIV) but for now this works.

The CSS for this is

.preload
{
    position: absolute;
    width: 0px;
    height: 0px;
    margin-left: -9999px;
    background: url(yourimagehere.jpg) no-repeat;
}

Now the DIV elements inside the preload DIV only have to have the background set because they are going to go to the left along with the preload div. 

The reason I didn't do a display: none or visibility: hidden was because Opera and Safari are smart enough not to waste resources loading your images because it can see by the way you did the CSS that you don't want it to display.

This has worked great for me in the past and I am continuing to use it in the future.  I am sure some of you have arguments against it, and I would love to hear your arguments.  Please feel free to post a comment here. 

I am going to start a page by page guide for these type of things in the future that will allow users to search and find help while they create their own web sites.  For now you will have to search the blog to find good information.

Thanks for your time
~Mike