Page Loading Speed-Up

I found out today that if you have JavaScript and CSS externally linked in your HTML head, the CSS should come first. This will allow browsers to fetch both external files at the same time. I use JavaScript to do some last minute page styling, depending on some parameters and also found that this helped the page flicker.

On a related note, the Page Speed add-on to Firefox is a handy little tool for determining areas for improvement for a website (that's where I learned of this CSS before JS tip).

Inline Block, A Quick Work-Around

I've had previous struggles with inline-block quirks, and have been recently using a handy css solution I thought I'd share. Whenever I want a certain div, for example, to be displayed as inline-block, I simply add the class "inlineBlock" to it. Well, you ask, how do I define this class? I am glad you asked. I define it like so:

<style type="text/css">
.inlineBlock {
 display:-moz-inline-stack;
 display:inline-block;
 zoom:1;
 *display:inline;
}
.myClass1 {
 /* other stuff */
}
<style>

<div class="myClass1 inlineBlock">
 A fancy inline-block div.
</div>

This CSS causes my div to be displayed correctly as an inline-block in every browser I've checked. Not sure how the magic works specifically, but it does the job! If you have improvements or observations, add a comment below.

CSS: inline-block

So much time spent on one CSS statement - "display: inline-block;"

This statement is perfect for a new site I am working on. I want three columns of data to display side-by-side. But, I had many frustrations trying to get it to work cross-browser. This is what I found...

Inline-block works great on IE 8, Chrome and recent versions of Safari.

I had issues when it came to IE6 and IE7, no big surprise there. I fixed this with some conditional comments and the CSS property "display: inline" which acts the same as inline-block in IE.

I also had problems with Firefox 3! My old love of a browser takes issue with this statement (when used with other specific statements). Apparently "display: inline-block" does not play nice with "overflow: hidden" and "text-align: center". This strange alignment of the planets causes my text to align left, instead. Quirky. I ended up commenting out the overflow property, and everything worked for Firefox 3. (I also added a strange Firefox style statement to make sure it worked on FF 2: "display: -moz-inline-stack;".)

CSS: background-position

Today I discovered a new trick I can use for background images in CSS. It is based on the background-position property. This allows the designer to offset a background image used in an object (like a span or div).

I was looking at the images that Google uses in Gmail and noticed that some of their icons come all together in one larger PNG file. They form an array of icons. After some searching the web I landed on this article that explained how to select a single image from an image array: http://www.guistuff.com/css/css_imagetech1.html

Pretty neat. It reduces page load-time (because you load one image instead of multiple ones, and each file comes with overhead transaction data) and removes the need to pre-cache images for DHTML. A little bit of JavaScript and CSS and you're all set. It is going to be a handy thing to have in my design toolbox.