Image overlapping content in a rounded corner layout
March 17th, 2008
Every now and again, I run into a complex rounded corner layout that requires a bit of finagling with overflows, z-indices and positions. The most common case is that the image I have used for the top corner is overlapping the content within the content div.
The problem
To see what I mean, check out the demo I put together for illustration purposes. In everything but Firefox 3 beta, the top image overlaps the content within the <div class='content'> div. This behavior is pictured to the right as well.
Now your first thought is that this is a z-index issue, and you wouldn’t be far off (we’ll get to that in a moment), but the cause of the problem is the overflow: hidden attached to the .cap class. If you ditch this (we’ll use the utter magic of Firebug to accomplish this)… voilá, your content is visible. View the previous demo with overflow: hidden removed.
Is this a bug?
I’m honestly not sure what’s going on here, from a rendering standpoint. It seems like the negative margin on the .cap div is throwing off the renderer, disallowing content from being shown within the box model; that is, it’s a rendering bug. Maybe it’s a commonly known bug? I honestly have no idea; as much development work as I do, you’d think I’d keep up with the trends and bugs with their catchy names. If you know of this being a common bug, please let me know! That is… when I get the comment system up and running.
The thing that makes me wonder if this is a bug is the fact that it happens in all browsers (even the WebKit beta, which seems to be at the forefront of CSS compliance). However, it seems to render just fine in the Firefox 3 beta… so who knows? Not me.
The Fix
Now, on to a fix:
The problem for me, is turning off overflow: hidden can sometimes create its own problems. I’m thinking specifically of IE not adhering to the height: property if the height is smaller than 1em (even if there is no text in the div). In order to fix this, you must use overflow: hidden. It’s good practice if you want a div to maintain a static height, anyway. So how do we fix this and keep overflow: hidden intact?
Z-index! As far as crazy css properties go, this one is pretty reliable across all browsers. The only thing you have to remember is to make sure you put a position: attribute on the div. Z-index is completely unreliable if there is no position: attribute of the div it applies to. In most cases, position: relative; will do just fine without screwing up your layout.
In this case, I applied a z-index of 10 (anything higher than 1 is not necessary, but going overboard is fun) to the .content div, which effectively puts it on “top” of the .cap div. See this fix in action.
I know it’s not a terribly common bug, and it’s not a terribly difficult fix to figure out. However, it bugs me every so often, so I thought I’d share what I’ve learned!