CSS layout problems on IE

H everyone, I'm desperate for help here. I took the plunge and decided to create a completely tableless layout using CSS. So here I was coding it all on Dreamweaver and it looked just like what i'd expect it to. When I opened the html file with Firefox, it worked fine. But when I opened it using IE. OMG!!! It's gone to the dogs. Anyway, could someone please help me with my layout problem.

The site is here: http://www.infusionz.org/secymeeting

The site is actually supposed to look something like this: http://www.infusionz.org/secymeeting/secymeeting.gif

Any help is greatly appreciated.

 

Start with adding DOCTYPE to your pages. IE won't comply with some CSS rules unless DOCTYPE is set. See here for details:

http://forums.digitalpoint.com/showthread.php?t=7061&highlight=center

J.D.

 

Thanks for your advice J.D. I added the doctype and also tweaked the CSS a little. It got a little better but at a sacrifice. I was hoping you could take a look at http://www.infusionz.org/secymeeting/index1.html and compare the highlight of the navigation bar with http://www.infusionz.org/secymeeting

notice that I removed display: block; from the #navcontainer a and it does appear better in IE except for 2 things

1. I have to compromise the length of the green highlight for the navigation area

2. There's a white coloured gap under the image of the hand and the conference room which appears.

Any way I can resolve both these issues?

 

I haven't looked much into the source, but one thing about IE is that it has a bug that screws up anchors if you make a's into a block-level element (i.e. use display: block). A way to work this around is to set the width for the a element explicitly. For details see the thread 8244.

J.D.