Scoble showing some SharePoint love?

Thanks to Jan Tielens for pointing me to this:

Thanks to a Dashboard Spy inside the Scoble encampment, we have this peek at the executive dashboard that Robert Scoble, famed blogger at microsoft, uses.

This screenshot was grabbed from Scoble’s screen and smuggled out to us last night. It’s worth a look to see the kinds of metrics that he is tracking. Lots of gauges, scales, graphs and such. Perhaps too much? It also seems like he can use the dashboard to actually post to his blog and then monitor the buzz it creates. I’m told by a dashboard coding expert that the technology behind this enterprise dashboard is Microsoft Sharepoint Portal. There is heavy customization of the webparts. As you know, there has been some controversy about Robert Scoble and his posts lately. I think that he’s done some great work and wish him the best.

I have no idea if this is real – looks neat :)

CSS + Master Pages + Printing

The project I am currently working on has tossed me into the deep-end of Visual Studio 2005 and Master Pages.

Part of this journey is comprehending the “Theme” approach to CSS in the App_Themes Directory versus my much accustomed to way of embedding my stylesheets.

For example when I want to include a print stylesheet I normall embed this in the page:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

While creating my print stylesheet I realised there is no way for me to add the media=print to the web.config theme reference which looks like this:

<pages styleSheetTheme="Default" />

After a little quick digging with a team-member we quickly discovered (new to both of us) a standard for print which we had no idea existed. The ability to embed your print stylesheet at the END of your main stylesheet using @ media print { }

So bascially you simply copy/paste everything from your print CSS file and place it at the end of your main CSS file inside of:

@ media print { /* Insert your print stylsheet here */ }

It’s true what they say, you learn something new every day. This seemed worth sharing as I had no idea you could do it until now and I consider myself fairly well versed when it comes to CSS.

XHTML Validating Module for ASP.NET 2.0

Thanks to Scott Hanselman for pointing to this beauty:

Go directly to the download website and get the XHTML validator module for ASP.NET 2.0

Josh Twist over at JoyOfCode has a “Validator Module” that sits at the very end of the HttpRequest and validates the page you just rendered as XHTML or not, then displays the detailed results. If you’ve ever found it a hassle to run XHTML validation on your site at runtime you should take a look at this clever idea. With tools like this ValidatorModule plus validation within Visual Studio.NET always improving as well as tools inside of FireFox to validate, there’s fewer and fewer excuses to not render XHTML.

Try the asp.net2.0 XHTML validator out on Josh’s site, pound on his demo, and leave him some feedback. You can add it to your .NET 2.0 applications without recompiling. He’s also expressed that he could backport it to .NET 1.1 if there’s demand.

More great java’scripting.

Every day now there are great new scripts popping up that really really add to the visual presentation of websites. keep in mind a lot of these scripts can be used in SharePoint just as easily in many ways such as the Content Editor Web Part, Site Definitions as well as Page Templates.

One such script I stumbled across today is just too good not to share! Lightbox JS

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

How to Use:

Part 1 – Setup

1. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 – Activate

1. Add a rel=”lightbox” attribute to any link tag to activate the lightbox. For example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Optional: Use the title attribute if you want to show a caption.

2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Visit the Lightbox JS site to download

CSS and Rounded Corners (Without Images)

Awhile back I did a lot of searching for effective ways of creating rounded corners. I found literally dozens of workable solutions using 4 corner images.

Then I found an absolutely awesome solution to create rounded corners without using images and instead using a little CSS and Javascript. This is a real gem, it degrades gracefully and makes the job pretty easy.

This morning I was informed that this great solution has been revisted, made even easier, cleaner and better. And on that note I give you:

Nifty Corners Cube:
More than one year has passed from the first version of Nifty Corners. While it was more of a proof of concept, and the second version presented some big improvements, there was still something missing. So here I present Nifty Corners Cube, that are simpler and more flexible than the previous versions.

Anyone involved with CSS and Design I would strongly recommend at least reading this through and being aware of it.

Visit the Nifty Corners Website

CSS and 100% height

I have searched high and low for information on this topic, I have experimented again and again with very limited success. I wanted to share my findings in hopes that someday some poor soul will not have to go through the horror of trial and error.

My dilema even made it to the SXSW panel where Vertua partially tackled some of the issues people have with absolutely positioned layouts and gave a presentation on better CSS layout strategies.

The goal here is to create a 100% vertically stretching column with a background colour (not an image) that will stretch to 100% height regardless of the amount of content, (ie a single line of text, or 100’s of lines).

If you are pressed for time or are tired of wasting time researching this issue my conclusion thus far is that it certainly isn’t easily accomplished. Below outlines the best methods I have found thus far.

Courtesy of Position is Everything
Equal Height Columns

The Magic

The basic method works like this:

1. Blocks which will act as columns must be wrapped in a container element
2. Apply overflow: hidden to the container element
3. Apply padding-bottom: $big_value [2] to the column blocks, where $big_value is a large enough value to guarantee that it’s equal to or larger than the tallest column
4. Apply margin-bottom: -$big_value to the column blocks

What happens is that columns really become as tall as the content they contain plus $big_value thanks to the padding-bottom. The negative margin-bottom brings the flow of the document back to where the same point as where the padding-bottom began, and the overflow: hidden on the containing element chops off the overflow[3]. Consequently the columns’ presence on the page only appears to be the height of the containing element and any background colour (or image for that matter) applied to the columns displays for that height. Most crucially, the height of the page reflects what appears to be on the page and does not dissappear into the scrolling distance.

Remarkably, IE Win doesn’t actually need the overflow: hidden, but it causes no problems so there is no need to hide it.

Beware though, browsers don’t let you throw arbitrarily large values at them. They have limits. Exceed that limit and the columns will expand to the padding-bottom value and you’ll end up wiuth some pretty long pages. Fortunately, we know the number of that limit (which is actually provided by Safari which is the most conservative browser in this matter): 32767px.

The CSS:

#wrapper {
#block1 {
padding-bottom: 32767px;
margin-bottom: -32767px;
#block2 {
padding-bottom: 32767px;
margin-bottom: -32767px;


<div id="wrapper">
<div id="block1">Block 1</div>
<div id="block2">Block 2</div>

Note: The above example is the very bare bones, please read the entire article to get browser specific code.

Even this method does not accomplish 100% height if the content doesn’t already stretch to more than your viewport. It does however work well for creating equal height columns and when the content does fill more than the viewport it does appear to be 100% stretching. IE: No more “cut off”.

Other things I have tried which gave me limited or no success:

1) A 100% height wrapper around an absolutely positioned 100% height column. This works only until the content runs outside the viewport. The column appears “cut off” and the content runs out over it.

2) Min-Height – I simply had zero luck with this

3) Wrapper with Overflow and Floated Columns – Again I get “cut off” after the viewport.

4) Every height, min-height, wrapper, no wrapper, float, position and even doc-type scenario I could think of.

There have been rumors of display:table; coming to the rescue in the future but as of now I have yet to find the perfect solution. This also means that unfortunately that some people may be forced to remain with tables for certain layout methods.

I really look forward to discussing this particular quirk (no pun intended) with readers.