Redesign

Sunday 1 October 2006This is 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

[gravatar]
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!
[gravatar]
Looks nice, very clean.

Don't sweat the tables, I find the whole "pure CSS" debate rather futile. Do what works for you.
[gravatar]
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

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
Comment text is Markdown.