IE7 css problem

[netadmin]

I am working on a new template for my school's website.
It looks nice in IE6, but awful in IE7. I have tried a few things, but nothing has worked.

The problem is that the center CSS main area (where all the main text is) does not auto change the height in IE7, like IE6 does. Part of the left hand navy column also does not auto change the height (in IE6, it goes all the way to the bottom of the page, like it needs to).

If anyone has any ideas, I'd GREATLY appreciate it! I am stumped right now.


If you want to take a look, here is the webaddress (Add http to the beginning):

claridenfundraisers.com/tcsweb2

and here is the css file:

--DELETED--

[_Bat_]

It also has the same problems in firefox. Not sure why though, I -hate- cross browser compatibility issues, i'm still trying to iron out mine.

[mark]

Your #content height is what is defining the bottom mis-placed border - remove 'height: 600px' to see what I mean.

It also left justifies in Firefox.

Sorry I don't have IE6 here to try 6 & 7 together. It'd be more helpful to post small screen shots I think.

IE6 is badly un-compliant re web standards, and IE7 isn't much better, due, I think, to MS trying to keep backwards compatability with poorly coded IE6 sites.

[_Bat_]

IE6 is badly un-compliant re web standards, and IE7 isn't much better, due, I think, to MS trying to keep backwards compatability with poorly coded IE6 sites.

Heh... i'd say IE6 and IE7 together have caused me about 12 hours worth of troubleshooting. At least IE7 supports transparent PNG files... if IE6 did, I wouldn't have had half the problems with my site as I am having now, as I installed a very dodgy PNG work around script (removing it is not an option as the GIF versions of the images just weren't good enough). Out of the four browsers I tested my site in, firefox and opera both passed without issue... IE6 and IE7 both failed... go figure.

[netadmin]

I tried taking out the height tag from #content, no luck

I am posting screenshots from IE6 and IE7. Sorry they are different resolutions (the only computer I have IE7 installed on is a new Vista laptop we just got, and it is a lot different resolution from my desktop computer).

[mark]

It fixes it for me in firefox and IE7 claridentech. Attached is the modified file.

[netadmin]

Thank you so much for your help, everyone (especially Mark). I uploaded the revised style tags and everything works perfect in both IE6 and 7 now! Thanks!

[netadmin]

OK, I thought it might be a good idea to install Firefox and test my site in it, since several of you said the alignment is left, rather than centered, like it is supposed to be.

I tried a few alignment tweaks and was able to get it to move over in Firefox, but then it also moves the already centered IE design to, making it too far to the right.

Anyone have any ideas on this? I am fairly new to CSS, until recently I had never used CSS for any of my sites.

[mark]

Try this:

Change this line:

#margin {width: 790px; text-align: left; align: center; }

to this:

#margin {margin-left: auto; margin-right: auto; width: 790px; text-align: left}



The top border to the #content is missing in FF too - you need to add border-top: 3px solid navy;

[netadmin]

Thanks again, mark! Everything now appears perfectly in all browsers.

[mark]

Any time

[webman]

#margin {margin-left: auto; margin-right: auto; width: 790px; text-align: left}

You can consolidate that even further:

#margin{ margin:0 auto; ... etc}

Top and Bottom is 0, Left and Right is auto.

[mark]

cwl

[netadmin]

OK this is odd now. My page text displays perfectly in Netscape and Firefox, but the left margin in not lined up properly in IE6. This is just a normal space in a sentence, no special formatting used.

Attached are two screenshots.

If anyone has any ideas on this, I'd be very happy
Luckily, I am starting to figure out how to fix CSS problems, but I am still a ways from really understanding CSS entirely.

[webman]

That looks like the old 'IE6 Three Pixel Gap'.