Topic: CSS
Is it time to ditch IE 6?
A few weeks ago, 37signals brought up a great question -- one that was echoed by a friend of mine just a couple of days ago: When can we finally ditch IE 6?
A few notable companies are taking the first steps. Facebook has been warning users about the perils of using IE for a while. And now it looks like Apple's newest web apps won't be supporting IE 6 at all. Frankly, I'm not surprised. I think they are taking a necessary step forward by forcing users to use a modern web browser. After all, it is 2008, not 1996.
Organizing Your Stylesheet Using CSS Edit
One of the most daunting things about building and maintaining a design can be wading through huge, disorganized style sheets. Nothing is worse than opening up a style sheet someone else has worked on and thinking, "What the heck happened here?" On occasion I've opened up some of my old style sheets and shed a single tear. Styles were strewn throughout the page like I blindly copied and pasted code as if it was still 1999. Needless to say, I've learned the hard way why keeping styles organized is beneficial.
Through the years, I've waffled between various methods of organizing, but never found one that I could really subscribe to. Then I came across CSS Edit; a powerful CSS editor built exclusively for the mac. I immediately fell in love with its clean, simple, and functional interface. One of the best and most powerful features, in my opinion, is its ability to group styles into a folder structure.
Continue reading "Organizing Your Stylesheet Using CSS Edit"
Hotmail Image Problems in HTML Emails
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!
UPDATE: This problem only seems to happens in Hotmail when using Firefox (although I feel like I saw it in IE before...). Another good tip, from a reader named Jurre-Jan Smit, was that you can just put the code in the <style> element in the <head> (for Live Hotmail) and <body> (for old school Hotmail) so that you don't need to put it inside every image. I just tend to use inline styles in emails because they're more specific. I've found Campaign Monitor's guide on CSS support in emails very useful for answering compatibility questions. Keep the useful tips coming!
Styling the Button Element in IE
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.
UPDATE: July 16, 2008 - Please note that this fix DOES NOT work for buttons contained inside table elements.
Linewrapping With PRE
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.
Team Viget: Under the Hood
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.
Recent Comments
@Elliott: The beauty of mood boards is that they can run separate but concurrent with wireframes. If you think of wireframing as the ‘science’ of design in that it is structural and behavioral…
- Tom Osborne on 'Getting Moody: A Look at Inspiration and Style in Early Design Techniques'.
- Mindy on 'Switching Mindsets: From WordPress to ExpressionEngine'.
- Joomla Developer on 'Switching Mindsets: From WordPress to ExpressionEngine'.
Subscribe to Comments RSS