Redesign

Sunday 1 October 2006 — This is more than 18 years old. Be careful.

I’ve redesigned this site. I’d been using the same design for the past 4½ years. Let me know if there are any problems.

Once again I looked into using a no-tables approach, but I didn’t see how I could accomplish everything I wanted to with pure CSS. If anyone wants to take a crack at it, I’d be very interested to see how it can be accomplished.

There are a few things I couldn’t get right. One of them is that the gap between a blog title and its date is different in Firefox and IE. I played with all sorts of margins and paddings and line-heights, and could not get them to agree.

Comments

Mike Watkins 12:37 PM on 1 Oct 2006

First thing I always do is reset all the margin and padding settings for all block level elements to 0, and then set them from there. Particularly with headings (which your title uses), the differences between IE and the rest of the world are profound.

p, blockquote,
dl, dt, dd,
h1,h2,h3,h4,h5,h6,
pre,code,
table, tbody, tfoot, thead, col, colgroup, caption, td, th, tr,
form,fieldset,legend,input,select,button, optgroup, option, textarea {
margin:0; padding:0;
font-size: 1em;
}

...

h1,h2,h3,h4,h5,h6 {
font-family: "Bitstream Vera Sans", sans-serif;
margin: 1em 0;
background-color:inherit;
color: #930;
}

And then adjust the individual headings from there. I don't use padding for hx.

Perhaps this may help.

And by the way, your spam detection system thinks the above looks "spammy", and returned this warning to me on submitting a preview:

Saying '
...' makes you sound like a spammer!

Gustaf Erikson 2:00 PM on 1 Oct 2006

Looks nice, very clean.

Don't sweat the tables, I find the whole "pure CSS" debate rather futile. Do what works for you.

mark 11:33 AM on 2 Oct 2006

Hi,

This doesn't really work well under Firefox 2 beta (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20060918 Firefox/2.0)

The margin is set up in a way that the first letter on the left is cut in half.

Also the highlight for the 'current article' comes up quite slowly.

Thanks for the good blog!
Mark

Redesign

Comments

Add a comment: