IE Text Display issues

fenfe1 posted this at 18:15 — 23rd February 2009.

They have: 1 posts

Joined: Feb 2009

Hi,

I am designing a page for a friend.

Their design has a top section with a image to the left and a block of text to the right. He also wanted the picture and the block of text equal lengths.

So I made two divs and floated them putting both side by side. I then used the font size and line spacing css rules to make the text fit next to the picture.

This all worked great until I uploaded to his site and he viewed it in IE.

The IE version of the page has I think ignored the line height rules I put in. I have tried to find a list of unsupported css attributes, but line height wasn't listed.

There are so other formatting issues as well, for example some of the padding rules have stopped working.

I have a live version of the page available here: http://www.prodel.info/

Can anyone help with this? Its so anyoying that IE just ignores some of the rules. I thought that sticking to text would be safe, but it looks like IE messes that up as well.

Note: This page looks fine in Firefox, IE Beta 8, but NOT IE 7 or below.

Thanks, Felix.

webwiz posted this at 01:11 — 24th February 2009.

He has: 629 posts

Joined: May 2007

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

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

skrehlik posted this at 07:25 — 24th February 2009.

They have: 4 posts

Joined: Jan 2009

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

skrehlik
"never, ever, EVER question the Net Admin"
unless I'm writing a web page...