Keith Muth, ON THE TOPIC OF CSS and Tips and Tricks

Working with HTML emails can be tough with all the various email clients out there. Just ask Jim Basio, who wrote a great post on our blog with some really useful resources. Recently I was working on an HTML email that had a lot of images, and for some reason Hotmail displayed the images with weird spacing. Let's pretend the picture below is actually three separate images in an email viewed in Hotmail:

As you can see, there is a gap between the images. We can fix this with one simple addition to the image style with CSS:

<img src="image.jpg" alt="Viget Logo" style="display: block;" />

And that's it. Just put "display: block" on any image in your HTML. I put it inline because there are still issues with email clients reading the <style> element (for example, Hotmail). Your images should now be in the right place:

The good news is that it doesn't affect the way images are displayed in other email clients. If you have other useful tips for HTML emails let us know!

Leave a comment ( 6 )

Rob Soule, ON THE TOPIC OF CSS and Tips and Tricks

If you’ve ever attempted to style a button inside IE, you know that it can be a huge pain. On most of our projects, we’ve now started using the button element in place of traditional input buttons due to the ease of styling and consistency across browsers. One of the first things you might notice when you bring your nicely styled buttons up in IE is that, for reasons unknown to me, IE decides to stack the padding depending on the width of the content inside the element.

After spending some time adding a lot of extraneous CSS to the IE specific style sheets, I realized that two simple lines of code fixes the problem.

button {
  width: auto;
  overflow: visible;
}

Those two lines of code will save you countless hours. Go give your button elements some extra love.

Leave a comment ( 20 )

Doug Avery, ON THE TOPIC OF CSS

While working to make these blogs as flexible as we could for fancy stuff like images, blockquotes, and etc, we ran up across an issue (especially on Viget Extend): long lines of code don't play so nice with our relatively narrow columns. Turns out the pre tag (of course) preserves all spacing and linebreaks, and by nature has difficulty wrapping nicely.

All is well, however, since I stumbled across this little hack:

pre {
   white-space: pre-wrap; /* css-3 */
   white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
   white-space: -pre-wrap; /* Opera 4-6 */
   white-space: -o-pre-wrap; /* Opera 7 */
   word-wrap: break-word; /* Internet Explorer 5.5+ */
}

It's a little clunky (maybe more than a little), but it gets the code inside pre tags breaking nicely.

Leave a comment ( 2 )

Rob Soule, ON THE TOPIC OF CSS and Tips and Tricks

We’ve received great traffic and encouraging feedback since launching our Team Viget site just over three months ago. We’ve also been asked quite a few questions regarding the functionality used, so here’s some explanation on how Team Viget works.

The core is a JavaScript (JS) library called jQuery. It’s powerful and simple—even for the programatically challenged designer. Its ability to select HTML elements using CSS selectors and/or XPath is one of its greatest strengths.  You should check it out.

The site acts as a dynamic-side scrolling box - except on a larger, site-wide scale. To begin, I created a container that spanned the entire width and height of the browser window (Fig. 1, blue box). If the user has JS enabled I assign a class to it, which sets the overflow property to “hidden” so it will behave like a mask.

The next child container of that mask holds all the content and is given an extra long width to accommodate users with JS disabled (Fig. 1, green box). Sub pages, which are really just classed elements, are then wrapped within another container then stacked and positioned (Fig. 1, pink box).

From that point, we move into animation. All of the movement is handled by the jQuery animate() function. It enables you to create amazingly smooth custom animations using anything from position and opacity to font size and borders. For Team Viget, we use it to animate the position. When a user clicks on one of our navigation elements, the entire content wrapper slides from right to left (Fig. 2, green box). It’s then repeated—moving the opposite direction—to return the user back to the home page.

So there’s a taste for you. Check out our stylesheet and JS file for more insight.

Oh, I almost forgot! We created the beautiful easing effects with George Smith’s jQuery easing plugin.

Leave a comment ( 3 )