June 28th, 2009
CSS coding delivers more “WTF moments” than any other work activity I engage in these days. I need to understand it better, specifically CSS margins and floats. Made some time today to study up.
I read and re-read the articles below. They are aging but speak to a time when the evil IE6 was even more prominent than it is years later in 2009.
General insights include:
- Kill IE’s double margin bug with
display:inline on a floated items.
- When 2 adjacent elements’ margins meet, only the bigger margin is used.
- If an item’s 2 opposite margins meet, they both go away (self-collapse)
- Nested items without padding or border will cause the top and bottom margins of all to collapse. Left and right margins remain. Adding padding or border makes the margin come back.
- Set
overflow:hidden on columns to prevent object blow out in IE.
- To make columns,
float:left on one and float:right on the other.
- Self clear an object (always clear floats) with the
:after filter. (Example below.)
- Center an item by setting
auto on left and right margins. margin:0 auto.
- In addition to auto margins, to center an item in IE, also use
text-align:center on parent, then reset text-align in child, usually text-align:left.
Self clear example
.columns:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Convert a list into a horizontal menu
Using background images instead of text. Fixed width, left margins, using negative margin on UL to cancel first margin.
<ul class="menu">
<li><a href="#somewhere1" id="link1"><em>link 1</em></a></li>
<li><a href="#somewhere2" id="link2"><em>link 2</em></a></li>
<li><a href="#somewhere3" id="link3"><em>link 3</em></a></li>
</ul>
ul.menu {
margin:0 0 0 -20px;
float:left;
width:100%;
}
ul.menu li {
list-style-type:none;
display:inline;
float:left;
margin:0 0 0 20px;
}
ul.menu li a {
display:block;
height:50px;
background-color: #0f0;
}
ul.menu li a em {
display:none;
}
ul.menu li a#link1 {
width:100px;
background-image: url(link1.png);
}
ul.menu li a#link1:hover {
background-image: url(link1-over.png);
}
ul.menu li a#link2 {
width:110px;
background-image: url(link2.png);
}
ul.menu li a#link2:hover {
background-image: url(link2-over.png);
}
ul.menu li a#link3 {
width:120px;
background-image: url(link3.png);
}
ul.menu li a#link3:hover {
background-image: url(link3-over.png);
}
Tags: css, ie, margins, webdesign
Posted in css, layout | 2 Comments »
June 26th, 2009
We spent the past week in Arkansas, where my parents retired. Here is the amateur video aftermath. Read the rest of this entry »
Tags: arkansas, video
Posted in fun, vacation | No Comments »
June 13th, 2009
I am reverting to hermit mode from socialite mode. A few nights ago I determined that I need to cut back on my networking and sales effort until I start running out of work.
Networking and meeting new people is exhilarating. Later I’ll pick up where I left off.
This weekend I have six web design projects to choose from. I might get two done. One per day? Ambitious. Better get going.
Tags: business, busy, networking, work
Posted in work | No Comments »
June 8th, 2009
Trying new things can illicit the same response: “you’re going to die doing that.”
It happened when I started biking. I went from thinking I was going to die from inactivity to thinking I was going to die when someone opened a car door just as I come biking along. Such an event would likely cause a header and rough landing. Bad for sure.
But it’s been a couple months at least and I don’t worry about car doors like I first did. Going by a car is more common now.
That isn’t to say that I don’t watch out for people in cars. I try to be very aware of when people are around, and especially if it looked like someone was about to open a door in front of me.
It is probably the newness. Being unfamiliar with one’s surroundings has a way of putting one on alert.
Same story with new jobs or, I’d imagine, working independently after working for someone for many years.
Newness. Death? Boredom. And repeat.
Tags: death, newness
Posted in dreaming, philosophy | No Comments »
June 7th, 2009
This was going to be a weekend for other projects. One thing led to another and now I’m rolling out yet another redesign to my homepage and this blog.
The last design had/has (still transitioning as of 6/7) some problems.

First was inconsistency. Homepage, blog and inside pages all looked different.
Second was my fat mug was getting old, even for me. My profile pics are adding up and it is time to narrow down, find a new, normal-looking profile pic. Decided to take the picture during my new pastime; both the picture of my head and the landscape shot are from a bike ride this weekend.
Third, the technical implementation of the buttons wasn’t right. I figured out a more right way, thanks to cssvault, and look I forward to using this method of mouseovers on all foreseeable projects. Nice blend of real links, unordered lists, image sprites, and popular CSS. This was the biggest reward of the project.
Forth, I need to keep pushing towards a “Web 2.0 feeling” site. Even though some would say Web 3 is upon us, better late than never. Play with the new navigation. That’s a big part of this attempt. There is a big orange drop down when you hover over “web design”. Somewhat reminiscent of vimeo I guess, or one of these.
Fifth, I need to hone my cross-promotion of superwebguy.com. There was a definite style divergence on the homepage that I wasn’t happy with. Now the homepage has its own feel and doesn’t try to feel half like SWG.
What I ended up, while perhaps not as in-your-face and a little text-heavy, is solving the above issues. Like?

Tags: projects, redesign, webdesign
Posted in css, learning, project | No Comments »
June 6th, 2009
I took my own advice and am reviewing local businesses on Yelp. It’s a way of saying thanks to a business for great service. And I could imagine other uses as well

Tags: linkbuilding, marketing, reviews, social, yelp
Posted in linkbuilding, marketing | No Comments »
June 4th, 2009
One possible step in marketing your business online is putting it into the big local directories. I’ve been on the hunt for good ones but keep coming back to the big guys.
Link builders, start your engines.
If you are just getting started, remember to track your ROI by first installing this analytics bad boy.
Big guys
Physically local directories, chambers of commerce
Customer review sites
Listen
- Set up Google Alerts so you can immediately see where your business is popping up
Beware
As with all things web, there are countless no-name sites that are probably just harvesting your data for a nasty spam blast. Be skeptical; I would stick with the big guys.
Just getting started
Getting into web directories should only be one part of your online marketing strategy and ROI’s will vary. There is no silver bullet with link building. Keep looking for ways to be visible online.
From here I might progress to popping up in:
- Yahoo Answers
- Squidoo
- Facebook’s Pages
- and, uh, maybe Twitter. One note about Twitter: it seems whatever keywords are in your Twitter username will rank favorably in Google for those keywords. Twice I’ve seen Twitter users be the first results in my searches, regardless of follower count.
I should mention one little thing: your website should be awesome, useful and worth linking to! Good luck with that.
Please leave comments with your own suggestions!
Tags: directories, linkbuilding, links, marketing
Posted in learning, linkbuilding, marketing | No Comments »
May 1st, 2009
I used to draw a lot. Unfortunately it’s all too rare these days. When I do, it’s exciting, but always a little like starting over again.
Today I put Wacom pen to tablet again. I thought the results were sharable. It is a cartoon of myself as my alter ego for his website.

I didn’t bother removing the beer belly; I think it adds character.
Included a couple of the early stages as well. That way, if you think the end product is bad, at least you know at some point it was even worse.
Tags: art, cartoon, superwebguy
Posted in art, fun | 2 Comments »