Today I got an email from Google because I use their Google Apps, and I was surprised, but kind of happy to read the email they sent.  Below is it's contents in entirety. 

NOTE: I have highlighted the interesting parts, or at least some.

Dear Google Apps admin,​

In order to continue to improve our products and deliver more sophisticated features and performance, we are harnessing some of the latest improvements in web browser technology.  This includes faster JavaScript processing and new standards like HTML5.  As a result, over the course of 2010, we will be phasing out support for Microsoft Internet Explorer 6.0 as well as other older browsers that are not supported by their own manufacturers.

We plan to begin phasing out support of these older browsers on the Google Docs suite and the Google Sites editor on March 1, 2010.  After that point, certain functionality within these applications may have higher latency and may not work correctly in these older browsers. Later in 2010, we will start to phase out support for these browsers for Google Mail and Google Calendar.

Google Apps will continue to support Internet Explorer 7.0 and above, Firefox 3.0 and above, Google Chrome 4.0 and above, and Safari 3.0 and above.

Starting next week, users on these older browsers will see a message in Google Docs and the Google Sites editor explaining this change and asking them to upgrade their browser.  We will also alert you again closer to March 1 to remind you of this change.

In 2009, the Google Apps team delivered more than 100 improvements to enhance your product experience.  We are aiming to beat that in 2010 and continue to deliver the best and most innovative collaboration products for businesses.

Thank you for your continued support!

Sincerely,

The Google Apps team

Email preferences: You have received this mandatory email service announcement to update you about important changes to your Google Apps product or account.

Google Inc.
1600 Amphitheatre Parkway
Mountain View, CA 94043

I hope someone else finds this interesting.  If not, no worries, but if you did and have comments, please feel free to post.

I have been designing a site for a customer that is going to rely on having a good looking and functional DNN Core Repository.

I found that creating a template for the repository was pretty simple after I found some online documentation on the DNN Repository.

I found that in the /wwwroot/DesktopModules/Repository/Templates/ directory I could add my own template which will show up under the Repository Skin drop down box.  As shown below.

As you notice the bottom one is the one I added.

Now the Issue

I was very excited to make my own repository template, but soon found I was getting pesky borders around the tables of the repository in the Safari and Opera browser. 

I tried editing the repository.aspx file, but was uncomfortable doing that because that is going beyond a simple template.

So then I did some experiments with the two browsers having the issues.  (Safari and Opera)  You can see my demo page and how I ended up fixing the issue.  (NOTE: for the demo page to make sense you need to view it in either Safari or Opera)

Basically to fix the issue I ended up using CSS to tell the tables inside the div I use for Content to have no borders.  Below is the CSS. (in the example below the DIV that the tables are in has the class bordernone)

.bordernone table,
.bordernone td,
.bordernone tr,
.bordernone tbody
{
    border: none !important
}

I hope that all makes sense.  Please feel free to email me if you have questions.  You can also make a comment here with a question, or heck, a better way to fix this issue.

Most of you reading this article are probably saying, “Ya we know DOCTYPE is the first thing you add.”   I mean man it is on the top of the page.

Well anyway just a couple days ago, I had a friend of whom I generally trust his markup skills come to me with a center align issue in IE7.

I took about 5 minutes and combed through the site via Firebug and the Developer Toolbar (kind of like Firebug for IE)  I couldn’t  see any good reason that his main container div should not be centered.

The CSS and markup was right and the parent container element looked like it wasn’t causing any interference.  I have to admit for a minute I was stumped.

Well my last step was to pull out the source markup and check for unclosed div elements.  (I was getting desperate).  In doing this I saw he had no DOCTYPE!  This was making IE7 run in quirks mode.  When my friend added the DOCTYPE his page magically worked the way it was supposed to.

So that you guys and gals don’t make the same mistake, I included below what I should have done in this situation.  (I use the excuse that my friend normally wouldn’t make this mistake, and that’s why I didn’t follow the below steps.)

Okay I should have looked at the markup first and made sure there was a DOCTYPE.  Secondly I should have run the site through validation.

There ya have it.  A small post on the importance of a DOCTYPE.  I hope it has helped.  I also have a couple links below to good DOCTYPE information.

• A List Apart article on DOCTYPEs
• An article on Quirks mode
• One more article on Quirks mode with some links of it’s own.

Just yesterday I was answering a CSS question in an online CSS group I belong to.  The question was on how to make tooltips with CSS.  The person who asked had a website with pictures on it.  He wanted to be able to hover over the pictures and get another tooltip box to pop up with yet another picture in it.

I tried to explain how I would do it, but I think I missed some things.  So I will try to redeem myself now with an explanation and a demo page!

Below is the markup I used for the list and it's tooltips.

<div class="main_wrap">
        <ul class="ninja_list">
            <li class="left_ninja"><a href="#"><span class="smoke"><em>title you want people to see if CSS is disabled or for screenreaders</em></span></a></li>
              <li class="mid_ninja"><a href="#"><span class="smoke"><em>title you want people to see if CSS is disabled or for screenreaders</em></span></a></li>
              <li class="right_ninja"><a href="#"><span class="smoke"><em>title you want people to see if CSS is disabled or for screenreaders</em></span></a></li>
        </ul>
</div>

This will provide a list for those who have CSS off or those who are using text readers.  The next bit is the CSS to make the tooltips happen, along with placing the list items.

.main_wrap
{
    position: relative;
    height: 400px;
    background: url(images/ninjas_three.jpg) no-repeat;
}
.main_wrap ul
{
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: block;
}
.left_ninja
{
    position: absolute;
    left: 50px;
    top: 80px;
}
.mid_ninja
{
    position: absolute;
    left: 235px;
    top: 100px;
}
.right_ninja
{
    position: absolute;
    left: 405px;
    top: 90px;
}
/* NINJA in a box */
/* difines the width and height of anchors along with block */

