Today is the second day I’ve sat down and worked on the layout for my new business website. This is, without a doubt, the trickiest layout I’ve ever done. Which is a good thing…

Today I found this super-handy little hack (it’s a hack, I know, and ordinarily I wouldn’t use this but for now I’m going to because it works perfectly and I’m not sure about using the Microsoft expressions for IE lt 7…). This is from Dustin Diaz:

selector {
min-height:500px;
height:auto !important;
height:500px;
}

Sweet and simple. And it works with min-width too.

I was looking for scripts for compact, on-page image galleries this morning and came across this great post on scripts for galleries and slideshows. Mostly I’m looking for a CSS version and there are a number of really good-looking ones here. I need something for a new photography client, but I’ll also want to use one of these for my web portfolio maybe on my new site.

I haven’t posted in several days - my spare time has been thoroughly occupied with building a new web site for my web design business. I’m changing my look completely and have a new logo that fits my business much better…

I’m having a few issues with the CSS on my prototype site, though, frustrating… The first is that my Faux Columns (which I use all the time) aren’t working. I think I have an error but can’t locate it, so I’m probably going to wind up tearing it down to nothing and working back up to include all the elements. I don’t mind this, but I wish I didn’t have to do it.

Also, I got the footer to stick to the bottom of the screen, but because the Faux Columns aren’t working the main content area appears to end before it reaches the footer. I’m hoping that fixing the first issue will help get the second one under control.

Other than these problems, the site looks great, IMO. I’m very excited to get it up and running - my target launch date is August 1.

One of my best clients came to me this week with a large products page, and asked me to reduce the size (the number of characters in the HTML page) for him.

The page was full - it runs in a frame, and has a limit of 50,000 characters. They were already at 49,300 and had many more products to add.

I removed the table structure (a feat in itself! it was a nasty huge nested table) and implemented a lot more CSS, replacing the ubiquitous font tag and other similar elements.

My new page has 36,000 characters. I think that in itself is a pretty good argument for why tables are not a good idea for layout work.

This morning I went hunting on Google for a good example of CSS-only rounded tabs. I found quite a few but really liked the simplicity of the CSS code in Exploding Boy’s nice sheet of tabbed menus.

I picked ‘K’ and it took me about an hour to implement this and change the graphics colors to better fit my design. It’s working nicely in FF, IE 6/7, Safari, Opera and Netscape.

Centering a block of text (or anything else) vertically within a div has been a longstanding problem where tables seem to have the advantage.

I recently came across this article about vertical centering and tried using the bottommost code snippet today with good results in FF, IE6, Opera and Netscape. It’s a bit clumsy, but it does the trick there - however this doesn’t work in IE7.

I wound up using the topmost snippet - with hacks, which I don’t like using, but I was pressed for time this morning… I’m going to revisit this when I have an opportunity to see if I can figure out what to do about IE7 and the non-hacked example.

I read a post in a mailing list today that made me think. I know that the homepages for the big search engines are full of errors. They don’t validate - and it doesn’t matter. They’re not hurting for it. It makes not one iota of difference as far as search engines go whether code validates.

I try (I don’t always succeed, but I always try) to make sure my code is valid for both HTML and CSS. Why do I do this? Because I feel it’s the right thing to do.

I know that there are usually many ways to accomplish the same result when you’re building a web site. I get that, and I like that. But I with my idealist viewpoint believe that there are ways that are more clean, less intrusive, easier to later understand and change than others.

Take for instance CSS hacks. When I first began using CSS heavily, I used hacks. But since I discovered conditional comments, I very rarely use a hack (the last one was about four months ago and specific to Opera). I like conditional comments because they seem to me to be a cleaner, more correct solution than toying with presentational elements in CSS that may later reveal incompatibilities as new browser versions are released (look at the list of CSS hacks that stopped working in IE7).

I met a designer last week whose work I love - he’s a very talented individual and a standards advocate as I am. We were talking about a common issue in CSS and I asked how he got around that - he agreed that conditional comments were the way to go but that he defined them within the stylesheet and not in the actual HTML page. He whipped out his laptop and showed me what he meant.

I looked at the code and thought ‘that’s a hack’ even as he said ‘this is a conditional comment.’ He supposed that a purist wouldn’t agree with his labeling.

I’m a purist. I think hacks are messy, they’re more like bandaids than real solutions. For me, conditional comments are the cleaner fix.

I validate because I care very much that my code is clean. I define clean, in part, as being error-free, and validating helps me accomplish that, most of the time. I know it doesn’t matter to search engines, nor to the vast majority of my clients. But I consider my work as a web designer/developer to be a craft - and it matters to me.

All browsers have built-in, predefined presentational features that apply to the rules we all commonly use. For example, links are blue and underlined by default… Everyone’s seen this.

A colleague pointed me to this interesting post by Eric Meyer  about clearing out all of the default presentational effects that browsers apply to documents with no specific CSS styling. This post in turn refers to Tantek Celik’s post about his file ‘undohtml.css’ that strips out these defaults.

I’ve actually been using most of the elements described in Tantek’s file for quite a while now in the top of all my CSS files - they were collected over the last two years as I ran into problems. But it’s nice to have it in a separate file and more complete than my own version.