I just encountered an odd bug for the first time! Internet Explorer is always throwing odd CSS interpretation bugs at me, but I haven’t encountered a new one (to me) for a long time! This one is a real hoot.

When you have an absolutely positioned element inside - the child of - a relatively positioned element, the absolutely positioned will be positioned from the top left corner at zero-zero by default. If you set, for example, the absolute positioning to be top: 100px; left: 275px;, the element will be positioned 100 pixels down from the top, and 275 pixels over to the right, from the left-most edge of the element.

IE7 and IE6 both throw an odd monkey wrench into this, however, if the relatively positioned parent element has text-align: center; or text-align: right set on it, (even as an inherited property). Theoretically, having the parent element with a text-align value set on it should make no difference how the child element is positioned. Alignment should have nothing to do with absolute positioning.

What do IE7 and IE6 do? Well, if you’re parent element has a property of text-align: center, the positioning will occur from the center of the element! So if your parent - relatively positioned - element is 400 pixels wide, and has text-align:center; on it, and the child - absolutely positioned - element is set to be left: 200px, it will actually be 400 pixels from the left, since IE is only starting the positioning from the center!

Weird.

The fix? Make sure text-align is set to left.

ShareThis

Catch and Release Artwork has been launched! Jim Tingey creates beautiful watercolor illustrations of your catch, including details of the location and fish stats. Great way to memorialize a catch without doing taxidermy, or uber-expensive sculpture.

For such an industry, with all the fancy gadgets and gear, and high-tech gizmos, the “outdoors enthusiast” field has pretty low-end web sites. Odd.

I did the design of the look-and-feel for this ecommerce website. (liQuidprint project.)

ShareThis