CSS Issues Firefox vs. IE

After reading Eric Meyer’s post, Reworked Reset, and it’s predecessor, Reset Styles, and his follow-up explanation of some of his choices, Reset Reasoning, I thought I may have a clue as to my troubles with the new template design. I should have known all this, but having been rusty in doing original design work, I had forgotten this basic practice. Learn it now! It will save your sanity someday.

However, my problem remains with the IE weirdness. The reset CSS made a few things more consistent, but the strange desire for IE to want to position itself differently is still unexplained. The post overlaps the tabs, and the sidebar seems to be intermittent.

I think I just found a clue! In looking at IE, I realized it’s default page looked strange… the graphics were all jaggy, like they had been enlarged improperly. I thought about it a minute, and decided to check my screen resolution settings. While the screen is normally at 1600×1200 (it’s a 20″ flat panel), the dpi resolution was set at 125% or 120dpi for larger fonts! I’m suspecting that the jaggy images was being caused by this. I’ve reset it, but it needs a system restart to enable, so I’m going to pause here and do that so I can report my findings… hang on!

Oh, well. Restart didn’t help… the fonts were already more normal sized before the restart, but the graphic problem was fixed at least. My overlap problem remains:

[image no longer available.]

Must be something else in IE that is effecting it. This will be one of those battles I don’t want to fight, but can’t ignore. It’s just too obvious, and my target audience is expecting perfection. Or at least nothing as obviously wrong as this. I can live without the rounded corners, but not this. It is a functionality issue also, as it is difficult to get to the tab links. We’ll dig into this first thing in the morning with a fresh cup of coffee in hand!