pre inside li: fixing formatting in Chrome and IE9

0
votes

I have this html:

<!DOCTYPE html>
<html>
<head>
<style>
pre {
    overflow: auto;
}
</style>
</head>

<body>
<ol>
<li>
<pre>some
 code code code code code code code code code code code code code code code code code code code 
code code</pre></li>
<li><pre>some more code code code code code code code code code code code code code code code code code code code code code</pre></li>
</ol>
</body>
</html>

The intent is that this will result in a numbered list of preformatted bits of text. And that scrollbars will be added when these bits of text are very long, by way of the overflow: auto;.

This works fine in Firefox 20. However, in IE9, the preformatted text is shifted down one line (so each item now takes two lines, one for the number and one for the preformatted text). And in Chrome the formatting is correct, except that the numbers don't show up.

I tried changing to overflow: scroll, to no avail. Also tried changing the doctype to <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> to no avail.

The issues go away in both Chrome and IE9 when you take out the overflow: auto;, but then you don't get the scrollbars anymore, which is critical to me.

Is there a way to make this show correctly not only in Firefox, but IE9 and Chrome as well?

1
htmlcross-browserhtml-listspre
I'm unable to reproduce this issue in Chrome or Internet Explorer (8, 9, or 10). Are you positive that you don't have any abandoned tags? dirtymarkup.com && validator.w3.org – isaacparrot
After some experimenting, I found the problem is being caused by overflow: auto or overflow: scroll. I edited my initial question to reflect this. – user1147862
Did you come to a solution? I now have the same behaviour with Chrome 33.0.1750.152. The only way to work around this is to prefix the pre element with additional flow-content (or to disable overflow:auto)... – DMKE

1 Answers

0
votes

add an empty pseudoelement before every li

li:before {
content: "";
}