Web


Latest Postings

November 7 2008

Coding CSS – Essential Firefox Add-Ons

If you spend any time coding CSS from scratch or debugging existing stylesheets, you know how tricky it can be to find that pesky error! Whether it is getting IE6 to play nice or just understanding where all that white space is coming from, these Firefox add-ons should help you do the job better and faster. I’ve only chosen a couple of my favorite add-ons and my favorite features of each. Feel free to include your favorite features or add-ons in the comments as this list is anything but exhaustive.

The Web Developer Toolbar by Chris Pederick has many useful features like an easy-access javascript disabler, a simple window resize to test 800×600 screen resolution, and an option to view all of the stylesheets associated with a page (easily searchable!).

One of my favorite features, however, is surprisingly simple and incredibly useful.  Using the Outline menu, you can outline any block level element on the page with just two clicks of the mouse.  Personally, I can end up spending minutes of wasted time adding borders to elements here and there trying to figure out why I am seeing too much or too little space in a certain area.  No need to do that anymore with this feature. It outlines your div tags for you, making spatial debugging a much simpler and faster process.

My other favorite feature in the web developer toolbar is the quick access to the W3C XHTML validator.  It will upload your local file and display your pass/fail status quickly and efficiently!

Next on my list is the Firebug add-on which again, has a wealth of useful and time-saving debugging tools.  My favorite, by far, is what I’ve coined as their CSS specificity revealer.  Ok, you got me, I just made that up.  The feature I’m referring to goes something like this:

1. You add some CSS rule

2. Your CSS rule doesn’t work

3. You can’t figure out why it doesn’t work

4. You wish to yourself there was some tool out there that could tell you if someone wrote a rule that is somehow overriding your own

5. You realize that firebug has that very feature and you’re going to use it now!

Launch firebug after you’ve installed it and click the “Inspect” button at the top of the console.  Now, watch the Style panel on the right hand side.  As you mouse over different elements on the page, you will see which rules apply to which elements.  You will also see which rules are being overridden by others as evidenced by the line through.

For instance, in the above example, the #description rule is overriding our normal <p> tag line height of 1.4em because #description is an ID (which will always have a higher specificity than a non-ID rule).

Personally, I think this feature of firebug makes it one of the best CSS debugging tools out there.

And remember, feel free to leave me some tips and tricks in the comments section if you have any!

October 31 2008

IE6 Float Drop in the California State Web Template

A question that recently came up in one of my CSS classes was about the California state web template that was created to standardize state websites.  The template can be downloaded at webtools.ca.gov and you can see live working copies of the customized versions of the template in many places, including:

The template is distributed with three optional column based layouts.  The webpage author can select a style sheet appropriate to the layout they are interested in: one, two, or three columns.  One of the problems with the three column layout in the state template is something known as float drop and you will only see it in Internet Explorer (IE) 6.

Float drop is a phenomenon that occurs when you have a floated element on a page and the width of the page become too small to accomodate the floated element and its neighbors.  Instead of displaying as they should, one of the elements will drop down below the other content.

For example, see this Department of Transportation webpage at full screen width:

Caltrans 3 column page at normal width
Figure 1

However, this is what it looks like on a lower resolution monitor.

Caltrans 3 column page at low width, float drop is evident
Figure 2

See how the middle column drops down below the right?  To prevent this from happening, they have added the following rule to the master css file attached to the state template:

 


#heading, #navigation, #main_content_1, #footer {
min-width:774px;
}

 

This means that those four div tags, which hold the main content of the page as well as portions of the header and footer, will never fall below 774 pixels in width.  This preserves the layout when the user’s screen width is too small, rather than having the elements  stack on top of each other.  The problem with this method is that IE6 does not honor the min-width property.  Thus, what looks lovely in Firefox and IE7 looks like Figure 2 in IE6.

When my student came to me with this question, I went in search of an answer.  The solution I came up with is the following code sample, which can sit anywhere within the head tag of your document:

 

<!––[if IE 6]>

#main_content_1, #heading, #nav, #footer { width:
expression(Math.max(document.documentElement.clientWidth, 774)+'px');
}

<![endif]––>

 

Internet explorer allows you to embed JavaScript within CSS by using an expression, so we can set the width property equal to the result of an expression.  That expression checks to see which value is larger, 774 pixels or the width of the page?  Whichever is the larger of the two will be the new value for width.  This entire rule is embedded within an IE6 conditional comment (<!––[if IE 6]> … <![endif]––>), so that only IE6 will obey these instructions.  Since the expression function is proprietary, the conditional comment also serves the purpose of leaving our current CSS in a standards compliant state.  Simply embed this code snippet into the head of your three column pages and voila, no more float drop!

October 3 2008

Debugging CSS in IE6, hasLayout and Zoom

