Browser Specific Styles

ie6, the bane of our existence

There's an infinite amount of posts all over about how to 'tame the beast', as it were... Despite this, here's a few ways I've dealt with browser specific quirks and general unpleasantness, to make my designs cross browser friendly and client friendly (this usually means taming the unwilling ie6)

  1. Separate Stylesheets

    Creating a separate stylesheet for specific versions of IE is really easy, and a good idea if there are going to be lots of separate styles or tweaks on a per browser basis.

    How to Use

    In the <head> of your document, below where your stylesheets are being called, include:

    <!--[if lt IE 7]>
   <script type="text/css" src="/path/to/style.css"></script>
<![endif]-->

    Replace the script tag with anything you want IE older than IE7 to execute, this can include but not be limited to JS or inline CSS.

  2. CSS Selectors

Adding Body Classes by Node Type in Drupal

<?php 
	if($node->type == 'story') {
		$nodetype_class = 'story';
	}
	elseif($node->type == 'blog') {
		$nodetype_class = 'blog';
	}
	elseif($node->type == 'page') {
		$nodetype_class = 'page';
	}
?>
  <body class="<?php print $nodetype_class; ?>">

This looks at the nodetype of the page and if it's a story node adding the class "story" or else if it's the node type blog it will print out the class "blog", etc.

I've used this on the top of page.tpl.php to create a class depending on the nodetype of the page. Helpful to create css changes to the layout.

Remembering How to Write Tables for HTML Emails

Tabled Layouts.. what are those? Oh Right! That ancient practice that is now shunned. But, I mean tables have their purpose to display data, so we all are still styling them right?

After recently being thrown into the old, unsophisticated world of HTML Emails for my work, I've learned a thing or two, and had to remember how in the world I used to do the things I did with tables to create layouts. *sigh* HTML Emails are very picky, complex css confuses email programs, and linked css is sketchy. Why, hello html style tags and inline css, where have you been all these years? Oh yes, those skills that you perfected years and years ago and then discarded carelessly into a closet when something newer and shinier came out still has a use!

As I have said, tables still have their purpose outside of layouts, but I've found I've done very little designing with tables, other than making sure they look pretty if used somewhere on a page. I haven't hand coded a table other than for basic info in a while.

If you're like me, and need a refresher in tables, here we go...

Min-height fix for ie6

This fix allows ie6 to show min-height on content without /actually/ supporting 'min-height'

selector {
 min-height: 300px;
 height: auto !important;
 height: 300px;
}

(This works for max-height as well!)

Cool Online Type Tool

A little while ago, I came across this very handy cool web tool for quickly comparing screen fonts.

http://typetester.maratz.com

It allows you to compare up to three different font configurations side-by-side. You can chose the size, leading, wordspace, color decoration and even specify typefaces that aren't on the preset list!

I like using this for a quick reference for quickly seeing how a webfont looks bold, in italics, uppercase, small caps etc.

For anyone unfamilar with CSS: it also has the ability for you to view and copy the CSS you've just created in the interface.

From PSD to Drupal Theme Tutorial - Part III

Part III of III

The last two parts of the tutorial, we went over how to take a finished design using the Photoshop slice tool to html and css.

This part we will take that completed HTML page and make it into a functioning Drupal theme.

What you will need:

  1. Download the latest version of Drupal found here
  2. Read through the requirements for Drupal here
  3. For notes regarding installation of Drupal, please read this article
  4. You will also need a text-editor and web browsers for testing. (I would also suggest downloading the firefox add ons Web Developer Kit and Firebug


From PSD to Drupal Theme Tutorial Part II

SECTION II of III: HTML view part I here..

We left off with finishing the Photoshop slices. These images should be in an images folder inside a folder which will hold your website/theme files.

For this part of the tutorial you wil need a text editor. I will be using the free program TextWrangler If you are using a MAC I would recommend trying out the demo of CODA. But any text editor will suffice.