Isaac Keyet

A few months ago I designed a basic website for a web design company based on the east coast. I just remembered today that the site is probably live by now, and I was right! I’m actually pretty proud of this design, it’s clean but still bold, and has a lot of character. Have a look over at Adept Interactive’s website:

www.adeptinteractive.com

Part 2 out of 2 (Part 1)

The only time a web designer notices the Outline property is when you want to disable it, and you’re wondering how to do so or if it’s even possible. But you can actually use the property to do very clever things.

At a first glance, the Border and the Outline property look very much alike. They share the same rule structure, and they both put a border around any object you want. But there are two fundamental differences.

1. When the browser calculates the width of a floated object, it takes into account Width, Padding and Border.

Notice how setting a border adds to the total width, while the outline doesn’t.

2. Since borders take up space, you can have problem aligning elements on a webpage using borders. However if you use an outline instead, the “border” will just be a layer on top of the image and won’t push your element anywhere. Notice how the second image’s inside border still lines up with the text.

This is very useful for registration processes, if you want to show a field that needs to be corrected: Instead of applying a border and having the textfield move X amount of pixels horizontally you can apply an outline!

How to use Outline, examples

Example:
.classNameHere {
outline: 1px solid #000000;
}
Example 2:
.classNameHere {
outline: 2px dotted #FF66CC;
}

I hope you enjoyed this little introduction to the Outline CSS property!

Part 1 out of 2(Part 2)

The CSS property “outline: Xpx;” is often overlooked. The only times you see it is when you’ve just clicked a link, as a thin dotted border. (See screenshot above!) It is enabled by the pseudo class :active by default for all anchors (<a>) in your HMTL document. It’s a usability thing, a confirmation that you’ve clicked a link. It also helps the page seem less flat, since a style change when you’ve just clicked a link gives you the feeling of pressing a button.

This blog post is two fold: First, I want to show you how to disable the border. On most modern web pages it is not needed, since we use hover effects, and in many cases graphical buttons to navigate.

Disabling the outline is really easy. You just need to make sure no anchors in your CSS document have that rule any more. All you do is add this to your stylesheet:

a {
outline: 0;
}

NOTE: No version of Internet Explorer supports this, even IE7 still displays the outline even if you have the above rule in your stylesheet.
-
Stay tuned for more info about this lost CSS property.

I just got done with it, and it’s just for fun. If you look in this blog’s sidebar you’ll see a shiny iPhone with my latest visitors in it.

The reason I did it was just because the new MBL widget looks so much like an iPhone. Especially if you’re using a black and white color scheme for it, which I did. Anyway, I hope you like it!

Recently I faced the problem of either creating my own 16 square pixel icons, or use others. I started looking into how other services have solved the problem, and I realized after looking at Socialthing! that the best solution is also the most obvious and simple one: Just import the site’s own favicons!

Here are some examples of great 16×16 icons from well known sites:

• Facebook:
• Last.fm:
• CNN:
• Yahoo!:
• Twitter:

Almost all bigger sites out there have a favicon, so to find and download an icon just do the following:

1. Enter root web adress in your browsers adress field: http://www.sitename.com
2. Apply /favicon.ico to the adress, like so: http://www.sitename.com/favicon.ico
3. Hit Enter to go to the adress, and there you are. This is the perfect 16px icon for the website you’ve entered!

Some things are just simply awesome. This plugin for Wordpress posts your most recent blog posts to your twitter account (well, the title and a link at least). It was really easy to setup and hopefully works as it should, too. If you want more content on Twitter and blog often, this is for you!

Link to the Twitter Updater download/install page

I saw the film Juno featuring Ellen Page and Michael Cera (who’s been in the buzz for a while since he played in the very hyped comedy Superbad). It was one of those pictures that I knew I’d like long before it was released. And I did, Ellen Page really touched my heart. Her acting should’ve won the Oscar, and I’m dead serious. There’s this scene where she cries in a car, and her chin is trembling… Incredibly well done.

Juno is unique and different, but yet a role model. To me what’s important about life is to do what you want to do, whatever it might be and without restrictions. The way she’s true to herself is very admirable to me. Being able to throw yourself, get beat up verbally and psychically and still come out on top is, to me, the coolest thing you can do as a living being. It’s pure strength.

One thing that I thought was very interesting was that Bleeker’s “stink-eye girlfriend” literally only appears in one scene, the same scene that was in the trailer. It’s interesting that she doesn’t get any focus whatsoever in the film, which is genius in my opinion. It’s the emotion she gets Juno in and the mood of Paulie that she represents that’s important. And it is very true that nothing else is of any importance to the film, all her character visualizes is the emotion and state of others. Clever.

I have got to see more of Ellen Page. She’s one of my favorites already, and I think the first one being only 21.

All browsers have their flaws, that’s for sure. But sometimes you see pure stupidity, and then it might be worth writing something about it.

If a web page doesn’t have a doctype, it usually means that the page is either very old or created by someone that don’t care or doesn’t know anything about doctypes. The strange thing though is that Internet Explorer treats those pages as something completely different than normal, modern web pages. If you don’t add a doctype to your HTML document, Internet Explorer will not rely on it’s rendering rules any more. For example: If you set both a width and a padding to an element, normal browser rendering makes the total width of the object to be width+left padding+right padding.

.box {
padding: 10px;
width: 200px;
}

The total width of .box becomes 220px. However, without a Doctype to rely on, Internet Explorer does not default to a simple Doctype like HTML 4.01 Transitional which would follow this rule. Instead it decides that the page is not worth a second chance, and some rules are rendered incorrectly. In this example, .box would actually become 200 pixels wide according to IE’s rendering.

You might think that this is not a big deal, but consider that other browsers are smarter than this, which makes the crossbrowser rendering of the web page a mess. It is also a fairly unknown and “not so easy to discover” kind of bug which makes it even harder.

Read about the existing Doctypes and why you should use them over at A List Apart: Doctypes.

UPDATE 2008-03-20: This bug is easily resolved by upgrading to the latest Beta version of Firebug (currently 1.1). Thanks to PatternHead!

I’ve experienced this bug for quite a while now, and it is really annoying. Basically you can’t inspect an anchor in Firebug, and there’s no way around it.

Today I had enough and decided to do a thorough search on the web to get rid of the problem.. Looks like it’s a well known bug. Someone suggested that I’d revert back to Firefox 2.0.0.11, as it didn’t have this bug. I found an old version, sadly a .exe though. I could not find any mac equivalent, until I stumbled across a Ukrainian .dmg file… So now my Firefox is in crazy Ukranian, but at least it works properly!

For those that haven’t heard, the swedish TechStar is now back in Boulder for 3 months. I’m working hard at our new (not very shiny but OK offices) on 1980 8th St, feel free to drop by.

It’s good to be back.