• include multiple methods for contacting me
• incorporate microformats
• use clean, modern code that is flexible enough for quick styling
• use progressive enhancement
• create a strong design and organize intelligently
• share a little something about myself

It took me all day last Saturday to design and code, but I finished in time to enjoy a beer or two and watch a movie. Please take a look and and post your feedback. Be sure to dig under the hood as well if UI design is your sort of thing.

Please view the page at www.erikphipps.com.

I started running the causes through my head; position is relative, IE 7, target layer opens below event element…and then it hit me! Simply position the layer above the event triggering element! It worked because everything above the relative container was rendered before it in the source html. It was like manually reversing the z-index with jQuery except, since it was going in reverse, the browser had stacked the items correctly! Luckily the component I was working on had both the space and design to accomodate such a solution.

1. Create raw html code with only the most basic tags and high level block divisions. This step is important to finish first so that anytime after it is done, the markup can be passed on to a developer. Don’t add ANY CSS until you are done!
2. Start applying structural styles first to get the basic layout worked out.
3. Apply any background images on the high level structural elements and/or body.
4. Apply non-color styles such as padding, margins, font-size, to block level elements, then inline elements if necessary.
5. Apply final colors and finish any fine-tuning

Also, don’t forget to test in all supported browsers after each step.
]]> http://www.thetransient.com/build-htmlcss-pages-or-components-from-the-ground-up/221/feed/ 0 http://www.thetransient.com/ie6-sniffer-using-conditional-comments/197/ http://www.thetransient.com/ie6-sniffer-using-conditional-comments/197/#comments Fri, 30 Jan 2009 05:30:40 +0000 Erik Phipps http://www.thetransient.com/?p=197 I needed a fail-proof Internet Explorer 6 JavaScript sniffer and it seemed like everything I Googled warned of possible scenarios where it could possibly not work. Then It struck me that since I only needed to detect one version of Internet Explorer I could make a very simple script using Internet Explorer’s conditional comments.

I know what you are thinking, that JavaScript sniffers are outdated and go against all that is web standards. I agree. However, as IE6 fades into the past, isn’t it time we started ignoring instead of bending over backwards for its lack of standards support? This is where a JavaScript browser sniffer comes in!

Others have probably used this technique and expanded it to other versions of Internet Explorer as well. For this post, I am just going to discuss the IE6 version since it is very simple to expand it to all other versions of IE.

Drop this javascript snippet in a script tag in the head of your document:

var browserSniffer = {isIE6 : false}

Then, inside an IE conditional comment targeted at IE6, change the value of isIE6 to “true”. Like this:

browserSniffer = {isIE6 : true}

What you end up with is a non-global variable that is always equal to false unless the browser is IE6, then it is true. You can then easily dis-invite IE6 to the web standards party!

if (browserSniffer.isIE6 == true) {
	// fix some bug in IE6
}
else {
	// Do something sweet in other browsers
}

Standalone example – IE6 conditional comment javascript browser sniffer

Click on the Console tab to activate it, then click on the drop-down arrow and select Disabled from the drop-down menu. Repeat this for the Script tab and the Net tab. Now these three features will be disabled by default. When you want to use any one of them, simply activate them on a per-site basis by ticking the tab next to the appropriate feature and clicking the Apply settings for www.site.com button.

Check out this hiding non-vital content example.

The method for the example is very simple and can be accomplished with a small jQuery function and a single class assigned to each element we want to hide. This can of course be done with plain old javascript as well but I’ll use jQuery because it’s so darn easy.

Here is the jQuery code:

1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function() {
//hide secondary content
$(".secondaryContent").css("visibility","hidden");
 
// toggle secondary content items on hover
$("#p110_showHideExample li").hover(function() {
	$(this).find(".secondaryContent").css("visibility","visible");
},function(){
	$(this).find(".secondaryContent").css("visibility","hidden");
});
});

Now all we need to do is add the class “secondaryContent” to any element we want to be visible only when the user mouses over the containing element.

For example, here is the remove link html from the upper right corner of the example:

1

<div class="delete secondaryContent"><a href="#">X</a></div>