Why? Because once you open that page layout in SharePoint Designer, it gets un-ghosted. This does two things. First, it means that you have to make changes in SharePoint Designer. The .aspx file in the feature directory is no longer used when rendering pages based on that page layout. Second, if you’ve attached a code-behind to the page, you’ll get a error indicating that type is not registered as safe. This occurs because SharePoint uses a type-safe parser on all un-ghosted content.

If you’ve come accross this post because you already did open the page layout in SPD, have no fear. To remedy your error, simply go to Site Actions…Site Settings…Reset to Site Definition. Once you do that, re-deploy your feature containing the page layout. Now, your page layout is ghosted.

Update: Well, I ran into an issue where “Reset to Site Definition” just didn’t work. So, I tried the stsadm command here (with -force): http://stsadm.blogspot.com/2007/09/re-ghosting-pages.html and now we’re back to un-ghosted. Very frustrating.

Just put this code in your masterpage or external .js file. Make sure the code or link reference is the last thing in the tag.

function MSOLayout_GetRealOffset(StartingObject, OffsetType, EndParent)
{
	var realValue=0;
	if (!EndParent) EndParent=document.body;
	for (var currentObject=StartingObject; currentObject && currentObject !=EndParent
         && currentObject != document.body; currentObject=currentObject.offsetParent)
	{
		var offset = eval('currentObject.offset'+OffsetType);
		if (offset) realValue+=offset;
	}
	return realValue;
}

“If you are running into this issue on Vista and Windows 7 you can get the TAB key back by creating a software allow policy. Go to administrative tools, local security policy, Software Restriction Policies, Additional Rules. Create a new rule for %appdata%\microsoft\vritual pc\vpckeyboard.dll and set it to Unrestricted. Restart Virtual PC.   If the variable doesn’t work, try using an explicit path i.e. c:\users\username\appdata\roaming\microsoft\virtualpc\vpckeyboard.dll”

Did that and it started working.  Note in the post that this applies to Vista and Windows 7 only.  I’m running Windows 7 x64.

.ms-topnav a
{
	border-left-style:solid !important;
	border-left-color:#fff !important;
	border-left-width:1px !important;
	padding: 0 10px 0 10px;

}

However, this leaves the border on the first element of the navigation, which we don’t want. There’s no way to select that element using just CSS, so JQuery to the rescue:

$(document).ready(function(){

	$(".ms-topNavContainer").each(function() {

        var links = $(this).find("a");

        if (links.length > 0) {
            var link = links[0];
            $(link).addClass("navLast");
        }

    });

});

The CSS for “navLast”:

a.navLast
{
	border-left-style:none !important;
}

The interesting thing here is that it has to be “a.navLast”. For some reason, “.navLast” doesn’t work. Also, you can’t use “border-left” to add the dividers. You have to use the individual styles (most likely because of the inline styles on the element).

/* Top Bar */
.ms-globalbreadcrumb
{
	background-color:#7caf72;
}

/* Header */
.ms-globalTitleArea
{
	background:none !important;
}

/* Navigation */
.ms-bannerContainer, .ms-pagemargin, .ms-navframe, .ms-leftareacell
{
	background:none !important;
}
.ms-nav
{
	background-image:none !important;
}
.ms-topnavContainer, .ms-topnavselected, .ms-topnav {
	border: none;
	background: none;

}

table.ms-topnavselected, table.ms-topnav {
	height: 30px;
	margin-left: 1px;
	margin-right: 1px;
}
.ms-topnavContainer div
{
	background-color:transparent !important;	
}
.ms-topNavFlyOuts, .ms-topNavFlyOuts a:link
{
	background-color:transparent !important;
}
/* Body */
body {
	text-align: center; 
	margin: 0px auto;
}
body.ms-BuilderBackground {
    text-align: left !important;}
.ms-main
{	
    background: #fff;  
    width: 1020px !important;
    height: 100%; 
    margin: 0px auto !important;	
    border-bottom:10px #7caf72 solid;
}
table.ms-main 
{
	text-align: left;
}
/* Gets rid of default light blue background everywhere */
.ms-pagemargin, .ms-nav, .ms-pagebottommargin, .ms-pagebottommarginleft, 
.ms-pagebottommarginright, td.ms-rightareacell div.ms-pagemargin, .ms-titlearealeft,
.ms-titlearearight, .ms-titleareaframe, .ms-pagetitleareaframe, 
.ms-pagetitleareaframe TABLE, .ms-bodyareapagemargin, .ms-bodyareaframe, 
.ms-areaseparatorright, .ms-areaseparatorleft
{
	background: transparent !important;
	border: none;
}

.ms-pagebreadcrumb a {
	background-color: transparent;
	color:#fff;
}

I plan on trying this out later this week and posting my findings.

1.  Context – this issue arose while using jquery’s .ajax() method as so:

$.ajax({
            url: "../_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: this.processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });

I kept getting an error saying it couldn’t find the processResult() function. Turns out the “this” keyword wasn’t returning the context of the class. Instead, it was returning the context of the ajax() function call. After searching the intrawebs, I came accross this article. So, by adding the code and changing “this.processResult” to “$.context(this).callback(‘processResult’)” the problem was solved.

1A. Context and Recursion – this issue occurred while using a recursive function to write out a menu with child elements. Once again, this worked fine until I put everything into a class. However, once I did that, I started getting some weird issues with my for loop. The counter would increment twice while the recursive call was made. I wasn’t able to figure this one out, so I just unrolled the function.

2. Array sorting (mostly for my benefit) – a cool way to sort an xml array in descending order:

this.sortRows = function(a, b){
        return ($(a).attr("columnName") - $(b).attr("columnName"))
    }

Then call the function like this:

array.sort(this.sortRows);