Position Is Everything
A compendium of
CSS positioning bugs

This site attempts to describe and demonstrate some of the bugs found in web browsers, and to show advanced CSS methods that work across all browsers.

Newest Content

#IEroot — Targeting IE Using Conditional Comments and Just One Stylesheet Here comes another Guest Article courtesy of Hiroki Chalfant, showing how to target various IE versions using only clean legal rules inside a single stylesheet. Tricky!

Internet Explorer vs. the Standards

Do you want to know why our simple CSS positioning system ends up becoming so very frustrating to so many unsuspecting coders? Go to this collection of articles and demos showing some of the major problems and ways to get around them. Warning: Barf Alert!

Browser specific bug demos:

Explorer Exposed! Bugs found only in Internet Explorer. Opera Omnibus Bugs found only in Opera. Open Source Oopsies Bugs found only in Gecko based browsers (N6+, Mozilla, Camino, etc.)

Articles We (and others) Wrote

A number of in-depth articles, with the emphasis on readability. We have tried hard to make complex subjects clear, and we hope you agree.

Layout demos

ClevaTreva's New Improved Piefecta Page Maker Do you like the Piefecta layout, but back away fast after seeing the hairy-chested CSS code behind it? Well fret not, because ClevaTreva has developed a new version of his page maker, exclusively for PIE! Not only does it produce one, two, or three column source ordered layouts without mussing your hair, but it will soon create dropshadows to boot! This is almost too much good stuff. Thanks, Trev. In search of the One True Layout Want to be able to display your columns in any order? Want to be able to have equal height columns without having to use faux columns? Want to be able to align elements vertically across columns? So does Alex Robinson. Settle back as Alex reports on a group of techniques that will let you do all that, for any number of columns you desire. The Jello Mold Piefecta The Piefecta layout, now with a liquid center column, poured into a brand new Jello Mold wrapper invented and explained by Mike Purvis. Features: Source ordered, all cols same length, all areas tilable, customized width behaviors. Deluxe CSS Dropdowns And Flyouts Presenting a slick combination of dropdowns and flyouts, all generated via clean CSS. You're gonna like this! All-CSS Flyout Nav The DOM generated horizontal flyout nav has a new challenger. Works in all but IE/Mac, and degrades well. Enjoy! Perched Upon a Lily Pad Holly Bergevin's tour de force layout demo shows just how complex a css layout can get and still work well across modern browsers. The Piefecta 3-col Layout Rigid 3-col, all cols the same length, the center col is first in the source, and pixel perfect across ALL modern browsers.

Cross-browser Bug Demos and Articles:

Background Positioning vs. Centered Elements Yet another form of 1px error, caused by mixed centering methods. It may never happen to you, but if it does and you are not ready, better have your analyst on speed-dial! The 1px Rounding Error Problem A small but irritating flaw in the way boxes get rendered. How To Clear Floats Without Structural Markup At last, a way to dispense with those pesky extra clearing elements. Adapted from a demo by Tony Aslett, and now with a clean CSS fix for IE/Mac to replace the ugly Javascript hack. Woohoo! Going Absolutely Buggy What happens when absolutely positioned boxes are nested. Absolutely Buggy II Nesting absolute boxes inside a relative box. (have you done this yet?)

Guest demos

Contrary to widespread belief, we can't do it all! Here, other coders try their hand at demoization. Want to give it a try yourself?

Big John Design Contact Us ©positioniseverything.net
Last updated: July 4th, 2008
Created May 5, 2002

Study tips:

The source code for each demo usually has all the relevant CSS embedded in the head section. Please feel free to take, use, and if need be, abuse all code found on this site.

Site Sponsor

Mike Papageorge, of Masadelante.com, a volunteer sponsor of this bug site (and a really cool biker dude too). Diseño Web España (Web Design of Spain) offers full hosting and web design services for those who want the best. (for English, click button in upper right) They have hosted PIE for lo these many years without flaw. Nice going guys!

Also check out Mike's personal and excellent web design resource blog, fiftyfoureleven.com

wanderlucky.com

Want to see what I do to cure burnout? Wanderlucky is the repository for my personal hiking and kayaking trip reports, complete with photos. Come see the evolution of the next Steinway.. or is it Hemmingbeck...?

Big John Design
Web Design and Consulting

Do you need quick help with your broken site? Maybe you want a fantastic new site with the latest bleeding edge CSS/JS layout tricks? Something in between?

Consider Big John Design for your more difficult coding requirements. Accessibility is a given. Fast bug-busting a speciality.

test

You are viewing a mobilized version of this site...
View original page here

Position Is Everything A compendium of CSS positioning bugs