More on CSS Layout

[David]

For my sins I find myself with a couple of commercial web design jobs to complete in the next few months :) :(

I have just begun the first and, once again, I am being very good. Despite knowing that I could probably complete a table based design in less than half the time, I am girding my loins for a CSS layout battle - sorry, "voyage of discovery". Feeling more refreshed as a result of my week away from computers, I feel I'm just beginning to understand the mind boggling and banal complexity of cross-browser CSS layout compatibility (sorry, incompatibility).

It's a crying shame that CSS, designed to be so simple and approachable to nonprogrammers, has turned into such a cabalist's affair!
—Todd Fahrner

Oh, and in case anyone is wondering - define cabalist (http://www.thefreedictionary.com/Cabalist)

I found this very apt quote on Eric Meyers site where there is a very excellent page describing various CSS hacks (http://www.ericmeyeroncss.com/bonus/trick-hide.html). It's the first time I've seen many of these things set out and described in detail - thank you Eric.

So now I'm feeling smug because I've learned the voice-family hack (see above) and am now able to make IE and Moz behave similarly when defining a box width. "And what about Opera?" I hear you ask - simple, just add the html>body hack.

So, to set your box width consistently on all 3 browsers, you need this - read it and weep...
#wrapper {
width: 782px;
voice-family: "\"}\"";
voice-family: inherit;
width: 750px;
position: relative;
margin: 0 auto;
padding: 0 16px;
background: #DEDDC8 url(../images/background.gif) repeat-y;
}

html>body #wrapper {
width: 750px;
}

Three width definitions, one for each browser! Table widths, of course are rendered correctly in all browsers ;)

There is also a PDF version (http://www.ericmeyeroncss.com/bonus/emoc-trick-hide.pdf) of the article by Eric Meyer describing these hacks. I suggest you all print it out and clip it into your ring binders for future reference.

Back to my design: I've now spent about a day working up the layout and it's not perfect. Francis will be cheered to hear me admit that I am discovering that in many cases, it is IE that causes problems but Moz is certainly not exempt.

I now have the general page layout complete but am still struggling with the #content div (currently different in all 3 browsers :( ) but I'm optimistic.

Feedback welcome - Macfarlane Wilder (http://www.watest.co.uk/mw)

[francis]

I prefer the simplified box model hack (http://www.doxdesk.com/personal/posts/css/20020212-bmh.html) - does the same but is more readable. Tantek's one still scares me!

[David]

Ah, now the word "simplified" appeals. The simplified box model hack (SBMH to it's friends) uses the same principle as the voice-family or Tantek hack (the name of the person who derived it) - some browsers recognise escape characters (\) in CSS and some do not. In practice it means that I can rewrite the code above so that it looks like this...
#wrapper {
width: 750px; /* for browsers with no escapes at all */
\width: 782px; /* for IE5/Win */
w\idth: 750px; /* for good browsers */
position: relative;
margin: 0 auto;
padding: 0 16px;
background: #DEDDC8 url(../images/background.gif) repeat-y;
}
...and it does exactly the same thing (I even tested it). I think you'll agree this is much neater and doesn't look half so scary.

Hey, I think I may now be able to consider myself a cabalist. Tim Berners-Lee must be crying into his well-earned beer.

Now, just a few more inconsistencies to clear up - I'll probably have it sorted in a few days... Hang on! what's my charge-out rate?

[francis]

In practice I've never bothered with the first rule (for browsers with no escapes) - doesn't affect IE5 and I guess anything earlier should probably be thought of as dead, although you may decide otherwise. If you get as far as using it with padding, don't forget that a and d are characters you need to not put the slash next to, so you end up with paddi\ng. That one caused me some aggro on a too-tired evening. Also, don't forget you must be in standards mode for IE6 so you need to check your doctype

[David]

Yes, and here is a great summary of current doctypes (http://www.hut.fi/u/hsivonen/doctype.html) and how they affect the layout mode. And here is a rather spiffing table of CSS filters (http://www.dithered.com/css_filters/css_only/index.php). Enjoy.

I'm almost done now. I've added all the hacks for when IE doesn't behave but there's one issue left with MOZ padding for the content div. For some reason, MOZ gives too much top and bottom - IE and Opera are OK.

It strikes me that having put so much effort into getting a layout that works, most designers would be tempted to stick with it and just use the same one for each site. Perhaps this explains why most sites that use CSS layout tend to look the same.

Later...

Got it! By default, MOZ adds extra margin to paragraph tags - IE and Opera don't. Explicitly set the margin for

and all is perfect in IE, MOZ and Opera. :)

[francis]

Ahh, default padding of things, how I love that <_<

No one browser seems to do the same - you got caught out by Moz this time, but sooner or later you'll come unstuck with the other two. Nice looking site so far; your colour scheme or theirs? Ditto with the font - I'm a sucker for a nice sans-serif font, especially with some kerning on the letters (did you know that you can do kerning with CSS using letter-spacing?). Adobe's Myriad (http://store.adobe.com/type/browser/browser_M.jhtml) is especially nice (well, I think so). What font is that?

I'd agree that most CSS sites look the same at the moment: centered with a nice drop shadow on all/most sides, two or three columns. You could do what Douglas Bowman at Stopdesign (http://www.stopdesign.com/) has done and removed nearly all trace of colour and just about every image from his site (he's calling it 'bleached'). The site still looks okay though.

You do know the only thing you can have in an [list=1] or <ul> is a tag? No point in putting all of the effort into CSS not to have the XHTML validate:) I'll stop now...

[David]

The colour scheme is based on their house blue. I extrapolated from that, using different shades and also a complimentary buff/beige.

The font is Century Gothic, their house font.

I could have tried using CSS letter spacing but I'm afraid life's too short and it was easily done in Photoshop - besides, although Century Gothic is a common font, it's not web safe.

I'm quite pleased with it so far and now I've got the layout finalised, I can start playing about with content.

Aw! I just saw your edited post - I can't have an <img> inside a <ul> :angry:

Back to the drawing board...

[francis]

Shouldn't make too much of an issue, you can happily have an image just in a <div> If it doesn't look right, try setting it with display:block and then positioning it. As you've got the web developer toolbar for Moz, just hit Validation > Validate HTML for instant checking (as long as you're online). Validate local HTML works very nicely for pages not on a server. I wasn't suggesting re-producing the logo just in HTML as it would look terrible unless, if I'm right, it was viewed in a Mac with font smoothing on. I was just pointing out that kerning can be adjusted using CSS - a few people I've spoken to of late didn't know it was possible, so I thought I'd share!

