CSS Resets

Jason — Thu, 09 Jul 2009 18:49:17 +0000

When designing XHTML and CSS it is important to be cognoscente of the fact that every browser will interpret your code a little bit differently. This mostly has to do with the default styling, padding, and margin of different elements as determined by a particular browser. While your page may look generally the same in all browsers, if you look closely, there is a good chance that you can catch the minor differences in presentation. Most of the time it is readily evident if you develop a site in one browser (Firefox) and then proof it in another (IE). The margin and padding of commonly used tags such as

and
will most likely be slightly different, resulting in minor presentation deviations that drive us crazy. So what’s the simplest solution?

Introducing: The CSS Reset

The concept behind a CSS reset is to have a standard set of code that you can declare at the beginning of a stylesheet that intentionally eliminates those minor browser differences. After the reset declaration, you may style the various elements of your stylesheet as you usually do. There are numerous iterations on the subject that we could debate ad infinitum. So, I will simply show you the one that works for me.

/* Zero Out */
 
h1, h2, h3, h4, h5, h6, ul, ol, li, em, strong, pre, code, blockquote, form, img {
	padding: 0;
	margin: 0;
        border: 0;
        outline: 0;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	font-family: inherit;
}
table {
	border-collapse: separate;
	border-spacing: 0;
	font-size: inherit;
}
img a {
	border: 0px;
	background: none;	
}
p {
	margin: 1em 0px;
}

Notes

Keep in mind, this is what works for me. Everyone writes CSS differently so the possibilities are endless here. You have the potential to get very detailed with the CSS reset technique and reset everything. This can erase a lot of default styles that you’ve gotten used to using and expect to just magically be there. I have intentionally eliminated many tags and selectors that I virtually never use. I don’t see a point in including them in my generic reset code. If you find yourself using a particular set of tags more often then I do, by all means add them to your reset code. I tend to style tags such as and very differently from site to site so I do not include them in the reset.

The key here is to experiment. Develop a CSS reset tailored to your coding tendencies and the features the site demands. It will make ironing out the “why does my site look different in…?” issues down the road much easier.

Reusable Jquery Toggle

Jason — Thu, 02 Jul 2009 16:19:26 +0000

Jquery is a great tool. If you’re anything like me, learning JavaScript and getting it to do what you want is one of the most frustrating tasks imaginable. Jquery simplifies it to the point where you don’t have to be a coding God to make it do cool things for you. Here I share with you my reusable toggle script that hides content you wish to be hidden, then shows it by clicking a link, and then hides it again by clicking the link one more time. It is useful for many applications.

The Code

//
   // START ready function
   $(document).ready(function(){
 
	// TOGGLE SCRIPT
	$(".hide").hide();
 
	$("a.toggle").click(function(event){
		$(this).parents(".article").find(".hide").toggle("normal");
 
		// Stop the link click from doing its normal thing
		return false;
	}); // END TOGGLE
 
   }); // END ready function
 //]]>

Using the Script

Copy and paste the script into a new javascript.js file, name of your choice.
Download the latest Jquery minified build.

Link to both of these .js files within the tag of your site like this:

1 2	<script src="jquery-1.3.1.min.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script>

You’re done! Now follow the instructions on how to set up your XHTML to use the code.

Setting up the XHTML Markup

Now all you need to do is set up your markup like this:

<div class="article">
   <a class="toggle" href="#">Toggle This »</a>
   <div class="hide">
      <p>Hidden toggle content goes here</p>
   </div>
</div>

So here’s what you do: encase the whole shebang in a

with the class of “article.” You can change this class name if you want by changing the script.js you’ve created, but article works for me. Next include the toggle link. This link will display the hidden content inside the

that Jquery hid automatically for you upon page load. Click the link again and it is hidden again. Hence, toggle.

Here’s what happens: When the toggle link is clicked, Jquery then looks for the

with the class of “hide” that is within the

with the class of “article” that the toggle link also happens to be within. Therefore, you can reuse this markup as many times as you want without adjusting the script.

Examples

This markup:

<div class="article">
   <a class="toggle" href="#">Toggle 1 »</a>
   <div class="hide">
      <p>Hidden toggle content 1.</p>
   </div>
</div>
 
<div class="article">
   <a class="toggle" href="#">Toggle 2 »</a>
   <div class="hide">
      <p>Hidden toggle content 2.</p>
   </div>
</div>
 
<div class="article">
   <a class="toggle" href="#">Toggle 3 »</a>
   <div class="hide">
      <p>Hidden toggle content 3.</p>
   </div>
</div>

Jendro Design » Code