Monthly Archives: November 2006

The Style Declarations I Make Almost Everytime I start a new site

When creating a site, no matter what the end design ends up being, there are certain standard css declarations that I end up making every time. These are what I would want browser defaults to be out of the gate.

body {padding:0;}
Removes the gap around the edges of the window body.
body {background:#fff;} (or whatever color is appropriate)
I used to take it for granted that white was the default background color for everyone’s browser. Not so. Now I declare the color right off.
form {padding:0;margin:0;}
I remember how I frustrated I was the first time I realized that forms extra space by default. I was trying to line up a search box to be just right – I spent days playing with the various styles associated with the input tag until I realized it was the form, not the input. Never again.
ul {margin:0;padding:0;}
Even for uls that aren’t used as menus, I’d much prefer to start from 0 padding and 0 margin than the browser defaults.
a img {border:0;}
If my image needs a border around it to indicate that it’s clickable, I’ll do it myself.

Your mileage may vary. I could probably add color of links to this list, as the default colors, specifically the visited link color, I find bland.

Inline images showing a gap of space on the bottom, and one way to get around it

For a current project, I’m needing to post an image of a calendar inline with some select boxes. The calendar image would serve to popup a table of calendar dates. It is to look like this:

Here was the html to be used:

<p>
	<select name="checkInDay">
		<option value="">Day</option>
	</select>
	<select name="checkInMonth">
		<option value="">Month</option>
	</select>
	<a class="ico-cal" href="#">
		<img src="images/ico_calendar.gif" alt="Select" />
	</a>
</p>

The problem was that a small gap of space was appearing under the calendar icon, so that it looked like this:

Firefox example
Safari Example
IE example

In doing some research, I came across this page, which had a very good description of the problem. It turns out that the gap under the image is present for a reason – for the descenders of text that reside on the same line as my image

For instance, my image was treated the same way as a lowercase ‘o’. If that ‘o’ were sitting next to a lowercase ‘p’, we’d see that room was made for the stem of that ‘p’.

According to that page, there were two ways of getting around the problem. One was to set the image to be a block element using ‘display:block;’. That didn’t work so well for me, as it would have required a handful of other css declarations to keep the img inline with the rest of the sentence and at proper spacing from the other selects.

Instead, I went with the second suggestion, which was to use the vertical-align property in the css file. Since I develop in Firefox first, I found that vertical-align:sub; worked, like so:

a.ico-cal img {vertical-align:sub;}
Firefox example
Safari example

… but this did not work IE 6 or 7, which displayed vertical-align:sub; like so:

IE Example

Yikes. So it turns out IE doesn’t treat vertical-align:sub the same way Firefox and Safari do, but I did find that IE will display it correctly using the following:

a.ico-cal img {vertical-align:bottom;}

So I used my IE conditional comments to serve vertical-align:bottom; only to IE, and now all browsers show the image inline in the ideal manner.


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


dlee said:
I have tried img {vertical-align:sub;} but there is still little space left at the bottom of an image.
One method that I found to remove space below image element is using negative margin. Adding img {margin-bottom: -3px;} seems to take care of the problem. It was tested on FF 2.0, IE 6, and IE 7.

ark said:
I had a row of images in their own that was having the ‘gap under the image’ issue.
My solution was simply to set the css ‘line-height’ property to ‘0’ for this . This effectively gets rid of the space for the descenders in ‘p’ and ‘q’ etc.
CSS:
#mydiv { line-height: 0; }

Aad said:
img { display : block }

Exploring Dropcaps with CSS

Jason Santa Maria’s October 2006 theme has had some impressive dropcaps, and got me thinking about the various ways of making them. I explored some of those options.


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post. Some links or attributions may not be working correctly.


Jason Santa Maria said:
Nice write-up! I’ve since switched back from the October Edition, but you can still see it here and any entry from October 2006.
I decided to start using dropcaps in my normal design as well, but since I’m not using the decorative caps anymore (which have the luxury of all being the same dimensions), I had to create a separate class for each one. No real big deal, it’s a marginal bit of work, and only needs to be once, but it certainly is a little more involved.
Cheers!

Props to the CSS Zen Ocean Diver Effect

Kai Laborenz’s CSS Zen Ocean contains one of the most intriguing effects in all of the CSS Zen Garden. I was fortunate enough to view this entry in Firefox, as it doesn’t show in up IE6 at all, and IE7 and Safari butchers it to the point where the magic is ruined – the secret to the trick revealed due to the browsers’s minor differences from Firefox in displaying png files.

To see what I’m talking about, view the entry using Firefox, and watch the diver on the right as you scroll down the page. A light gradually appears as he reaches the depths of the ocean.

Had the background of the page be a solid color rather than a gradient, perhaps the effect wouldn’t be lost on non-firefox browsers that supported png. However, I can’t figure out how Kai got it to look right even in Firefox – as my attempts to create a png that matches a browser’s background color was hard enough (perhaps background images instead of colors should be used?).

Let’s see how the effect works. There are three images being used – the diver, the light, and the gradient strip of the ocean. Kai used png’s for all three images (but I think only the background needed to be a png.)

Each image is placed in a div, and those divs are overlapped, using the z-index property to control how they are layered. Here is the order of the layers of the images on the screen.

Note: Where you see green below is actually transparent. I added the green because the diver and light (particularly the light) doesn’t show up very well when surrouned by ‘nothing’.

Kai’s CSS is commented very well to communicate how the divs that contain these images are arranged. I’ve modified the order, changed the names of the images, and added additional comments to help share what’s going on:

/* this one is the diver without his light */ 
#divDiver {
	position: fixed; 
	/* note that position:fixed; keeps the
	image from scrolling offscreen.
	The image of the light is the same dimensions as the diver, 
	and you'll notice all the styles for that div are identical
	to this one, with the exception of the z-index, which places
	the 'light.png' image behind the 'diver.png' image*/ 
	top: 230px;
	right: 8%;
	width: 100px;
	height: 175px;
	background: url(diver.png) no-repeat top;
	z-index:10; 
}
/* dont dive without a good light */
/* (dont forget to charge the batteries as well) */ 
#divLight {
	position: fixed;
	top: 230px;
	right: 8%;
	width: 100px;
	height: 175px;
	background: url(light.png) no-repeat top;
	z-index:8;
}
/* a png gradient is placed between the diver and his light */
/* works in gecko an opera 7 */ 
#divGradient {
	position: absolute;
	top: 210px;
	right: 8%;
	width: 100px;
	height:1000px;
	background: url(gradient.png) repeat-x top;
	z-index:9;
	}

Here are the images Kai used (all pngs):

I’d love to see other effects people have come up with using this technique. This entry in the zen garden is amazingly elegant and well-done – I think it’d be hard to match.


This post was ported from an old host/cms, so many comments were lost. Below are the comments that I found were most helpful regarding this post. Some links or attributions may not be working correctly.


Kai Laborenz said:
Thanks for the kind words and the deconstructing work.
There is one thing to add:
I chose to use png for all graphics for two reasons:
1) light, diver and gradient needed 8bit transparency – thats not possible with gif.
2) I could have used jpeg for the background but I turned out to be impossible to match the colors of a png and a jpeg across platforms (which is due to a bug in safari) – maybe today it is possible.
I hope I will find some time to make a sequel – css zen ocean: the deeper dive :-)