.left_ninja a
{
    display: block;
    width: 100px;
    height: 160px;
    position: relative;
}
.mid_ninja a
{
    display: block;
    width: 80px;
    height: 140px;
    position: relative;
}
.right_ninja a
{
    display: block;
    width: 80px;
    height: 160px;
    position: relative;
}
/* NINJA pop smoke, span disappear */
/* hides the span where the tooltip is */
/* this also hides text */
.left_ninja span,
.mid_ninja span,
.right_ninja a span,
span.smoke em
{
    display: none;
}
/* span appear like NINJA out of nowhere */

.left_ninja a:hover span
{
    display: block;
    width: 200px;
    height: 91px;
    position: absolute;
    background: url(images/left_ninja_tooltip.png) no-repeat;
    top: -45px;
    left: 40px;
}
.mid_ninja a:hover span
{
    display: block;
    width: 200px;
    height: 91px;
    position: absolute;
    background: url(images/mid_ninja_tooltip.png) no-repeat;
    top: -70px;
    left: -80px;
}
.right_ninja a:hover span
{
    display: block;
    width: 200px;
    height: 91px;
    position: absolute;
    background: url(images/right_ninja_tooltip.png) no-repeat;
    top: -40px;
    left: -160px;
}

Basically you are telling the span inside the anchor element to display none.  Then when the anchor is hovered over you are bringing back that span with display block.  For more hands on and visual examples try out the Tooltips by Ninja's Page.

I hope this helps, and I hope you can use this  as a guide with tooltips and even CSS drop down menu's.

Happy CSS tinkering,

~Michael

This won't be the biggest post ever, but it is important none the less.  I have been as of late creating sites with Adobe Dreamweaver and my users have been using Contribute CS3 to edit them.  Now I still hand coded the site for the most part, but I did use the template system that Dreamweaver has and it was pretty effective.

My customer wanted to make sure I put his Google Analytics code into the new site so he could continue monitoring his website.  I didn't think there would be any issue with this and I inserted the Google Analytics code right before the end body tag.

My next step was to allow my user to edit in Contribute CS3.  I got a call later from my customer stating that his page was now looking funny and he was getting extra parenthesis at the bottom of the page.  I looked at the source and saw that Contribute had changed the following code.

type='text/javascript'%3E%3C/script%3E"));

to the literal

type='text/javascript'></script>"));

So now we end up getting  ")); at the bottom of the page.  That isn't good.  It turns out that Adobe Contribute CS3 enforces a level of XHTML compliance, which is more than the Google Analytics code complies with.  Hopefully in the near future Google will change it's code, but in the mean time if you just place the code in the head of the page, Contribute will not change the code.

The other solution is to remove the HTTP/HTTPS auto detection and just use the appropriate script tag for your site.  I don't like this solution because it requires more work, but if you are inclined to do it that method then below is the code for each.

For HTTP:
<script type="text/javascript" src="http://www.google-analytics.com/
ga.js"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXX-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>

For HTTPS:
<script type="text/javascript" src="https://ssl.google-analytics.com/
ga.js"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXX-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>

Well I hope that helps

~Michael

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.

One of my other goals with the CornerPixel web site is that I want to work on helping designers and developers who use CMS's to produce better standards compliant web sites even while using a CMS.

I will be setting up a couple CMS's in the near future.  One DotNetNuke (DNN) and one Umbraco site.  I will post in a couple weeks with URL's when I have those installed and skinned. 

The other thing I will be doing is providing DNN admins with good standard compliant skins in the near future.  There has been many who say that this is impossible, but I have seen several out there that have been done very well, and I intend to provide a similar service.  I think for free at first but I won't commit to that yet.

Well just wanted to update you and tell you all to keep checking in to see those CMS sites in action. 

Also please notice the cool RSS link at the top of the page. 

Thanks for listening,

~Mike

Well I went and did a little research and found I could download the TinyMCE editor and give that a try.  Unfortunately that didn't work.  I followed all the instruction and couldn't get the editor to show up.

I was talking to a friend of mine who is a pretty awesome programmer and he mentioned that DasBlog had LiveWriter support and that I should try that avenue especially if it was the editor within DasBlog that was giving me fits. 

So I took my friends advice and this is a post I am doing via Windows LiveWriter.  I am also going to include a picture because I want to see how that works and where the picture ends up.

So there you have it.  My Logo, except with the wrong URL.  Lets see what happens.

~Mike

I just got done yesturday rambling on about web standards and how much I want to be a web compliant designer and developer.

Well, I just found out when I tried to validate my blog page that I was NOT able to validate the markup.  I am using a blog application called DasBlog and have found that by default it spits out a capital "P" for the paragraph elements and a capital "A" for anchor elements. 

I have used the XHTML 1.0 Transitional DOCTYPE and this is an issue.  I could change the DOCTYPE to HTML, but I don't want to. 

Does anyone know of a good blog application (hopefully ASP.net) that will validate, or does anyone have a clue what I would have to change in the DasBlog source to get it to validate right?  I have seen other peoples DasBlog sites that do NOT have capital letters for elements.

I guess all in all it comes down to trying your best and there are some cases you just have to except a little less than perfect.

I have been asked by a few of my users and many other people I know to write a guide to Web Standards.  I usually just point them to some of the good books already out there, but now I have another tool.

Opera Web Standards Curriculum

This is a good online resource to learn about web standards, and why web standards are important.

I encourage the readers here to check this out and bookmark it.  It is a very nice tool to have and it never hurts to read this sort of stuff over again.  You never know what good tidbits you can get from it.

Have fun reading,

~Mike