I would only need 20GB or so for Vista yet I have 120GB available. Because of this I decided to triple boot vista, xp, and linux all on the same machine. A PCI Express machine.

Windows XP And the PCI.sys 0x0000007E Error

I used GParted to segment up my hardrive and that worked beautifully. The first problem I ran into was that I could not install Windows XP on my PCI Express computer. It simply won't work. So I naturally switched the drive out into my non-express computer.

Next I tried installing Vista on that computer only to find out, that Vista refused to install on it because it failed to meet the system requirements. Darn. So I had a problem on my hands.

After scouring forums I found that I need to slipstream Service Pack 2 (SP2) on to my Windows XP installation. I did this unsuccessfully until I found a great program called Auto Streamer. This was the only method I found where It successfully slipstreamed it. The program combines a downloaded version of SP2 with your Windows XP installation CD and outputs it as a bootable ISO file. You can then use IMGBurn to burn a bootable ISO file.

After that I successfully installed Vista on a 50GB partition and installed Kunbuntu on a 12GB partition. Once that happens the computer boots using the GRUB boot loader and then you can choose Vista and then select either XP or Vista.

To Triple Boot XP, Vista and Kubuntu On A PCI Express Machine

1. Slipstream XP with SP2 using autostreamer
2. Burn bootable XP/SP2 disk
3. Install XP/SP2
4. Install Vista
5. Install Kubuntu

Resources

• AutoStreamer
• IMGBurn
• Service Pack 2 Direct Download

View Comments [2]

YouTube uses the EMBED tag wrapped by an object tag to embed their videos which is not a standards based way of embeding video. Embeding video is easy and there is no need to resort to YouTubes method.

Rather than put the burden on my end users to properly embed video, I decided to write a function that would convert any videos posted from YouTube and display them in a standards based way.

Converting YouTube's Garbage Embed Code To Valid HTML

1. The function requires that you pass it the user's embed code and a link to the YouTube video

   Function YouTubeCleanup(embed,link)

2. Next we check if the embed variable contains the phrase "youtube" in it

   if len(replace(embed,"youtube","")) <> len(embed) then

3. Then I build the new path to the YouTube video using the link variable

   url = "http://www.youtube.com/v/" & replace(link,"http://www.youtube.com/watch?v=","") & "&hl=en"

