PDA

View Full Version : Free guide to CSS layout

David
24th Aug 2004, 02:28 pm
This free sample chapter of the book by Dan Cederholm, the creator of the SimpleBits Website (http://www.simplebits.com/). Excellent stuff.

Chapter 12 - CSS Layouts (http://www.friendsofed.com/books/1590593812/1590593812.pdf)
francis
24th Aug 2004, 03:18 pm
I've mentioned that book a few times on here - it's very good. It's also bang up to date and includes various CSS image replacement methods. I was quite chuffed to see CSS guru Dave Shea realise he can use CSS to filter out transparent PNGS from IE (http://www.mezzoblue.com/archives/2004/08/23/a_bit_of_tra/) as I used the same technique (http://www.thespiceweasel.com) a couple of weeks ago (view in IE and Moz/FF/Op/Saf etc for the difference).
David
24th Aug 2004, 06:15 pm
I have no intention of holding my breath. It's been three and a half years so far ;)
francis
24th Aug 2004, 06:26 pm
Oh, sure, but it's nice that I can provide one experience to one browser and another to another without resorting to JS sniffing. I guess it's sort of a hack by declaring one lot of CSS for one browser and then overriding it for all of the others, but there you go. It's not for everyone, but I like it.
David
24th Aug 2004, 10:42 pm
Yes, I didn't mean to sound flip.

Isn't that the way most hacks work? Most of the ones I've seen use that <html trick thing. Most browsers recognise it but IE does not and so ignores what comes after. Maybe yours works the other way round.
francis
24th Aug 2004, 11:08 pm
No, it works the same way. Set all of the background properties (+ some IE5 hacks) in one rule then overwrite the background image using html>body for non-IE:

#banner{
padding:48px 0 0 0;
overflow: hidden;
background: url("graphics/logo.gif") no-repeat;
height: 0px !important;
height /**/:48px;
line-height:2em;
font-size:150%;
}

html>body #banner{
background: url("graphics/logo.png") no-repeat;
}

That way I get my transparent png on only the browsers that support it.