Gaps And Spaces Around Images Of Web Design

The other day I was having trouble eliminating gaps between an image and the top of an unordered list. I was trying to make a box with rounded corners to look like a giftcard. No matter what I tried, there was a 2 pixel space between the top and bottom graphics and the list.

The client wanted the images to print, so I couldn’t use them as background images, which I typically use for non-content images. (Does anyone know if you can override a browser’s default settings to make a background image print?)

At first I tried placing my images and the unordered list into a div. I thought if I set the list’s margins to zero and made the div the same width as the images, then the images should sit on top and bottom of the list. The code looked like this:

<style type=”text/css”>
div {width: 280px;}
ul {margin: 0; padding: 0; border-left: 1px solid #000; border-right: 1px solid #000;}
li {margin: 0; padding: 10px; list-style: none;}
</style>
<div>
<img src=”top.jpg” alt=”” />
<ul>
<li>Example</li>
</ul>
<img src=”bottom.jpg” alt=”” />
</div>

I tried deleting the line returns between my code to see if they were causing spaces, but that didn’t help. I tried setting the margins of the image to be 0. I thought maybe my images were inheriting some margins from somewhere else in the stylesheet, so I tried using just the HTML and CSS for my giftcard on their own document, but that didn’t help either. I tried putting the images in the unordered list itself, but that didn’t help. I tried setting the height of the <li> for the top and bottom image to be the same height as the image itself, which worked for the top image, but not the bottom one. I even resorted to tables placing the graphics in their own cells with their height set at the same as the images’, which I was quite surprised didn’t work. I triple checked my images in Photoshop to see if I had cropped the image properly, and it was. Finally, my coworker suggested making the div’s position relative and then position the images absolutely, and holy sweet relief that worked!

I still don’t know why the spaces were in there in the first place and it was happening consistently across browsers and platforms. If anyone has any answers, I would love to know them. But in the mean time, if you are frustrated with gaps above and below your images, positioning worked for me.

Digital Life Management

In this modern world much of our life happens in the electronic realm. I’ve compiled of few of the methods I use for managing my digital life.

Passwords
I have literally hundreds of usernames and passwords I need to remember, so I developed a 4 tiered system to manage them all. I have username and password combos for:

Systems that I control, which would be my own computer or server. I tell it to no one.
Sensitive accounts like my bank or AdWords. I would tell very trusted people on a need to know basis.
Things I care about but don’t see as a security issue, such as my 9rules login info. I’m not going to publish my login, but I don’t sweat who I tell.
Things I’m forced to sign up for, such as the NYTimes.com or a software download. I don’t care who knows that info.
I also keep a black binder that I handwrite my login info because some places won’t accept my username and passwords of choice, such as I can’t change my 9rules Notes password to one I’d remember.

Spam
There are many types of spam; email, comments, websites, etc. I mostly care about the email spam and the comment spam I get on my blog.

For email, I have a multiple email account system.

My personal email. I only give it to friends and family that are web savvy. I have to trust that they won’t use it to send me eInvites or other services that ask for my email. I also have to trust that they won’t send me forwards, especially if they will include my email in a header with a grip of others. If one of those other people in the header of an email gets a specific virus, it could find my addy in their inbox.
My professional email. I give this to all business contacts and the friends and family that aren’t savvy. Then I rely on stuff like spam filters and PostGrey.
My sign-up email. If I need to provide an email address to get a piece of software or to sign-up for something I only need to access once or so, then I use this throw away email. In fact, I use Gmail for it.
Information Rot
Information rot is the fact that there is information about me on the web that is now outdated and is now inaccurate and/or incomplete. That includes information such as addresses, resumes, and more. I’ve only recently started to think about this problem because of things like MySpace, LinkedIn, ZoomInfo, and more. The best thing I’ve thought of to date is to keep a record of places on the web where perishable information exists and to check on them manually as events in my life transpire.

Information Overload
I am an infovore. There are a lot of sites out there that I like to stay up on and a lot of people I like to stay connected with. I use an RSS aggregator to manage all of the feeds from the various sites I like. I use stratified communication to stay in touch with a large number of people. By stratified I mean email, text messaging, comments, MySpace, phone calls, RL, chat, forums, and more. I could write a huge piece about which communication type is right for which type of message, perhaps another time.

Identity Theft
I have been fortunate not to have this problem, but I take proactive steps to prevent it as well.

I change my bank and credit cards once a year. That way if my number is floating around, it won’t be for long.
I check my credit report once a quarter. If I see something weird, I look into it.
I crosscut shred credit card offers that I don’t want. I don’t need someone completing the application on my behalf.
Extra tip
I suggest buying your legal name as a domain name. That way you can use it for a blog, your own permanent email address, or whatever else.

Stumbleupon Is Really Cool Social Media

I recently noticed a spike in my traffic that brought more than double my daily traffic. Looking into it, I found the spike came from StumbleUpon, which is a service designed to help surfers discover new sites. I knew about StumbleUpon, and if I recall correctly, it’s been around for more than 5 years. However, I have an aversion to tool bars, which is why I never considered the service before.

I’m always looking for new tricks to add to my bag of promotions, so I decided to install their toolbar, which is when my problem began. The problem is that StumbleUpon is really cool and is sucking away hours of my time. I’ve tried surfing the internet in the same way I watch T.V., but I could never decide to start a surf session—it just had to happen, like finding a great new blog full of cool links or happening to hit a new topic vein. I know some people visit sites like Digg, BoingBoing, Fark; but they don’t inspire surfing for me.

I like StumbleUpon because the Stumble! button is easy to push and fun to see what comes up. I told StumbleUpon what my interests were when I first signed up and they started feeding me sites within those interests. The toolbar has a thumbs up and thumbs down feature ala Digg.com. Now that I’ve said what sites I like and which ones I don’t, StumbleUpon seems to be getting smarter about the sites it shows me. I used to like Furl for the fact that it would recommend sites to me based on what I’ve bookmarked. I like that I don’t have to have anything bookmarked before it will recommend things to me. I also like that I don’t have to fill out all of the fields in traditional social bookmark services, I can just hit the thumbs up and StumbleUpon saves that site for me to retrieve later. I can tag quality sites I like for even greater organizational control. The fact that I can simultaneously discover, rate, tag, and save sites in a push button manner makes StumbleUpon a great research tool for me. I can even discover sites at a granular level by stumbling within a single topic or based on a keyphrase.
I haven’t started tapping the networking possibilities, but they do offer profiles that I can customize and fellow stumblers that I can befriend.

All in all, I have really been taken with StumbleUpon. They refer to it as a great way to discover new sites, but I’ve found it’s also a great way to organize and share bookmarks as well. I think I hit Stumble! more than I enter a URL in the address bar these days.