Record Selection and the Null Value Bug in Crystal Reports
One of the interesting issues I have found when building reports in Crystal is the nature of their record selection on blank data. More »
One of the interesting issues I have found when building reports in Crystal is the nature of their record selection on blank data. More »
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.
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.
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.