Martini Lab Blog » css

Webmail adds image spacing

Chris Williams — Fri, 20 Aug 2010 16:27:07 +0000

Attention you HTML email authors. Your newsletters are jacked. Webmail apps, in an effort to prevent the automatic downloading of images in order to prevent open rates for spammers, use scripts to manipulate the loading of images. Unfortunately, this changes the default property for display for images and causes gaps or spacing to occur.

For example

Weak sauce!

Inline fix

The fix is simple, add an inline style to all of your images.

This change works on gmail, hotmail, yahoo, mobileme, etc.

Awesome sauce!

Let Them Die

Chris Williams — Tue, 22 Jun 2010 18:19:48 +0000

This month’s edition of A List Apart covers how to manage multiple browser vendors and their varying support for html5 and css3 ¹. We’re all aware of the different uses of border-radius in both FireFox and Webkit. And being able to not fork the code in making rounded corners by simply writing standard css3 is tempting. In fact, it’s ideal. Having it managed with javascript is actually very clever, and… cool!

But I would propose something different entirely. Instead of using a js library to help browsers properly render a soundly constructed html5/css5 webpage, short of making sure it doesn’t look like “total ass” on IE, just let the page render as it lay.

By now, web designers are largely aware of the rendering quirks of various browsers. Little things like not adding margins to floating divs for IE’s sake, or not applying –webkit gradients to divs that contain text fields, are a part of mental mine field map that goes into our work.

Using a javascript library to get around this isn’t the answer. Remember that script that lets IE6 properly render PNG transparency? It might have been relevant to a couple of years ago when there were still a vast majority of users that used IE6, but most web designers have abandoned even trying to support the browser, much less trying to make every pixel line up properly or make every image look decent. At some point (if our bosses let us), we move on.

Sadly, we moved onto other scripts that do what html5 is supposed to do already.

Here’s my advice. Write your site to work just fine without any javascript (or css for that matter) needed. If you can still use the site, you’re good to go. Using ajax history to browse back and forth with the browser chrome? Make sure it works without javascript and move on. If you’ve got some killer CSS mojo for your site, just write it. Write that widget that does that thing with the stuff, but to say that we have to cover every contingency is unreasonable.

When did we go from saying “to hell with bad browsers” to using libraries to keep these browsers on “the same page?”

Older browsers won’t go away (I still see Netscape occasionally show up on Google Analytics), but the support we give them can.

I like to look at these barbaric browsers like the Klingons in Star Trek XI. Their survival was in jeopardy and Kirk was having none of it. Eventually, he came around and now we’re stuck with the Klingons and their foreheads forever.

Don’t let this happen to bad browsers. Let them die.

1. Links

Introducing thevariants.com

Chris Williams — Tue, 21 Jul 2009 22:58:17 +0000

The Variants is a new web series sitcom about the crew of a local comic shop. So far, four promos have been produced and released in time for SDCC 2009 and Episode one is scheduled for release. Each episode (or is it webisode) runs about ten minutes.

Putting this together was a lot of fun. With internet video content rising well beyond YouTube, I had many examples of what people expect from a media web site. Plus, I got to work in a little bit of html5 semantics.

Go watch The Variants promos and laugh, laugh and laugh.

Fun with WebKit css gradients

Chris Williams — Fri, 15 May 2009 21:38:52 +0000

As a follow up to yesterday’s woeful tale of using WebKit’s proprietary css properties, I wanted to follow up with a couple examples of how one can use these features without getting all “bevel-ly”

The only benefit of text-shadow is not downloading graphics for what can be expressed in css. The same goes for -webkit-border-image, -webkit-gradient, -moz-border-radius, anything that keeps a web designer from having to launch Photoshop is a boon to bandwidth.

Here are two examples of using some WebKit css gradients.*

Update: You must have the Chrome 2.0 or Safari 4.b for these to work.

Example 1. is brought to you by “Killer Queen”

This similar looking display to that of the iPhone album display uses a radial gradient (opposed to a linear) as the background for the track names. The overall effect is a dim light. The odd numbered tracks also use a gradient to take advantage of -webkit-gradient’s support of alpha values.

Example 2. is a css calendar.

This one combines linear gradients and javascript arrays. Because -webkit-gradient can use rbga formatting in place of the usual hexadecimal value, calculating the values from color to another was much easier.

The drawback to these browser specific properties are, well, browser specific. While adding a gradient value to your div id=wrapper might give it a groovy drop shadow effect on Safari, nothing is happening on either Firefox, and much less for IE.

The workaround at this point is to browser detect.

if(jQuery.browser.safari) {
$('#wrapper').addClass('problem-solved');
}
else {
	$('#wrapper').addClass('wah-wah-wah');
}

Or whatever.

–webkit-background-clip Problems

Chris Williams — Thu, 14 May 2009 18:07:23 +0000

Someday, all the nifty Photoshop Blending options will be available as CSS properties. Mark my words! In the mean time, we’re kind of stuck with drop shadows, and now gradients (and text strokes) for WebKit browsers. Too bad you can’t use them together.

