where * the 3px padding occurs */ #centercontent { height: 50%; }
Simply specify a height for the problem
.
Hacks/Workarounds/Bugs
Odd 10px margin -10px margin applied
Again, in Internet Explorer, there is a weird margin bug. Notice the white space next to the rounded corners. This only happens in IE, and again, the fix is very simple. Apply a negative 10 pixel margin, because the rounded gifs are 10x10 pixels.
.menu_curve_left { /* margin: top right bottom left; */ margin: 0px -10px 0px 0px; } .menu_curve_right { margin: 0px 0px 0px -10px; }
Pros/Cons of this Layout
•
•
•
• • •
Content is fairly separated from presentation The file size of the HTML has been reduced by about 20% (14KB to 11KB) The extra data the client is required to download are delivered in a cacheable format. Getting everything to line up “pixel perfect” was relatively easy. The layout grows and shrinks with the browser window. The layout works at 800x600.
•
•
•
•
The additional style sheets add an additional 6KB of files to download. The overall download size for the HTML and stylesheets was a net increase to 17KB. The minimum screen resolution is for the layout to work “perfectly” is 1024x768 pixels. Since IE doesn’t seem to support the overflow:hide property, a Javascript workaround must be used for the center
to allow the site to degrade to 800x600.
CSS Resources
Below is a list of web sites that I found immensely useful in designing this layout.
• • • • • The W3C online resources reference: http://www.w3.org/Style/CSS/learning#online This is where I started and is where I discovered most of the sites below. css-discuss Wiki's rounded corner page: http://css-discuss.incutio.com/?page=RoundedCorners Not very practical, but the CSS Destroy (http://www.literarymoose.info/=/css.xhtml) has some pretty neat examples of CSS use/abuse. CSS Zen Garden (http://www.csszengarden.com/) shows just how powerful style sheets can be. This is the very first article that I read and started to work from: http://www.digitalweb.com/articles/web_page_reconstruction_with_css/. It talks about taking an existing tabular site and converting it to CSS level 2. An allegedly complete CSS2 reference site (I haven’t read the whole thing): http://zvon.org/xxl/CSS2Reference/Output/ A great CSS1 reference site with a little CSS2 thrown in (float, clear, etc.): http://www.htmlhelp.com/reference/css/. I use this one frequently. http://www.positioniseverything.net/ - Probably the best resource I’ve found for explaining CSS-specific browser bugs and how to overcome them.
• • •
Additional Resources
• Charlie Kroger added these helpful links: • http://alistapart.com/topics/css/ • http://www.zeldman.com/dwws/