What more does IE need to draw this CSS like Firefox?

November 21, 2006 2:47 AM

CSSFilter: Why won't my border divs fill in IE 7 as they do in Firefox? Why won't my bordered area stretch in IE either?

I've got a few compatability issues with the site I'm designing for my WoW guild (cheesiness intentional!):

http://home.comcast.net/~cowbellemoo/PerfectEulogy/test.html

In Firefox (2.0) and Safari, the borders and content area fill and stretch as desired, but not in IE 7. I can see the little start of the content area borders, but they don't behave the way I expected in IE. Also, in IE the content area seems to have a fixed width even though Firefox interprets my CSS correctly and stretches to the 90% edge on the right side.

As you may be able to sus from the code, the main content area (the black box) should start at the (10% + 230px) line......it will stretch like everything else, but skip the scroll menu area. I've done this by assigning 'left' and 'left-margin' attributes. This seems to work fine. But the right value (it should stretch to fill the rest of the page and stop 10% from the right edge) seems to be a little trickier. Using only the 'right-margin' attribute leaves a gap where text wraps in Firefox. What would be making the width fixed in IE where Firefox stretches that content area? The borders I'm at a total loss about...seems like it would be a simple fix though.

Any ideas?

posted by cowbellemoo to Computers & Internet (10 answers total)

Welcome to the joy of web monkeys worldwide, the magical box of chocolates known as Internet Explorer.

You never know what you'll get.
posted by rokusan at 2:49 AM on November 21, 2006

Meta note: you want help with your site (or to show an example)? Link to it, don't just give me a url I have to copy or paste. You're much likelier to get an answer if those of us answering can just click.


Questioner's example: http://home.comcast.net/~cowbellemoo/PerfectEulogy/test.html
posted by orthogonality at 4:39 AM on November 21, 2006

Best answer: In addition to rokusan's advice, learn to use conditional commenting to write IE-specific style declarations. This way you can address IE 6 and IE 7 bugs without compromising your existing work. Straightforward demo via Quirksmode.
posted by ardgedee at 4:49 AM on November 21, 2006

Best answer: You should add a doctype to the top. IE is in quirks mode because it doesn't know what the document is. Also, validate your code and then see if things work ok.
posted by disaster77 at 9:30 AM on November 21, 2006

CSS positioning sucks. Just use table layouts... when done cleanly and properly, they're 10 times easier and more consistent, even tho they will cause the the web standards Gestapo to scream in outrage.

About only thing CSS is consistently useful for is font control. This was also true five years ago, and amazingly it's still true today.

I've been wrestling with adapting a CSS-based blog layout to my needs for the past week. After dealing with horribly unreliable margin and padding properties (and the fun of a stylesheet that scatters and obscures the controlling styles of different elements), I stuck the main layout into a table today. Now it's behaving exactly as I want it to, and in all browsers.

I am just about convinced that CSS positioning is nothing more than a plot to intentionally make web layouts more convoluted, confusing, and bloated, so that only l33t web developers can understand them.
posted by Artifice_Eternity at 2:05 PM on November 21, 2006

I have found precisely the opposite. Your mileage, of course, is bound to vary.

But it's a poor workman who blames his tools.
posted by stavrosthewonderchicken at 4:13 PM on November 21, 2006

But it's a poor workman who blames his tools.

Hey, if you prefer a technology that behaves inconsistently between browsers, and requires headache-inducing and time-consuming (and money-consuming) forked code to compensate, have at it. I'll stick with the easy-to-code, easy-to-edit, proven cross-platform-consistent solution.

I'm not "blaming my tools", I'm blaming the tools who insist with moralistic fervor that using table layouts is WRONG. I find that attitude insufferable and bizarre.

The great thing about the web is that you can do whatever you want with the underlying technologies. Tim Berners-Lee or Jakob Nielsen or whoever may be offended by my using HTML tables to present something other than "tabular data" strictly defined*, but I could care less.

(*Isn't an array of images, text, and transparent gifs "tabular data"?)
posted by Artifice_Eternity at 8:14 PM on November 21, 2006

Alrighty, then.
posted by stavrosthewonderchicken at 10:20 PM on November 21, 2006

Response by poster: Heh everything else in the web world I've accomplished with a table, this is really my first stab at CSS. I was quite happy with the result, though, since it was alot less fuss than working with a sliced up image (the resizability of the page layout to accomodate large images was why I didn't just make it a fixed-width table).

I'm going to try to sneak in an alternate IE layout using those conditional tags. Thanks for the advice, all.
posted by cowbellemoo at 6:17 AM on November 22, 2006

Response by poster: Just for the archive: All of the IE problems disappeared when I inserted a HTML 4.0 Transitional doctype tag. Yay!
posted by cowbellemoo at 9:48 PM on December 4, 2006