In order to take advantage of the background clipping, the color needs to be transparent. First off, that pretty much ruins any other browser from displaying text. So this is only useful to Safari users (not even the iPhone currently supports it). In Photoshop, you can get around having a transparent color and still having a drop shadow by setting that layers Fill Opacity to 0% while the layers opacity at 100%.

Also, using this technique has some odd behavior with padding. In my example, I couldn’t set padding to the parent div without the effect inheriting that padding. Restating the padding didn’t affect it either.

Here is the example: webkit-background-clip.html

Now, you can add the -webkit-text-stroke and that will work with text-shadow, but only on the stroke and not the text. I’ve yet to find an example that uses all three without looking like one of Superjail’s Doctor’s genetic experiments.

Perhaps it is for the best, getting these to work together might have been the next blink.

A better jQuery slider

Chris Williams — Wed, 25 Mar 2009 22:09:51 +0000

If you haven’t seen Apple’s product slider in action, you must check it out. It’s a horizontal gallery of their products with horizontal slider controlled with javascript. I believe they are using the scriptaculous motion for this, but there should be a way to build this in jQuery.

Truth be told, I was a die-hard fanatic for scriptaculous/prototype, but after ExpressionEngine announce their adoption of jQuery for EE 2.0, it was time to grow beyond the one framework pony.

Luckily, someone already set out to build the slider in jQuery. And major hat’s off to Remy Sharp for a great approach to this. If you looking for a way to build your own slider, start there first.

The Problem

Actually, there was no problem until I had a client to didn’t fit into the strict mold set out for this widget. As with most inventive solutions, they are begat from necessity.

The slider is built on an unordered list, but doesn’t support nested lists. For my needs, the slider had to be able to not only show multiple categories of products, but also visually differentiate.

Now, this can be resolved by manually setting css values. This approach would “hard code” the positions of the categories. That isn’t very code may be puled from a database.

Also, the slider needs to work without javascript. I know. Who doesn’t use javascript? The answer is, I don’t know, but someone always points out if something doesn’t degrade properly.

The Solution

I built this out backwards, but it works. So don’t question it. This demo shows the slider with wireframes to show off the block level div’s and li’s.

You can see by this code example that the lists are simple and even has a space for the category description if your site requires it.

HTML

This is a simple template shoing how to format your product groups and your categories for them. There can be as many needed. This example should be able to display them all successfully.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vitae diam vitae leo hendrerit aliquet. Donec dolor. Integer placerat rhoncus metus. Proin sagittis. Nullam sed lacus accumsan orci convallis interdum. Aenean aliquet, nisi et sollicitudin posuere, orci tortor fermentum.

Product 1
Product 2
Product 3

Product 4
Product 5
Product 6

Product 7
Product 8
Product 9

Product 10
Product 11
Product 12

Category 1
Category 2
Category 3
Category 4

" />

CSS

I threw in a dash of YUI’s css reset. Most of the id and class names are generic. I would recommend renaming these to something more specific to avoid conflict.

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, img {border-width: 0px;margin:0;padding:0;}
#mlSlideWidget {
	font:11px arial,helvetica,clean,sans-serif;
	*font-size:small;
	*font:x-small;
	position: relative;
	height: 361px;
	width: 659px;
	background: url(images/slider-background.jpg) left top no-repeat;
}

#sliderWindow {
	margin: 1px;
	height: 365px;
	position: relative;
	width: 655px;
}

.sliderGallery {
	overflow: auto;
}

.sliderGallery ul.sliderList {
	top: 0px;
	left: 0px;
	margin-top: 135px;
	padding-bottom: 0;
	position: absolute;
	list-style: none;
	height: 210px;
	overflow: auto;
	width: 2000px;
	white-space: nowrap;
}

#mlSlideWidget .sliderGallery ul li.group {
	margin-left: 7px;
	margin-right: 7px;
	display: inline;
	float: left;
}

#mlSlideWidget .sliderGallery ul li.group .groupContent {
	margin-right: 10px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

ul.groupButtons {
	height: 120px;
}

li.group {
	background: url(images/group-backgroundcap.png) no-repeat right top;
}

li.group .groupContent{
	background: url(images/group-background.png) no-repeat left top;
}

li.group p {
	width: 430px;
	height: 70px;
	font-size: 10px;
	line-height: 12px;
	white-space: normal;
}

li.group ul.groupButtons {
	list-style: none;
	white-space: nowrap;
}

li.group ul.groupButtons li.singleButton {
	width: 140px;
	float: left;
	height: 118px;
	text-align: center;
}
#scroll {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 100;
	width: 639px;
	margin-left: 10px;
	margin-right: 8px;
}

#scroll ul {
	height: 123px;
	list-style: none;
}

#scroll li.marker {
	margin-top: 4px;
	padding-top: 60px;
	text-align: center;
	z-index: 90;
	font-size: 10px;
	height: 30px;
	width: 55px;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 10px;
	margin-right: 10px;
	float: left;
}