As I’ve learned to build website layouts purely in CSS, I have come across many hacks or workarounds for debugging browser inconsistencies. One that I never quite understood was the declaration

zoom: 1;

I knew that if I applied zoom: 1 to certain elements, a layout that once looked like the elephant man in Internet Explorer 6 would miraculously turn into prince charming. But what is zoom: 1? And why does it fix my broken layouts? This post is meant to shed some light on these issues without getting into the nitty gritty details.

To understand zoom: 1, we must understand the proprietary property hasLayout, courtesy of Internet Explorer (IE). The hasLayout property is an internal flag in IE that tells the browser whether or not a particular element is a “layout” element. IE makes a distinction between a layout element and a non-layout element in more ways than I can enumerate here. Suffice it to say that layout elements and non-layout elements are treated differently when IE renders the page. I have found that layout elements will interact differently with their floated and positioned neighbors. This usually manifests in strange vertical and horizontal spacing between the elements.

The hasLayout property cannot be altered by the style sheet author. It is internal. It is flagged as true by default for certain elements (like <table>, <body>, and <img>). It can also be triggered by the style sheet author by changing certain properties (like width, height, float, and zoom).

The zoom property is one of Internet Explorer’s proprietary CSS properties that allows the style sheet author to enlarge something.

zoom: 2;

The above zoom declaration does as you would expect, it makes something twice as big. So since the zoom property will trigger hasLayout, we can use it to force IE into giving certain elements “layout” which can help us with spacing issues between elements. In order to add zoom but avoid any detrimental effects, we just use

zoom: 1;

This keeps the element at the same size while still triggering hasLayout behind the scenes.

To use zoom: 1 to my advantage, my general rule of thumb has been to code my layouts by testing primarily in Firefox (or another standards compliant browser like Safari or Chrome). During the process of coding it, I will periodically test it in IE7 to make sure there are no major hiccups. Usually, I can get the layout working in both browsers without too many hacks. Once the layout is finalized in Firefox and IE7, I test in IE6. If the layout is way off in IE6, I immediately apply the declaration:

* { zoom: 1; }

which gives “layout” to all elements. This will often fix the major issues in IE6, and the rest is just pixel tweaking with conditional comments.

For a complete reference of hasLayout (much more complete than I have attempted here), read this article on having layout.

September 25 2008

Altruistic Linking

Have you ever linked to another web page using the phrase “click here“?

If you are a webmaster, a web author, or a web content editor and you answered yes to that question, keep reading because this blog post is for you.

Why is “click here” the enemy? Let me start with a little anecdote about a phenomenon known as Google bombing.

One of the methods that Google uses to determine what your page is all about is to look at the link text (or anchor text) that others have used to link to your website. So, if there are a million links that say Amazon and link to Amazon.com, there is a good chance that a Google search on the word Amazon will return a first hit to Amazon.com. Seems logical, right?

Google also has a button called “I’m feeling lucky” that is often overlooked. Try it out. Go to Google and search on “Innovative Solutions Inc.” Instead of clicking the “Google Search” button, click the button to the right that says “I’m feeling lucky.” This will take you straight to our home page. Why? Because the “I’m feeling lucky” button takes you to the first search result that you would have seen if you had done a regular Google search.

How does this relate to Google bombing? Once upon a time, somebody decided to use their knowledge of Google’s indexing system to further their own political objectives. In particular, I remember being introduced to the George Bush Google bomb when I was in college. What happens is, a particular blogger, website, or internet community puts out a request to their readers to create a link to George Bush’s bio on the white house website with the link text of “miserable failure.” Eventually, as the scheme gains momentum, there are so many “miserable failure” links to the president’s bio that the Google bots integrate those links into their knowledge base. Eventually, you could type “miserable failure” into Google, click “I’m feeling lucky,” and there was George Bush’s smiling face on your computer screen. Pretty knifing, yes?

The point of this anecdote is to teach you that link text matters. If Google uses your link text to determine what a website is about, why not provide more useful information than a generic “click here”?

This is a helpful link to our website:
Our favorite technical training center in Sacramento, CA – Innovative Solutions Inc.

This is not as helpful:
Click here to go to our favorite technical training center in Sacramento, CA – Innovative Solutions Inc.

That is why I call it altruistic linking. You are doing your neighbor a favor, you are going to help their search ranking by linking to them with appropriate keywords. And hopefully, in turn, they will do the same for you.

September 10 2008

New Web Design Courses

Learning web design can be easy with a WYSIWYG (what you see is what you get) editor, like Dreamweaver or Microsoft’s Expression Web. You create a new document and edit it like a PowerPoint slide or a new file in Microsoft Word. You add text, tables, and pictures. Voila, you have a web page.

More »