IE cuts off the List Items

until I refresh or scroll

[Khemikal]

So I'm finishing off a site...everything is coming out gravy....validates, etc, etc. Then I happen to notice on one page where I have an unordered list, the bottom of the list cuts off...until I scroll down or refresh the page...then it appears in its entirety as it should. The list renders fine in NS/Moz/Opera...any suggestions?

Thanks,

Khem

[tedster]

If you are using a CSS layout, this could be related to the infamous IE Peekaboo Rendering Bug [webmasterworld.com]

[Herenvardo]

this could be related to

Maybe you're right, but it would be more useful to give a solution than to tell the where the problem is ;)

until I scroll down or refresh the page

I supose you could solve it with some kind of script (js, asp, php, or the language you prefer) that automatically refreshes the page. The script will also need a variable to control if the page has been already autorefreshed.

fine in NS/Moz/Opera...

the script could also check the client browser identification.
You might use an algo like that:

var refreshed;
if (NOT refreshed AND browser="IE") then
refresh();
refreshed = true;
end if

Depending on the scripting language you choose, the implementation may differ a little. Take care that refreshed[i] should be a session variable: you need it to keep its value when you refresh the file.
Also, the condition [i]browser="IE" is something abstract. A good way to check if the browser is IE would be to search in the browser-name string the word "Microsoft". Once again, the way to get the browser-name string and to parse it is language-dependant.
If you need further help, do not doubt to ask for it ;)

Hoping be useful,
Herenvardö

[isitreal]

I had a similar problem with floats and background/borders with IE windows on a new site I'm doing, and the thread tedster pointed to had the solution to the problem, although of course, this being CSS, that solution created another problem.

After some testing, I ended up using the IE conditionals:

<!--[if IE]>
<style type="text/css">
#container, #floated-item {position:relative;}
</style>
<![endif]-->

Note that neither of these were the things that were misbehaving, and making only one of the items position:relative did not fix it. The border/background problem was in a div in the container div, and the floated item is outside the container div in the document flow.

[Herenvardo]

using the IE conditionals

I would normally hate using non-standard code... but it's of course a great solution to solve this case! ;)
What a better form of knowing if the browser is IE than asking directly to it in IE's own language? ;)
Simply good.

Herenvardö

[lorax]

Maybe you're right, but it would be more useful to give a solution than to tell the where the problem is

The link tedster provided does include a suggested fix.

[isitreal]

The link Tedster provided did provide resources to find almost all the answers to this problem, as noted, and also showed the source of the problem. Once you know the source, it's fairly easy to find the solution(s)

I stopped using the conditionals and put the code on the css page itself, using some ugly css hacks:

/* hide from ie mac \*/
* html #content, * html #menu, * html .floatRight, * html .floatLeft {position:relative;}
/* end hack */

This provides an equivalent functionality to putting the IE conditional on each page : if IE (in other words, it activates only for IE's that can read it, I believe 5x and 6, and only on windows IE's. Read more on the peekaboo bug here [positioniseverything.net]

The peekaboo bug is really serious, I hadn't run across it as a serious display problem in IE before my last site, and some of the fixes make it even worse, by the way, until you find the right combination. It manifests in a few other ways too that I didn't see documented, with borders/padding, on a:hover, very strange, makes me wonder increasingly if using floats is really worth it in many cases. The fixes need to be escaped for MSIE windows since they will break other browsers in some cases, test carefully.

The line-height hack makes it too difficult to keep track of the document display in the cascade, I didn't test the setting p height to 1px for IE, that might be the best solution.

The ironic thing was I was using positioned CSS when my first instinct was to use a 2 columned table, but I decided to keep plugging away at the positioned CSS since it's the only way to learn all these bugs and hacks, had I used the table my time to get the page fully stable would be about 20 times less, literally, or more, it gets hard to estimate after a while.