For those of you reading this on Firefox, you’re caught in the middle of another ugly CSS rendering failure. I don’t know whether IE, or Firefox is rendering the standard incorrectly. I believe it’s Firefox, though.
My stylesheet is composed of three panels, as follows:
- Rendered first: Left sidebar, fixed size, floats left.
- Rendered second: Right sidebar, fixed size, floats right.
- Rendered third: Center panel, variable size, floats right.
Are there any CSS geeks out there who might have an idea why the third panel renders below the page on Firefox, but not IE?
Alec Saunders is the Vice President of Developer Relations for BlackBerry make Research in Motion. This is his personal blog, with his personal viewpoints. Prior to this Alec was the CEO and co-founder of Calliflower — the easiest way to hold a meeting, online, on a conference call, or on the go. A double-decade veteran of product management and marketing, he spent nine years at Microsoft where he helped launch Windows 95, the first two versions of Internet Explorer, the Universal Plug and Play initiative, the push into home markets, opt-in email marketing and what might well go down in history as the very first direct email list ever.
{ 3 comments… read them below or add one }
That's a very common problem. Many of the Blogger.com templates had this problem, except that it worked in Firefox and not IE. The problem is that your page is fixed sized, the left and right sidebar are fixed, but the center is not. I noticed you commented out the size of the center pane. Was that in trying to fix it? Or was that what broke it? Try a small value if possible.
That broke it on IE, but on Firefox it worked. I'll try the small value.
IE will often expand the sidebars as needed, the likely reason why it brok in IE. Make certain they (the sidebars remain fixed) remain fixed size.