[David]

OK, I've done it! :D :D

I now have a web page (http://www.watest.co.uk/mw/index.php) that looks identical in IE, Moz and Opera and which validates for both HTML and CSS.

Sorry, that was a rather self congratulatory opening but I reckon I deserve it.

It has taken some time to achieve and I'm going to have to absorb the cost myself but it just proves (to me at least) that it is possible - I had begun to doubt it.

The layout required only 3 CSS hacks and these are all pretty well documented. What is less well documented is the problem of text flow. Moz has some very curious kerning (the space between letter pairs) and this causes the flow of text in Moz to be different to that in IE and Opera. The latter two appear to render text in the same way. Typographically, it's important to have this control because at default settings, Arial and some other fonts are rendered to tightly for easy reading on screen.

I overcame the problem by explioting the fact that Moz has a larger number of increments for text parameters than IE. For example, a change of 0.01em for letter spacing in IE has no effect but in Moz it causes selective changes in kerning.

I haven't checked all fonts but if you use Arial at a text height of 0.8em, you should use a letter-spacing of 0.08em and a line-height of 1.48em in order to achieve identical results in all 3 browsers. There may well be other permutations that work and maybe someday when there's nothing else to do, I'll sit down and work it out.

Maybe we could all have a go at this. A table of such values would be a valuable resourse if published on our website.

As an example of what I mean, here is an image of some text blown up by 300%. The upper line of text is from Moz and the lower one from IE. The font is Arial at a size of 0.8em and a letter spacing of 0.1em. Notice that the kerning in Moz is rather ugly. I've put arrows at each point where Moz has inserted an extra pixel between letter pairs. There is a particular problem with vowels.

http://www.websitearchitecture.co.uk/watson/postimages/kerning.gif

The result of poor kerning is that text is more difficult to read because words are less well formed and the text body generally looks untidy. To avoid this sort of thing, work backwards by reducing letter spacing in 0.01em increments. In this particular case, 0.08em gives perfect kerning in both IE and Moz.

[francis]

But, do you think that your body text is more readable now that previously? Personally, I think that it's a great deal less readble now you've added kerning to every letter. I'd be interested to see other websites that do this for body text - I don't recall ever seeing any, but am willing to be proven wrong :)

[David]

It is definately more readable than with default settings but I am still tweaking and my latest recommendation for Arial at 0.8em is...

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.3em;
letter-spacing: 0.08em;
word-spacing: 0.08em;
}


This gives a paragraph that looks like this:

http://www.websitearchitecture.co.uk/watson/postimages/typo1.gif

Which is much easier to read than the default, which looks like this:

http://www.websitearchitecture.co.uk/watson/postimages/typo2.gif

Of course, much of this is a matter of opinion but it is true that in order to maintain readability at small sizes, text spacings must be increased in order that the reader can clearly see the word forms.

There is no doubt that Verdana is a much more readable font that Arial on a computer screen. It has a bigger x-height and this makes lower-case letters easier to read at smaller sizes. My client on this project has specified Arial and that is why I'm playing with it at the moment. I'm still not 100% and if you have a better variant, I'd be interested to see it.

[David]

After further consideration, I've now removed the additional word spacing so the CSS looks like this:

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.3em;
letter-spacing: 0.08em;
}


And the resulting paragraph looks like this:

http://www.websitearchitecture.co.uk/watson/postimages/typo3.gif

Which, I think, is just about there.