CSS: font shorthand

When styling fonts with CSS you may be doing this:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

There's no need though as you can use this CSS shorthand property:

font: bold italic small-caps 1em/1.5em verdana,sans-serif

Much better! Just a few of words of warning: This CSS shorthand version will only work if you're specifying both the font-size and the font-family. The font-family command must always be at the very end of this shorthand command, and font-size must come directly before this. Also, if you don't specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal, so do bear this in mind too.

Design: Netvibes

http://www.netvibes.com/

SysAdmin: Sysinternals, a bunch of cool tools

http://live.sysinternals.com/

First, you can point your browser to http://live.sysinternals.com/ for no-nonsense access to any Sysinternals tool. Even better, though, you can open up Windows Explorer and point it to \\live.sysinternals.com\ to browse and launch any Sysinternals app as though you've already downloaded and installed it on your computer. That means next time you're doing tech support for friends and you forgot your PC Rescue Kit, you can quickly get to any Sysinternals tool for help. At the very least, though, it's a quicker way to start the BlueScreen screen saver on a friends computer.

CSS: Static Positioned DIV

#blue {
width: 100px;
height: 100px;
position: static;
background-color: blue;
margin-top: 50px;
margin-left: 50px;
}

h1 {
border: 1px solid #000;
margin: 0;
}

Image 1: Using margins on a static div

Our static div responds just fine to margin settings. The values for these margins are calculated against the h1 element and the body margin/padding, in the same way as they would be with the relative div. The static div is also said to be in the flow of the page, which means its position is affected by surrounding elements. To demonstrate this, we can add a new declaration into our h1 rule. Add the margin-top property as shown.

#blue {
width: 100px;
height: 100px;
position: static;
background-color: blue;
margin-top: 50px;
margin-left: 50px;
}

h1 {
border: 1px solid #000;
margin: 0;
margin-top: 100px;
}

Image 2: Adding a top margin to the h1 element

Notice how the top margin has pushed down the h1 element. Our div, however, has maintained its positional relationship with the h1 - it is still 50px below the h1 element.

CSS: Relatively Positioned DIV

A relatively positioned div is said to be in the document flow. As such, our blue div will now occupy space at the page level, and its existence will have an effect on surrounding elements.The flow is based on code order in your source code.

#blue {
width: 100px;
height: 100px;
top: 0;
left: 0;
position: relative;
background-color: blue;
margin: 0;
}

h1 {
border: 1px solid #000;
margin: 0;
}

Image 1: Relative and Absolute positioning. Both divs are set at top 0 & left 0

Both our relative and absolutely positioned divs will respond to margin settings, including negative values.

http://www.communitymx.com/content/article.cfm?page=2&cid=3B56F

CSS: Absolutely Positioned DIV (AP)

#blue {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background-color: blue;
}

Listing 1: Defining an Absolutely Positioned div

Let's take a look at the above code line by line.

1. #blue - The # in front of our selector declares that this is an ID selector
2. width: 100px; - The div will be 100px wide
3. height: 100px; - The div will be 100px high
4. position: absolute; - The div will be absolutely positioned in accordance to the top and left property values
5. top: 0; - The div will be positioned 0 units from the top edge of the browser viewport
6. left: 0; - The div will be positioned 0 units from the left edge of the browser viewport
7. background-color: blue; - The background colour of the div will be blue

I have given our div a height value. It is often a good idea to not declare a height for your div so it can expand and contract to suit the content it may hold. Content could fluctuate due to text resizing by the end user, or you may be using your div for dynamic data that varies from record to record. These are two examples of instances where a height declaration may be a problem.

Once the positioning value has been declared as absolute, it is removed from the flow of the page. An absolutely positioned div will remain in the position it is placed—in accordance with its top and left property values—within its containing element. You can think of an AP div as being on a higher plane than page level. They act as if they are stacked above the page.

http://www.communitymx.com/content/article.cfm?cid=3B56F

CSS: Scrollable DIV with OVERFLOW property

<div id="copytext" style="overflow:auto;width:100px;height:100px;border:1px solid #91073C;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur justo. Curabitur rutrum, tellus vehicula elementum lobortis, nisl nulla tempor libero, vel pulvinar purus tellus vitae tortor. Donec condimentum condimentum turpis. Vestibulum eu nulla vel nibh vestibulum pellentesque. Aliquam malesuada dignissim elit. Integer tincidunt ullamcorper massa. Mauris turpis. Mauris magna. Sed sit amet velit sed diam porttitor posuere. Ut semper tortor convallis nisi. Suspendisse risus magna, lobortis et, sagittis eu, suscipit at, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum placerat sem. Nulla pede. Donec euismod tortor vitae velit. Nullam tempor lectus sed justo. Nulla facilisi. Nulla sodales consequat ipsum. Etiam ac nulla mattis ipsum tempus bibendum.
</div>

Value	Description
visible	Default. The content is not clipped. It renders outside the element
hidden	The content is clipped, but the browser does not display a scroll-bar to see the rest of the content
scroll	The content is clipped, but the browser displays a scroll-bar to see the rest of the content
auto	If the content is clipped, the browser should display a scroll-bar to see the rest of the content

Javascript: Copy text to clipboard function

<SPAN ID="copytext" STYLE="height:150;width:162;background-color:pink">
This text will be copied onto the clipboard when you click the button below. Try it!
</SPAN>
<TEXTAREA ID="holdtext" STYLE="display:none;"></TEXTAREA>
<BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON>

<SCRIPT LANGUAGE="JavaScript">

function ClipBoard()
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}

</SCRIPT>

Extract description from site:

The script, as it is currently written, copies whatever text is within the SPAN tags. If there is code, like a
command created to display using & commands, those will copy right along. If you've got formatting in the text and you only want the user to copy the text, then you need to add a command that will remove that formatting. Luckily, there's an execCommand that will do that for you. It's important that you place it in the script before the copy process.

<SCRIPT LANGUAGE="JavaScript">

function ClipBoard()
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("RemoveFormat");
Copied.execCommand("Copy");
}

</SCRIPT>

NOTE: due to mozillas tight security setting this script only works in IE.

Other variation

var x = document.getElementById("EncodedString").value;
window.clipboardData.setData('text', x);

Misc: Forward and Back Slashes

Just a reminder not to get confused.

This is a slash: /. Because the top of it leans forward, it is sometimes called a “forward slash.”

This is a backslash: \. Notice the way it leans back, distinguishing it from the regular slash.

Slashes are often used to indicate directories and subdirectories in computer systems such as Unix and in World Wide Web addresses. Unfortunately, many people, assuming “backslash” is some sort of technical term for the regular slash, use the term incorrectly, which risks confusing those who know enough to distinguish between the two but not enough to realize that Web addresses rarely contain backslashes.

.NET: Ignoring Thread Abort Exception in Enterprise Library Exception Handling

Noticed that the trace.log in TRAKIT was filling up rather quickly.
Whenever it hits a response.redirect, .NET was generating a thread abort exception.

To ignore, do this:

try{
//your try block
}catch(System.Threading.ThreadAbortException ex)
//exception ignored to prevent logging in trace.log
}catch(Exception ex){
//catch error using Enterpise Library logging
bool rethrow = ExceptionPolicy.HandleException(ex, "Business Layer Policy");
if (rethrow){
//throwing the error again to write to page
throw;
}finally{
//Do something
}