I'm running IE 7 with the

skrehlik — Tue, 24 Feb 2009 07:25:50 +0000

I'm running IE 7 with the latest patches from MS loaded as of yesterday on a clean load of Vista.

The page displays fine in both 1680x1050 and 1440x1050 with the browser in full screen. That's an awful lot of real estate for the browser to use though.

That being said, I'll agree with 'webwiz' since I've had similar issues drive me nuts on my own site. I ended up building everything in px dimensions with a set width of 800px for all elements to get the header and header text aligned correctly in most browsers (IE 6 & 7, Firefox, Safari).

As far as it being an IE 7 issue, I can't see anything wrong with it except, IMHO the footer being to close to the body by maybe a line break.

Happy Coding,
Skrehlik

For once, I don't think it

webwiz — Tue, 24 Feb 2009 01:11:51 +0000

For once, I don't think it is entirely IE's fault. You have a mixture of lengths that simply do not play well together. The width of the body element is defined in EMs; the width of the columns in percents; and the image in the left column is in pixels, which may or may not fit. (It is 5px wider in Firefox at "medium" text size.)

Your attempt to fix the text size on the right column is bound to fail. While the 14px font-size may be fixed in IE 6 and 7, it can be changed in most other browsers. It can be changed in IE as well, though not as easily, so using pixel font sizes is considered a hostile act.

FWIW - Browsers differ quite a lot in how they treat a pixel size line-height. Better to leave out the units and just use a number.

Note, too, that the "medium" font-size in IE is 20px on my IBM laptop, not 16px, as IE compensates for the smaller "dots" on the high-definition screen.

From looking at your page with the IE Debug Bar, IE seems to be applying your rules just fine as far as line-height and padding goes. Margins in IE differ quite a bit from other browsers though. H1 has a top margin of zero, for example.

Expect some quirky behavior from IE 6 when you give elements dimensions. The browser applies a quaint behavior called "hasLayout" when you do that -- a source of a fairly large number of bugs.[1]

I think your design calls for a pixel based layout. If you simply let go the idea of fixing the text size to fit a fixed area, and let the text stretch down as far as it needs, you'd have more chance of success. As I have tried to indicate, text on the web comes in all shapes and sizes, and your visitors have the means and the right to change it to their own preference.

Best wishes and good luck.

[1] http://www.satzansatz.de/cssd/onhavinglayout.html