This week's Web Wednesday was sponsored by CSS positioning, the bane of all novice web designers. Absolutes are relative to relatives, or to other absolutes, or to the body if there are no parent relatives or absolutes. And they don't flow. Huh, what? Sounds philosophical; all we are is dust in the great cpu fan of life, dude.
Let's demystify a bit. By default all elements are static, so you don't even need to worry about them. If at all possible, let sleeping dogs lie, as it were. Avoid using position: whatever if you can. But if you need to do something special, here are your options for CSS positioning:
- static - default behavior
- relative - still behaves like static, but absolutely positioned elements inside will be positioned, well, relative to this element
- absolute - positioned within the most immediate parent with a position other than static; doesn't flow with the page
- fixed - stay put in the viewport; don't move with scrolling or anything
Here's the basic rule for absolute positioning (other than avoid it if you can):
Absolute elements are positioned within the closest parent with non-static positioning, or within the body if no such parents exist.
For a great overview of positioning, along with a handy demo and code download, check out this tutorial on MicroTut:
http://tutorialzine.com/2010/06/microtu ... ion-works/
Of course Jeff had to come up with some question about testing in various browsers, so I remoted into an XP machine we have here and pulled up the page in IE 8. Needless to say, the absolutely positioned element we were playing with was simply not there in IE, but there you go. The reason for that is left as an exercise to the reader.
But that begs the question: What's the best way to test in multiple browsers? We have a number of virtual machines here, and once even set up a "workstation" with about 10 different computers all running from the same console. Turned out to be rather impractical. If you use a Mac, the real question is how to test in IE (any version other than what, IE 5 for the Mac, may it rest in peace?). Our solution is to have a few systems around we can access remotely using RDP, but that doesn't work for everyone.
Here's a good article on Smashing Magazine on the various options out there:
http://www.smashingmagazine.com/2011/08 ... ing-tools/
A lot of them are painfully slow, since you are just getting a picture of the page as rendered in various browsers. And it can take minutes or longer for the rendering to happen. There is no substitute for actually having the real browser in front of you. But I tried out Adobe Browserlab (https://browserlab.adobe.com/) and was able to test a site in IE9 and Safari side-by-side pretty easily. You could even click through links on the pages. It was slow, but workable. You might find it works pretty well for you.
That's about it for this week's edition of Web Wednesdays. Ciao!