Is unlocked for ease of access to the gooey bits (CSS+Images). Combines the menu down to a single image using so-called ‘css sprites’, uses a min-height trick to avoid background-position oddities allowing all alpha transparent .png to be kicked to the curb, tested working IE 5.5, 6, 7 & 8, Opera 10.6, FF 2 and 3.5, and the latest flavors each of Safari and chrome.
Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for the use of ZOOM due to my being unable to use other haslayout triggers thanks to paddings or the double-background min-height trick so that the definition of “center” on a background-image doesn’t change when the screen gets narrower than #pageWrapper.
Ooph, a LOT of issues. Endless nested DIV for no reason, hordes of classes doing absolutely nothing you couldn’t do by inheritance, etc, etc… Really big issues though are the image replacement techniques that don’t actually serve the PURPOSE of image replacement, since you turn images off with CSS on, there’s no menu!
The markup should probably go something like this:
Gilder-levin image replacement on the h1, and on the menu… Since it’s all constrained to the same width only set width one on the outermost wrapper, and for the footer just set #footer to text-align:right and then float:left the footer; everything will fall into place.
If I have time later I’ll belt out the CSS to go with that.
That was the text replacement hiding routine It’s just hiding the text off screen. When you bring it back you allow space in the document for the images to show but then you are stuck with the replacement text.
As I said above you need to float the anchors to allow the width and height to take place