This is a good ol' "works in FF but not in IE" thang

http://quebec4x4.com/new-index.html

It look like crap in IE6 and "off" in IE7 and I've tried countless things but I still can't get this to work.

Both sidebars' width should stay at 204px while the content stretches.

If anyone can give me a hand with this and help me figure this out?!

I have encountered this problem before...
That's what you get when you play margin with a negative value

Unfortunately, your site crashes my ieTester in ie6. It's stable in IE7, but I can't see the problem; the Adsense box overlaps the right column when the screen gets narrow, but this happens in Firefox too.

Before you do anything else, I suggest you validate your XHTML. You have a bucketload of errors; it's hubristic to blame IE before you've fixed them.

...although we both know that, after validating, you'll almost certainly be left with some IE bugs. Still, this is the logical way to approach your bug-hunting.

I brought the errors down... 99% were about &, img not />, alt="" missing, etc.... a few </span> that shouldn't have been there but nothing major.

So... does anyone have any idea on how to fix this?

Most of us forget to utilize Google when we are faced with Web authoring problems. There are excellent resources available via:

http://www.google.com/search?q=three+colum...lient=firefox-a

I think it is very important to thoroughly understand the "Box Model" before embarking on mutii-column fluid/flexible layout designs -- particulalry the infamous "IE Box Model bug" (don't you just love IE?):

http://www.google.com/search?q=box+model&a...lient=firefox-a

One general rule -- set the total horizontal box width at less than 100% (say, 99 or 98%) in order to accommodate the IE Box Model margin "quirk" -- if you use 100% the right column will often drop below the center box as is evidentally happening to you at present.

My Portal page (sig block) utilizes a three column, floated left, layout.

James

hmmm .... yes... if you look at the code you'll notice that my #content has a width of 90% .... hardly breaking the box-model there.

So... anyone else can have a look at the code and gimme a hand with this?

You are using several deprecated Attributes such as "name", "target", etc. (and incorrect ones) with an XHTML 1.0 (strict) Doctype -- as usual, initial corrections may cascade and eliminate succeeding errors.

James

I'll take a look...

Sorry, I neglected to check your CSS code -- let me wade through the negative value constructs.

James

Question...
you have a left div, outer div and right div. In the outer div sits the content div.

Could you float the left div left...
relative position the content div at 204 px from the left and follow that with right div floated left?
Change the width of the content div to 90% and eliminate the outer div all together?

I think it would be easier to "hack" for ie6 that way.

Much better: now you've reduced the errors, my IEtester no longer crashes.

Okay, the main IE6 error I can see is that the site is waaaaaaaaaay too wide. This normally happens to me with IE6, and I just fix it by applying a fixed width to the site, or to main container elements (all inside IE6-only conditional comments, of course).

You could waste your time trying to hack this "properly", but why not just butcher the layout a little for IE6? Fluid --> fixed (~ 950px width). Simple.

Your non-IE6 visitors will still get the fluid layout.

Here is the excellent W3C CSS Three Column Layout Tutorial: http://www.w3.org/2002/03/csslayout-howto

I use a three column float-left CSS layout which has the advantage of flexible/fluid full screen display in all graphical Browsers including IE6.

James

Don't you get the horizontal scrollbar in IE7? I get it on my hubby's computer (since I'm on a mac now )

I would say that 95% of this clients' visitors are IE so ... it needs to work

Yes, I do. Not sure how I missed that...



Sure, but does it need to work perfectly? Is it important for the layout to be fluid in IE6?

Probably not... Ugh! It's just that it works on my other sites .... what am I doing wrong with this one?!

I wish I could find the bug for you, but I'm not going to attempt a full-blown IE bug-hunt.

Here are some general ideas, which you may already have thought of:

• Try some magic bullets, just to see what happens
  • Trigger hasLayout for important containers
  • Apply { display: inline } to floats
  • Overflow: hidden on containers
• Look at your previous layouts, and try to spot what's different
• Create a minimal test case (this is a last resort, but always works)
  • Remove as much content and code as possible, while keeping the bug
  • If you suddenly fix the bug by accident, you can try analysing the code that you just removed
  • Eventually, you will be left with a skeleton web page, which is the simplest possible instantiation of the bug
  • Fix the bug in the minimal test case
  • You can then try applying the fix to your full web page
  • If that doesn't work, gradually add back code to your minimal test case and look for the point where the problem recurs

Minimal test cases have never failed me, but they are extremely tedious to create.

...or you could just live with a fixed layout.

HAHAHA!!! I don't blame you! Some are just a pain in the --- and take too much time

I'll give your suggestions a go Wish me luck

...and with IE bugs, you never really know how long they'll take to fix. IE6 in particular defies logic.



Good luck! I'll be there in spirit, hitting IE with a big hammer.

How are you making out with this Karinne?
I saw this tutorial online today and thought it might be helpful!
http://matthewjamestaylor.com/blog/perfect-3-column.htm