4. Next I build the output for the new standards based way of embeding flash video

   embed = "<object type=""application/x-shockwave-flash"" data=""" & url & "&hl=en""><param name=""movie"" value=""" & url & """></object>"

5. Finally I return the value of the embed variable. Note that if the embed variable did not initially contain "youtube" in it, it will return the variable's default value and no harm has been done.

   YouTubeCleanup = embed

Putting It All Together

View Comments [1]

My IE Has Bugs!

After applying my original diagnostics code to several projects (at work, and my recent site redesign) I realized that Internet Explorer wasn't quite getting it right. In fact sometimes, IE was selecting incorrect elements. What came from this was that I needed to be more careful in the selectors I used and that using the "*" selector resulted in some weird things in IE. What also came from that was a bug in IE that selects the IMG tag when the selector calls for the proprietary IMAGE element.

I decided to go out to the HTML 4.01 specification (straight to the source) and find exactly what attributes and elements are deprecated and which aren't. That way I could create a more authentic version of the diagnostics tool rather than just adding my personal opinion on what ought to be deprecated and what shouldn't. This resulted in CSS Diagnostics 2.0.

Diagnostics Gone Famous

For my second rendition of the project, I decided that I should create a Google Code Project and host my diagnostics on there. I'm not completely sure if that is a good or bad thing to do. My goals are to keep traffic coming to my own site and not Google's but perhaps the two can live together. I also learned that you can embed the Google Analytics tracking code directly into the Google Code web page thus allowing me to track traffic to that area. This makes me care less about traffic going there because if I can use GA, then I can fell like I actually own those pages.

On to the code:

1. Highlight Empty Attributes

   I chose some common attributes that people may forget to fill in. Feel free to remove the href="#". I like to use this one because while developing a website, I forget to change # links to their proper pages and this helps me catch them in the copy.

   img[alt=""], area[alt=""], *[class=""], a[href=""], a[href="#"], *[id=""], *[title=""] { border: 5px dotted yellow !important; }

2. Highlight Proposed Deprecated Attributes

   These are a list of attributes that aren't formally deprecated but I personally believe should be. Generally this is because there is a better alternative such as CSS or using IDs on elements rather than NAME.

   body[background], table[background], td[background], th[background], input[border], table[border] table[cellpadding], table[cellspacing], object[codebase], img[height], object[height], table[height], a[name], form[name], img[name], object[name], a[target], area[target], td[valign], th[valign], img[width], object[width], table[width] { border: 5px dotted orange !important; }

3. Highlight Deprecated Attributes

   These attributes are officially deprecated by the W3C per the HTML 4.01 specification. If you are using the TRANSITIONAL DTD CSS Diagnostics is a great way to move you code to STRICT. It should also be noted that these should appear AFTER empty, and proposed deprecated elements due to specificity in CSS.

   applet[align], caption[align], div[align], h1[align], h2[align], h3[align], h4[align], h5[align], h6[align], hr[align], iframe[align], img[align], input[align], legend[align], object[align], p[align], table[align], body[alink], applet[alt], applet[archive], body[background], body[bgcolor], td[bgcolor], tr[bgcolor], table[bgcolor], img[border], object[border], br[clear], applet[code], applet[codebase], basefont[color], font[color], dir[compact], dl[compact], menu[compact], ol[compact], ul[compact], basefont[face], font[face], applet[height], td[height], th[height], applet[hspace], img[hspace], object[hspace], script[language], body[link], applet[name], hr[noshade], td[nowrap], th[nowrap], applet[object], isindex[prompt], hr[size], font[size], basefont[size], ol[start], body[text], li[type], ol[type], ul[type], html[version], body[vlink], li[value], applet[vspace], img[vspace], object[vspace], hr[width], td[width], th[width], applet[width], pre[width] { border: 5px dotted red !important; }

4. Highlight Non-W3C Proprietary HTML Attribute

   These are a list of proprietary HTML attributes. Using these in your code should is more offensive than using a deprecated attribute, since these were never warrented by the W3C. Use of these attributes should be avoided at all costs.

   body[bgproperties], *[bordercolor], *[bordercolordark], *[bordercolorlight], body[topmargin], body[rightmargin], body[bottommargin], body[leftmargin], table[frame] { border: 5px dotted magenta !important; }

5. Highlight Empty Elements

   These selectors will highlight empty elements within your markup. I've commented out a few selectors that I found didn't jive with my personal website but feel free to de-comment these and use them on your website.

   /*span:empty,*/ /*div:empty,*/ li:empty, /*p:empty,*/ td:empty, th:empty { border: 5px solid yellow !important; }

6. Highlight Proposed Deprecated Elements

   Here is a list of elements I feel should be deprecated. Inputs should be because the BUTTON element is a much better choice and allows for easier selection of all website BUTTONs especially in IE6.

   input[type="button"], input[type="reset"], input[type="submit"], tt, big, small { border: 5px solid orange !important; }

7. Highlight Deprecated Elements

   These elements are formally deprecated in the HTML 4.01 STICT specification.

   applet, basefont, center, dir, font, isindex, menu, s, strike, u, listing, plaintext, xmp { border: 5px solid red !important; }

8. Highlight Non-W3C Proprietary HTML Elements

   All of these elements are proprietary, meaning they are not part of the W3C spec and never have been. They include some of the more infamous elements such as the MARQUEE and the BLINK tags. I've commented out the IMAGE selector because IE7 and under will select the IMG tag as well, so use at your own risk.

   audioscope, bgsound, blink, bq, comment, embed, fn, ilayer, /*image,*/ keygen, layer, limittext, marquee, multicol, nobr, noembed, nolayer, nosmartquotes, rt, ruby, server, sidebar, spacer, wbr, xml, blackface, shadow { border: 5px solid magenta !important }

9. Highlight XHTML 1.0 Strict Deprecated Attributes

   Since many people use XHTML I read the XHTML spec and through in a few deprecated attributes specific to XHTML.

   a[name], applet[name], form[name], frame[name], iframe[name], img[name], map[name] { border: 5px dotted lime !important }

10. Highlight XHTML 1.0 Strict Prohibitions

    There are also prohibitions in XHTML, essentially elements that cannot appear nested inside other elements.

    a > a, pre > img, pre > object, pre > big, pre > small, pre > sub, pre > sup, button > input, button > select, button > textarea, button > label, button > button, button > form, button > fieldset, button > iframe, button > isindex, label > label, form > form { border: 5px solid lime !important }

11. Highlight Deprecated Classes From Old Version Of Website

    I found this area of CSS Diagnostics especially helpful during my last site redesign. When I redesigned my site, I threw out all my old CSS and started from scratch. What resulted was a lot of left over classes in my markup that was non existent in my external stylesheet. This is a great way to call out those "old" classes that aren't being used anymore.

    .toolbg, .ulnone, span.b, ul.list, .eleven, .lines, .wide, .select, table.form, form td.b, table .top, .gallerypic, .iegallery, .pic, .image, .transparent, .wht, .blk, .blue, .dkgray, .ltgray, .brown, .quote, .greyhover { border: 5px groove red !important; }

12. Highlight Deprecated JavaScript Functions From Old Version Of Website

    The same can be applied to old JavaScript functions. I found numerous references to old function calls so I devised a way to highlight deprecated JavaScript functions.

    input[onfocus*="normal1px()"], input[onfocus*="change1px()"] { border: 5px dashed red !important; }

13. Highlight Known 404 Page Links

    Another problem I ran across during my redesign was deleted web pages. I devised a way of highlight known 404 pages using CSS. You can substitute the URLs I have below with you own known 404 pages. A great way to determine 404 pages is to look at your server log files or to use Google Webmaster Tools.

    a[href*="/designs/web/web1/"], a[href*="/designs/web/web2/"], a[href*="/designs/web/web3/"], a[href*="/designs/aitp/aitp-fvtc/"], a[href*="/designs/aitp/aitp/"], a[href*="/forms/contact.asp"], a[href*="/forms/email.asp"] { border: 5px double red !important; }

Putting It All Together:

Summary:

It is best to use different colors and borders to apply meaning to what error you have made in your code. I like to use yellow for minor, orange for moderate, red for severe, and magenta for extremely severe.

I also like to apply different border styles depending on what the problem may be. Dotted for me means there is a bad attribute. Solid means there is a bad element. Other border styles have their own meanings as well.

Considerations:

Make sure to place this at the end of your stylesheet and to leave in the !important rules so that they override any rules that may be inline.

It is also best to use a standards compliant browser when testing. IE7 is ok but I would personally suggest Firefox 3 because it supports standards better and because it has other add-ons that make web development easier and diagnostic testing easier.

Download:

I've set up a Google Code Project so feel free to download it.

View Comments [0]

The problem was Internet Explorer kept highlighting all of my images, particularly my anchored images in solid 5px magenta (essentially proprietary elements)

I automatically started my comment strips of selectors out method, which is short is using deduction to pick out the offending selector. This is the offending tag I ended up with:

A Brand New Internet Explorer Bug...The HTML IMAGE Element:

That's right, some random archaic element. Now the real problem here is that Internet Explorer, and only Internet Explorer was highlighting regular old IMG tags even though my selector was calling for IMAGE tags. That's a bug, and that's a new bug to my knowledge. This does beg for me to cook up some kind of hackary to target IE regarding images on web pages but why not just use conditional comments? If you had a very, very specific case where you wanted to target IE and only IE images this might be useful. Other than that I'm not sure where it would get used.

Sources:

• http://en.wikipedia.org/wiki/Non-standard_HTML_tags

View Comments [1]

1. Remove First String Character In ASP Classic

   Input String = "/products/computers/parts/default.asp"

   First lets lower case that url

   url = lcase(request.ServerVariables("URL")) url = right(url,len(url)-1)

   What this does is moves the length of the string minus 1 space from the right position of the string using the right() and len() built in functions in ASP. I realize that there are probably easier ways to do this in other languages but I figured I'd fill that empty hole on the internet in this subject by writing it up.

2. Remove Forward Slashes

   Class Name = "products/computers/parts/default.asp"

   Next lets remove all forward slashes and replace them with underscores. (Note you can use whatever separator your want, I prefer underscores for readability.

   url = replace(url,"/","_")

3. Remove File Extension And Add Prefix

   Class Name = "products_computers_parts_default.asp"

   Last, lets remove the file extension and give the class a prefix of "url_" to set it apart from other class names.

   url = replace(url,".asp","") CreatePageClassName = "url_" & url

Putting It All Together

Class Name = "url_products_computers_parts_default"

Where To Use This

I would personally place this on your body tag as an ID if possible:

Which would result in this:

Reference:

• http://reference.sitepoint.com/css/specificity

View Comments [1]

CSS Selectors For Finding Broken Links

Then it occurred to me, why not use my CSS to highlight broken links? Here's how.

Rationale

This will select any anchor tags where their href attribute equals the 404 broken link page. For those of you using my CSS Diagnostics stylesheet, I used a different border-style here so that we can differentiate between the highlighted elements. This works good and fine but what about those newbie coders at work who still link to pages using "../" or the ones that include the domain name within the link?

Take Two

Rationale

This will first style the suspected broken links using CSS and then de-style the correct links.

Other Uses

This can also be used to style elements that are calling old JavaScript functions:

This will search through the entire onclick attribute using the substring selector for "old()". The reason I used the *= select is because sometimes developers place the function call before or after other functions so I need to be a bit less specific.

Notes

Like CSS Diagnostics, you will need to use a standards compliant web browser fully supporting CSS3 selectors. I've found that Firefox seems to be the best browser since it comes with many other developer tools as well.

View Comments [0]

View Comments [0]

The Solution:

Fortunately there is a solution using CSS:

The Opposite

If the meaning of your life depends on not conforming to Microsoft (you're out there) you can also make IE behave like Firefox:

Whatever method you prefer I would recommend placing this in your baseline stylesheet before starting a new web site or project. Your users will thank you.

Sources:

• Controlling browser scrollbars

View Comments [1]

One thing you'll notice with JavaScript programming is the methods and property calls can get quite lengthy. There is a solution to this and that is to create your own custom functions with shorter function names.

Short Named JavaScript Functions:

Each of these is simply a shorter way of calling the built in JavaScript functions. By using these you can reduce the file size of of you JavaScript and also increase the legibility. Probably the only con to these functions is there will be a performance decrease since the code will have to do an extra call each time it's used.

If you can think of any other down and dirty JS functions feel free to leave a comment and fill me in.

Sources:

• All credit goes to Chris Retlich

View Comments [4]

Then the other day I ran across this nugget of an article.

Reversing Arrays in ASP:

1. Here we define our array. In most cases this is done from a database. articlesRev = array( _ "array item 0", _ "array item 1", _ "array item 2", _ "array item 3" _ )
2. Next we loop through our original array and reverse it. Dim articles() ubnd = UBound(articlesRev) Redim articles(ubnd) for i = 0 to ubnd articles(ubnd - i) = articlesRev(i) next
3. Finally we write out our array, which is reversed now. for i=0 to ubound(articles) response.Write(articles(i)&"<br>") next

Putting It all together:

Sources:

• http://www.cruto.com/blog/?p=4

View Comments [4]

I won't tell you how annoying the software is to make a flash movie but I will tell you how annoying it is to simply embed a flash file in your web page using valid HTML.

Here is the jist of what I needed to accomplish:

1. Valid HTML
2. A movie that doesn't repeat
3. A movie with a clickable link/region
4. A movie with a transparent background
5. Avoid annoying "Click to activate this control" in Internet Explorer

I was able to do these things but never a combination of all of them. I first tried using a javascript library called SWF Object since that is something I've seen on our work websites. SWF Object worked fine although it failed miserably with the transparent background. I tried pretty much everything I could think of to get that to work even using examples from the documentation but to no avail it sucks.

On a side note, people are seriously over-using these javscript libraries. Within a few years every legitimate web developer will have forgotten getElementById() and will assume that javascript can naturally select individual elements by class name with no problem. I think libraries are the cheap way out, not to mention how many KB they take up. Check out one of my work websites. It has over 12 javascript files, clocking in at over 240KB. Gez.

After that I tried simply hardcoding the html into the webpage. This worked fine in IE but Firefox and the likes required the noncompliant EMBED tag to make it work. Even worse was I was now faced with the annoying Click to activate this control problem in Internet Explorer.

After various modifications to my code I ended up just taking the invalid EMBED tag wrapped with an OBJECT tag and through it in an external javascript file using multiple document.writes

Everything worked now, except the code technically wasn't valid HTML even though the W3C validator said so. Then today I read this article on Alistapart and specifically this comment. After that it all made sense to me. After hours of toiling I had found the solution and everybody was wrong!

This code not only validates but it works. The only drawback here is we still have the annoying click to activate this control problem in Internet Explorer. The trick here was to remove the ClassID attribute since that stopped it from working in Firefox and adding the DATA attribute.

<object type="application/x-shockwave-flash" data="/yourfile.swf">
<param name="movie" value="/yourfile.swf">
<param name="loop" value="false">
<param name="wmode" value="transparent">
</object>

Embeding Flash Without Click To Active And Using Valid HTML

Simply place this script in an external .JS file and call it using the bottom function. Viola, no more click to activate, transparent background, doesn't repeat, and work fine in all browsers without the stupid EMBED tag and without annoying conditional comments for IE.

<script type="text/javascript">
function writeFlash(file)
{
document.write('<object type="application/x-shockwave-flash" data="'+file+'">')
document.write('<param name="movie" value="'+file+'">')
document.write('<param name="loop" value="false">')
document.write('<param name="wmode" value="transparent">')
document.write('</object>')
}
</script>

<script type="text/javascript">
writeFlash("/yourfile.swf");
</script>

G00gle B0mb Attempts

• The answer
• Doesn't completely work
• Not the right answer

View Comments [2]

The advantages of doing this over the old fashioned way of creating seperate link references for each of the media types is that you can cut down on requests to your web server. If you have a highly visited website this can make a difference. After you have created your all.css file. The next step is to simply create all the typical things you would for the CSS screen media type. Then below that, place this code. You can replace the .class reference with your own personal CSS. For testing the handheld media type download the Opera web browser since it comes with handheld rendering built into it.

Targeting Specific Media Types With CSS:

Notes:

This works on all modern browsers including IE 6 so feel free to integrate it into your site.

View Comments [2]

This function can be called like so:

View Comments [2]

An easy solution to these problems is to create a function within ASP that spits out the file type and the file size after the link to let your users know using asp how large a file is and what the file type is.

How To Get File Size and Type Using ASP

To call this function simply do this:

View Comments [4]

Here's How To Change The Text Selection Color:

Notes:

This is currently supported by Firefox and Safari. I would suspect that Opera also supports it. Unfortunately Internet Explorer does not support it, but with IE8 coming out soon supporting CSS better, it may work in there as well.

Sources

• Comparison of layout engines (CSS)

View Comments [0]

The Forgotten Links:

• External links
• PDF links
• Email links (mailto)
• Anchored links
• Popup links (target="_blank"
• etc.

By adding specific styles to these types of links you can add a second layer of usability to your website. When a user sees a PDF icon next to a link they will automatically know that what they are about to click is a PDF. The same can be said for external website links and email links. Many novice CSS designers will solve this problem using classes, i.e <a href="http://..." class="external">My Link</a>. While this would work early on in site development many of us in the real world inherited a really poorly developed site and need to use other methods to style links site wide.

Styling External Links With CSS:

By using CSS3 selectors we can select all <a> tags that begin with "http" giving them a background image and padding right to accommodate that image:

Styling Email Links With CSS:

The same can be done with email links. Here we style all <a> tags that begin with "mailto:" and apply our email background image.

Styling PDF Links With CSS:

Finally PDF links can be styled by styling all <a> tags that end with ".pdf" and apply a pdf icon to them.

Putting it all together:

Notes:

This will not work in IE6 but because IE6 does not support the CSS3 selectors. It will show the links as normal without the background image and without the padding. This works out perfectly as users with more modern browsers such as IE7 and Firefox will reap the rewards of your ingenious CSS coding.

Sources:

• Wikipedia's Style Sheet
• Comparison of layout engines (CSS)

View Comments [5]

I've been getting so many hits on this article that I decided to update it. I have added a few more elements and attributes and changed the colors around. The most severe code is colored red while less severe is colored yellow. There is also a medium severarity that is colored orange. Also remember that elements have solid borders while attributes have dotted boreders. Also check out my Test Suite showing examples of CSS Diagnostics in action.

The other day I was reading Eric Meyer's blog and stumbled across his version of what he likes to call CSS diagnostics. So what is CSS diagnostics? It's a method to highlight those ugly spots in your code, you know <font color="red" size="+1">. Yeah under the hood, somewhere on your website garbage like that exists, yet it's always so hard to hunt down and fix. Never fear CSS diagnostics is here!

CSS Diagnostics allows users to find deprecated elements using CSS and also find find deprecated attributes using CSS. Sorry to have to repeat myself so much here, I'm trying to rank high in SEO with some of these terms since this is still very much uncharted territory.

So how do you use CSS Diagnostics? It's easy! It requires a pretty good knowledge of CSS 2 & CSS 3 selectors and a good knowledge of deprecated HTML elements and attributes.

Follow these steps:

1. Highlight Deprecated Elements

   applet, basefont, center, dir, font, isindex, menu, s, strike, u, marquee, blink, acronym /* html 5, use abbr */ { border: 5px solid red !important; }

2. Highlight Deprecated Attributes

   br[clear], hr[noshade], *[color], *[bordercolorlight], *[bordercolordark], *[bordercolor], *[background], *[bgcolor], *[nowrap], body[alink], body[link], body[text], body[vlink], body[bottommargin], body[leftmargin], body[rightmargin], body[topmargin], body[marginheight], body[marginwidth], ol[compact], ul[compact], *[start], img[hspace], img[vspace] *[align], *[valign], *[height], *[width], ul[type], ol[type], li[type], basefont[size], font[size], hr[size] { border: 5px dotted red !important; }

3. Highlight Proposed Deprecated Elements

   input[type="button"], input[type="reset"], input[type="submit"], tt, embed, big, small { border: 5px solid orange !important; }

4. Highlight Proposed Deprecated Attributes

   a[target], table[cellpadding], table[cellspacing], map[name], img[name], object[name], form[name], iframe[name], a[name], table[border], img[border], object[border], input[border], object[classid], object[codebase], embed[quality], embed[pluginspage] { border: 5px dotted orange !important; }

5. Highlight Specific Empty Elements:

   div:empty, span:empty, li:empty, p:empty, td:empty, th:empty { padding: 20px; border: 5px solid yellow !important; }

6. Highlight Specific Empty Attributes

   *[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"] { border: 5px dotted yellow !important; }

Putting it all together:

Place this code at the end of your stylesheet:

Download The Full Stylesheet

Notes:

It's a good idea to create consistency with your rules. I chose to highlight all attributes in a solid border while highlighting all elements in a dotted border. Also choose different colors for different meanings.

It should also be pointed out that you should use the most standards complient web browser when checking for results. Currently I found that Firefox 2 seems to work best as it comes with many other addons that can work side by side with the custom CSS.

I enjoyed reading Eric's ideas on it but felt I could expand it a bit more. Certainly other's can expand on my version as well. Feel free to contact me if you see something I'm missing.

Sources

• http://meyerweb.com/eric/tools/css/diagnostics/
• http://www.w3.org/TR/html401/index/elements.html
• http://www.w3.org/TR/2005/WD-xhtml2-20050527/elements.html
• http://www.w3.org/TR/2005/WD-xhtml2-20050527/attributes.html
• http://www.w3.org/TR/2008/WD-html5-diff-20080122/
• http://www.html-reference.com/depreciated.htm
• http://www.codehelp.co.uk/html/deprecated.html

View Comments [5]

The easiest way to accomplish this is to place the target="_blank" attribute on an anchor. Unfortunately if you validate your code with the W3C you will find that it is not valid to use that practice. Do not fear, there is a solution!

The workaround err, solution, is to place an onclick on the anchor tag. The code below will open a new window, get the value in the href attribute and cancel the action the href attribute would take.

View Comments [3]

XHTML can be served as text or XML. It seems that 90% of sites using XHTML are serving it as XML but are failing to serve it correctly to Internet Explorer as XML. Never fear, there is a solution.

So why bother serving it as XML to Internet Explorer? If you do it will mean that your html code will appear as XML and will have to adhere to XML standards. This means that you can be sure the code you are using is extremely compliant. It will also mean that if your page is not valid, it will not display without error. It's an annoying but great way to keep your code clean

Follow these steps:

1. Serve your page as application/xml to Internet Explorer and as application/xhtml+xml to every other browser:

   If InStr(Request.ServerVariables("HTTP_ACCEPT"), "application/xhtml+xml") > 0 Then Response.ContentType = "application/xhtml+xml" Else Response.ContentType = "application/xml" End If

2. Use a special .xsl file at the top of your page above your doctype:

   <?xml-stylesheet type="text/xsl" href="xhtml.xsl"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   Contents of xhtml.xsl file:

   <stylesheet version="1.0" xmlns="http://www.w3.org/1999/XSL/Transform"> <template match="/"> <copy-of select="."/> </template> </stylesheet>

3. Add html element to page:

   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Putting it all together:

Sources

• OT: How do you serve up XHTML?
• XHTML 1.1 Conformance Definition
• MIME Types and Content Negotiation
• The <?xml> prolog, strict mode, and XHTML in IE
• XHTML media type test - results: Microsoft Internet Explorer 7.0 Beta2
• XHTML media type test - results
• Cannot have a DOCTYPE declaration outside of a prolog. Error processing resource
• Does Microsoft Internet Explorer accept the media type application/xhtml+xml?
• XHTML: How to succeed
• XHTML Deprecated Elements and Attributes

View Comments [3]