Really weird little CSS bug/feature in IE

[webado]

Please check these 3 pages out:
http://anysite.webado.net/test-section4-italic.php
http://anysite.webado.net/test-section4.php
http://anysite.webado.net/test-section4-some-italic.php

The only difference between them is that the first one has 2 paragraphs italicized by using .. inline.
The second one has no italics, and the third one has italicized portions at either the start or end or a paragraph, but not a whole paragraph.

In FF they all show up ok.

In IE the presence of a fully italicized paragraph somehow adds a little bit of extra padding along the right side of the display. I almost missed it at first.

There is no style for defined in my css file. Why should there be some implicit padding occurring on the right which IE throws in?

What's there in

... [/i]</p> to add that padding?

[webado]

Wow! Google it and here it is: http://www.positioniseverything.net/...licbug-ie.html

So I added the Holly Hack

overflow: visible;
height: 1%;

to the style for p in the div id #main-text and that fixed it!

[jonra01]

I found the same thing. Good eye on that. I learn something new every day. Of course, it's the same old IE box problem that shows up with padding properties. The strange thing is that it happens even with a valid dtd specified.

[webado]

LOL! I never expected in a million years to even find a reference to the error, let alone a fix! Bless Google!

What helped is that I managed to isolate the bit of content that triggered it, and it was so devoid of fancy stuff that the only thing had to be the presence of italics.

They do say it's when justified is used or otherwise the text fills up the line fully - and only some fonts cause this (my guess: proportionate fonts). The width of letters in such fonts isn't uniform and the browser doesn't realize that the italics style changes the proportions ever so slightly and doesn't compensate.

Oh, well, I wonder if this may fix other bugs I've had elsewhere that I've sort of compensated for by other means. Except I'm not likely to find them any time soon.

[jonra01]

That was a really good in-depth page on the subject. I've bookmarked that site for future use.

It looks like there were several factors that caused this to show on your page. The italics and justified, as you mentioned, and then the amount of text - a whole paragraph - and the lack of any width setting for the containing element(s).

That's an interesting way to lay out the page - using fixed margins and variable header and content area. I'm not sure I like that method. I prefer a layout that uses percentages for margins and content or fixed width for the content and auto margins. Using width settings for the content helps to avoid problems like this or, if they crop up, at least allows easy fixes.

If you had a width set for #maintext you could have just applied 'width:98%" to the p tags and fixed the padding problem.

[webado]

Briefly tried something like that just for the p tag and it overflowed to the right, as it wouldn't stay contained.

The reason why I think I cannot sue percentage width for the mid section of the page is the presence of those 2 left and right graphic columns, which basically say the width has to eb what's left of the screen after you take out those 2 graphics which are fixed in size (otherwise they lose their allure).

Had I started out differently probably I'd have been able to contain things a lot better.

I may still change things, as I find solutions.

I am not happy that when the window width goes below 800 pixels my main article text (in the news section) drops below and doesn't even stay contained in the space below, it moves over to the left with a wide pink margin.

I would actually like to contain the page width to 800 minimum, let it scroll horizontally if it gets below that.

Can I use an clear image of 800 pixels in width somewhere?

[jonra01]

Originally Posted by chrisooc

Briefly tried soemthing like that just for the p tag and it overflowed to the right, as it wouldn't stay contained.

The rason why I think I cnanot sue percentage width for the mid section of the page is the repsence of those 2 left and right graphic columns, which basically say the width has to eb what's left of the screen afert you take out those 2 graphics which are fixed in size (otherwise they lose their allure).

Had I started out differntly probably I'd have been ale to contain things a lot better.

I may still change things,as I find solutions.

I am not happy that when the window width goes below 800 pixels my main article text (in the enws section) drops below and doesn't even stay contained in the space below, it moves over to the left with a wide pink margin.

I would actually like to contain the page width to 800 minimum, let it scroll horizontally if it gets below that.

Can I use an clear image of 800 pixels in width somewhere?

I see you've been working on it. Looks good and works perfect. You could force the width by using a clear image, but it would be a pain with the way you've got this page set up right now.

[webado]

Tried the clear image. It didn't work. On to plan k now