.handle {
	position: absolute;
	top: 8px;
	left: 0;
	z-index: 110;
	height: 115px;
}

.fakeHandle {
	position: absolute;
	top: 8px;
	left: 0;
	z-index: 80;
	height: 115px;
}

jQuery UI will need to be built with UI Core, Draggable, Slider, Effects Core, and Slide. Some of the values of this rules in the example are built to my specs and can be modified to whatever specs fit your site. Note the versions of jQuery at the time of this article.

This example doesn’t know how many objects exist in the slider. If you use a set amount, this example can be greatly reduced. However, if your categories are managed via a database or cms tool, the number of objects used can change.

Javascript

Try not to laugh at my n00b code. I’m sure there are much better ways to write this.


//basic rules for controling the divs
$(document).ready(function(){

   //fix css rules
   //above css written for pages loaded without javascript
   $('.sliderGallery').css({'overflow-x': 'hidden', 'overflow-y': 'visible'});
   $('li.marker').css({'float': 'none', 'position': 'absolute', 'top': 0, 'left': 0});

	//set up some public variables and arrays
	var scrollBar = 639;
	var sliderListOffsetLeft = $('.sliderList').offset();
	var productWidth = 0;
	var groupWidth = 0;
	var sliderWidth = new Array();
	var sliderLeft = new Array();
	var groupRangeLeft = new Array();
	var marker = new Array();

	//measure the width of all the sub-categories
	//and the sub-sub-categories while we're at it
	$('li.group').each(function (i) {
		sliderLeft[i] = productWidth;
		$('li.singleButton', this).each(function (i) {
			groupWidth = groupWidth + $(this).width()
		});
		//hard coded minimum width for groups
		if (groupWidth < 450)
			groupWidth = 450;
		else
			groupWidth += 20;
		productWidth = productWidth + groupWidth + 16;
		//set width for each sub-caterogy
		sliderWidth[i] = groupWidth + 14;
		$(this).css({width: groupWidth});
		//reset the variable
		groupWidth = 0;
		//used in another function not used in demo
		groupOffsetleft = $(this).offset();
		groupRangeLeft[i] = groupOffsetleft.left - sliderListOffsetLeft.left - ((i > 0) ? 14 : 7 );
	});

	//Fix css to fit with slider content
	$('ul.sliderList').css({width: productWidth + 14});

	//Variables to make math easier
	var handle = (scrollBar / productWidth) * scrollBar;
	var markerLeft = 0;
	var scrollBarVisible = scrollBar - handle;

	$('li.marker').each(function (i) {
		markerLeft = (sliderLeft[i] / productWidth * scrollBar);
		markerWidth = (sliderWidth[i] / productWidth * scrollBar);
		$(this).css({left: markerLeft});
		marker[i] = (markerLeft / scrollBarVisible) * 100;
	});

	$('div.handle').css({width: handle});
	$('div.fakeHandle').css({width: handle});

	if (productWidth > scrollBar)
	{
		$('div.slideWidget').each(function () {
			var ul = $('ul.sliderList', this);
			var fake = $('.fakeHandle', this);

			var slider = $('.slider', this).slider({
				handle: '.handle',
				minValue: 0,
				maxValue: productWidth,
				slide: function (ev, ui) {
					ul.css('left', '-' + Math.round(ui.value / 100 * (productWidth - 657)) + 'px');
					fake.css('left', Math.round(ui.value / 100 * (scrollBar - handle)) + 'px');
				},
				stop: function (ev, ui) {
					move = ui.value / 100 * (productWidth - 657);
					ul.animate({ 'left' : '-' + Math.round(move) + 'px' }, 500);
					fake.animate({'left' : Math.round(ui.value / 100 * (scrollBar - handle)) + 'px'}, 500);
				}
			});
		})
	}

	else {
		$('.fakeHandle').css({width: 0});
		$('.handle').css({width: 0});
		$('.fakeHandle').css('visibility', 'hidden');
		$('.handle').css('visibility', 'hidden');
	}

});

Notice the versions of jQuery and UI. 1.7.1 has issues with this solution. As of yet, I haven’t found a fix.

My Peeps on Twitter

Chris Williams — Mon, 16 Mar 2009 18:52:31 +0000

Somehow I’ve ended up following too many people on Twitter. Not that I don’t want to read each and every person’s tweet, but sometimes, I really don’t care and just want to follow a select few. LiveJournal has a filter feature for both posting and reading specific sets of your LJ buddies. Maybe twitter will set up some kind of filter.

Until then, here’s some css code file you can add to your Safari preferences.

/* turn off all tweets */
li.status {
	display: none;
}

/* now turn on for your peeps */
li.u-zeuscomics, li.u-kingbaz, li.u-pvponline, li.u-seanjackson, li.u-AronHead, li.u-UltraboyNYC {
	display: block;
}

NOTE: css is case-sensitive.

It doesn’t fix the timeline of the site, so if your “peeps” haven’t updated in a while, you’ll get a blank page. Ah, the silence!