What's going on with my site in IE?

**sakka** · 11-07-2006, 07:14 PM

Hi everybody! I just found this forum and so far, it looks very friendly and helpful. Nice to meet you all.

I'm not quite sure what I'm doing wrong here, and I'm hoping some eagle eyes may spot it. Here is the site I am designing http://www.ldcfl.com/design1/ and it looks just fine in Fx, but IE... the main banner is out of whack and the background has somehow gone wrong. The css is here: http://www.ldcfl.com/design1/ldcfl.css . A liquid layout is my main goal for this site, and this is the first time I have tried making it like this so... ANY help would be appreciated!!! Thank you.

**sakka** · 11-07-2006, 08:41 PM

Okay, I've actually discovered the problems with my site, but I'll post the solutions here if it may help anyone.

#1. Internet Explorer (or Firefox?) has issues reading pngs so I resaved my images as jpgs and the colors were corrected.

#2. I had to apply a slight hack to my CSS from here http://www.boutell.com/newfaq/creating/center.html That site helped me solve my centering issue.

**LadynRed** · 11-08-2006, 03:19 PM

Quote:

#1. Internet Explorer (or Firefox?) has issues reading pngs so I resaved my images as jpgs and the colors were corrected.

IE has NEVER supported transparent PNGs.. until IE 7. There is a scripting solution for IE if you just have to have PNG's.

Quote:

#2. I had to apply a slight hack to my CSS from here http://www.boutell.com/newfaq/creating/center.html That site helped me solve my centering issue.

That is NOT a "hack", it's the right way to solve the problem with IE.

**sakka** · 11-08-2006, 07:40 PM

I guess I am still a little unclear as to what is considered a css "hack", then. To me the solution seemed a little backwards, but I'm glad it worked.

**vangogh** · 11-08-2006, 08:22 PM

A hack is more when you're tricking the browser into doing something that it really shouldn't.

For example a hack I've used for IE is to use an underscore before a css property. IE doesn't understand the min-height property of css. Other browsers do. IE does treat the height property as though it were min-hieght. However since other browsers would interpret height correctly you just can't use it to get a min-height. So:

For standards compliant browsers I would have:

min-height: 500px

and for IE:

_height: 500px

IE interprets _height as height, which it treats as though it were min-height. All other browsers ignore the property with the underscore in front as they should.

That's a hack. IE should just get it right in the first place, but I'm taking advantage of a combination of things it gets wrong to get it to behave like it should have in the first place.

The link you posted above is just good css. Either way I'm glad you got things working.

**LadynRed** · 11-09-2006, 01:07 AM

In order to make IE 6 and below to comply, you should use conditional comments to target your 'hacks' instead of putting the hacks into your main css file. I now have 3 css files for every site .. iefixes.css, ie7fixes.css, and my main.css .. and conditional comments for IE6 and under and IE 7

**sakka** · 11-09-2006, 01:14 AM

That's a great idea, LadynRed, thank you for the tip!

**vangogh** · 11-09-2006, 03:32 PM

Agreed. I never used to do it, but I do it all the time now. I usually start coding a template for the site in one file. Then I pull out all the css into it's own file and then the IE specific css inot it's own file and add the conditional comments.

Then I look at all the IE specific css files I need to have in addition to the main css file and wonder when Microsoft will finally make a more standards compliant browser.