The Bug That Can't Be Squished
February 1st, 2008
UPDATE: Squished!
Thanks to Alex providing me with a screencap of a different (yet related) bug, I was able to figure out how to fix things. Turns out that, across all browsers, resizing the window to a few specific pixel widths was causing weirdness. I hadn't noticed it before because I must not have checked the site with windows of these particular widths (except Opera, as mentioned below, whose bulky window borders must have done the trick).
I'm pretty sure the bug was a result of browsers' need to round percentage values to pixels, and at certain sizes it would round down the width/margin of the left column and round up the left spacing of the main column, creating an extra pixel in between that shouldn't have existed. Crazy.
After doing a lot of cross-browser testing, I think I've finally ironed out all of the visual bugs here save one: in Opera and some WebKit browsers (namely Safari) that nice little arrow in the top left that shows you what page you're on gets shifted left by one pixel, but only when the browser window doesn't have a scrollbar.
My solution is to just have enough content to make my top-level pages scroll on all but the most high-resolution screens, which is kind of a hack, but one I'll have to live with for now.
I'm still frustrated though because I have no idea what's causing the problem. Do these browsers have a bug in the way they calculate percentage widths when there's not a scrollbar? Is there some kind of extra padding on the window? Does the absence of a scrollbar break negative margins? If any CSS designers are reading, have you ever experienced anything like this?
Here's the relevant CSS:
#meta {
position: fixed;
margin-left: 2%;
width: 20%;
}
#meta .menu {
list-style: none;
margin: 0 0 40px;
float: right;
}
#meta .menu li {
float: right;
clear: both;
margin: 0;
padding-right: 30px;
}
#meta .menu .current {
background: url(../images/squarrow.png) no-repeat right center;
}
#content {
position: absolute;
left: 22%;
margin-left: -10px; /* move left to make up for the background image's shadow */
}