MailChimp‘s “code your own” custom email template doesn’t, by default, make any provisions for mobile-specific styles. As a result the email text is usually too small to read on a mobile device without the user manually zooming in. Conveniently, MailChimp’s css processor does support the max-width conditional. Put this at the end of your declared […]
Assigning multiple background images to a single element is as complicated as creating a comma-separated list. That is to say, not very. To wit: <style> h2 { background: url(star.png), url(star.png); background-position: left center, right center; background-repeat: no-repeat; } </style> All H2 elements that follow will have “star.png” to either side of the text. Like so: […]
When displaying large groups of data, especially wide sets in which the user’s eye has to travel from one side of the screen to the other, it’s always a good idea to having a slight variation between alternating rows, for ease of reading. Like so: odd even odd even odd even odd <rant>Astute observers will […]
Both WebKit and Mozilla browsers have introduced default styles for certain specific element types, in an effort to impose some degree of design consistency across the platform. You might be tempted to assume a well-placed !important will override those default styles but not necessarily so. Depending on the type (like “search” for example) only certain […]
It’s not often that I miss tables but when I have to center something vertically I definitely find myself getting wistful for good ole VALIGN. There are lots of different ways of handling vertical centering, depending on what’s being centered. The method for centering a single line of text is, by far, the simplest. The […]
Nope — Class identifiers can start with a number but IDs cannot. If, for whatever reason, you absolutely need to use a number to start the name of an ID, you can reference it in your stylesheet like you would a role or rel: <style> /* style reference for an element with ID of “1st”: […]
The rule: One should not assign width and padding to the same element. Why not? Because display width of an element is equal to the assigned width plus any padding. A DIV that’s 100% wide with 10px padding is actually 100% + 20px wide. Put this element on your page and you’ll wind up with […]
Image paths are relative to the CSS file that contains them. If, for example, you had your images and css files each in their own subdirectories within the theme (i.e. “img/” and “css/”, respectively), here’s the path one would use: .navigation { background-image: url(../img/navigation.png); }
When assigning a click action in jQuery it’s important to communicate that potential to your user. The CSS property cursor makes this a snap. Here’s our boring old html element: <div class=”hey”> I’m not boring! </div> We add a little CSS: <style> .hey { cursor: pointer } </style> And suddenly it looks suspiciously like a […]