Temporary URL:

http://css.twistedmelon.com

What I had intended to be a very quick site for friend has turned into a little bit more due to browser inconsistencies and the fact that CSS was specified by monkeys. I'm still convinced that there are CSS bugs in most of the browsers even for simple things like inline-block elements.

Anyway....

The width of the content area is breaking in IE6. It comes up a little short and the right side appears as if it has no border. That's my main IE6 problem right now. I haven't given this one any cycles yet, but I was hoping someone could immediately see what the issue is in my CSS.

For other browsers the layout is generally OK but with a couple of issues. Namely in Firefox (3 and 3.5) as well as IE 8 (haven't tested 7) the width of the overall page is huge, though the presentation and flow of the content area is fine. The effect is that you can scroll the horizontal bar to move the content off the viewable window.

I know why and exactly what size these browsers are creating. I specified the top green horizontal bar as 5000 pixels off the right side and then did some adjustments to other properties to collapse it back to fit the viewport with an auto width. This is working splendidly in Safari and Chrome (both using WebKit) as well as IE 6.

The reason I did this 5000 pixel dance is to be able to have that green bar as an element that always occupies the full width of the veiwport. Without such a trick and by simply setting its width to say 100%, collapsing the window smaller than the content and then scrolling the page to the right would show a break in the bar. That's because in this case "%100" means "%100 of the viewport." IMO, this is a browser or CSS design bug, and the size of any element that's 100% should always be drawn at 100% of its container, or the render target, whichever is largest.

If anyone has any other tips on how to achieve the desired goal (not having the bar visibly chopped if a user has to scroll), then please let me know. This is one of my HUGE CSS peeves, along with being able to move stuff off the right edge of the viewport without generating scroll bars.

A perfect example of what I was avoiding can be seen on my main site: http://twistedmelon.com - resize your window width so that a horizontal scroll bar appears and then scroll the page to the right. You can see that the background is now broken.