IE8 Bug I need to fix?

HTML & CSS
1

IE8 Bug I need to fix? All other browsers are fine. I just noticed that IE8 is fubaring some of my code examples. All my code examples go into a pre with a max-height of 340px and a width of 500px. But whenever the code exceeds the 500px width (even if it’s only one line tall!), it blows out the pre to it’s max height of 340px. Here is some code to test if you’d like. I tried for about twenty minutes trying different things to no avail. Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Testing</title>
<style type="text/css">
<!--
pre {
display:block;
border:#000 solid 1px;
overflow:auto;
max-height:340px;
width:500px;
padding:10px;
background:#ccc;
margin:2em 0;
}	
-->
</style> 
</head>
<body>

<pre>TextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextText TextTextTextTextTextTextText</pre>

</body>
</html>
2

Hmmm…I think that is because max-height is treated as height here.

you could use something like this for IE8:


<!--[if IE 8]>
<style type="text/css">
   pre {
         max-height: none\\9;
   }
</style>
<![endif]-->

Here’s some explanation.

It’s a nasty fix and I am not sure it is recommended though.

3

Hi Eric,
It’s #41 on this bug list.

With a dirty hack to fix it found here.

<!--[if IE 8]>
<style type="text/css">
pre {max-height: none\\9  }
</style>
<![endif]-->
4

Uh - Thanks Ray and Maleika! As you mentioned, I also tend to shy away from hacks like that (Usually I’d rather cut my nose off despite my face). Maybe I’ll just let IE8 look bad. Do you guys know what what the none/9 are doing - is there any rhyme-or-reason to that - or just a lucky hack? Thanks!

5

I admit I haven’t a clue, Eric which is why I’m not sure whether or not this is a good idea. Well, hacks are rarely a good idea, but I haven’t come across a cleaner workaround when searching for this particular bug.

You could just leave it as it is (without the hack) or perhaps you could remove the max-height for a more consistent layout for all browsers.

6

@Maleika
Sorry, I didn’t mean to repeat the same answer as yours. It looks like I was 2-minutes behind you and I didn’t refresh my tab.

Do you guys know what what the none/9 are doing - is there any rhyme-or-reason to that - or just a lucky hack? Thanks!
Eric I would have to say that belongs in the lucky hack with no rhyme or reason category.

I like the comment at the bottom of the page of Maleika’s link.

So you thought Internet Explorer 8 wouldn’t cause extra work?
Think again…

Just the other day I was saying how impressed I was with IE8, not so sure now. Why in the world are they having regressions into bugs that were not even in IE7.

7

No worries at all, Ray. :slight_smile:

I, too, was quite baffled by the amount of bugs in IE8. But still, it’s better than the previous versions for most things anyway.

8

Thanks for your thoughts guys. I think I’ll just let IE rot on this one then.

9

Great catch, Eric. Although very similar to bug #41, I deem this to be a [URL=“http://idreamincode.co.uk/ie8-bugs#overflow-maxheight”]new bug since the conditions are different, although the incorrect behaviour of ‘max-height’ is of course the same. Since you’re the first person I know of to spot it, I’ve credited you with the find.

The main difference with the bug you spotted is that ‘overflow:auto’ can be a trigger only if a ‘width’ value (other than ‘auto’) is set; in the original bug, ‘overflow:auto’ wasn’t a condition under any circumstance.

10

Thanks for the bug collection James, very helpful resource. :slight_smile:

Way to go Eric! You made it on the list :tup:

11

Why is Firefox 3 having regression bug not even in Firefox 2?
Software is made by humans, humans are imperfect, imperfect has flaws.

12

I’m still trying different things. I think I found a better alternative/hack/work-around for this bug. While the already mentioned hack does remove the blowout height, it also removes the max-height. So if I was displaying a lot of code, my pre (in IE8) would be very tall and not limited at all. So this may be a better alternative depending. Still not content with it though. I will continue to experiment…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Testing</title>
<style type="text/css">
<!--
pre {
display:block;
border:#000 solid 1px;
overflow:auto;
max-height:340px;
width:500px;
padding:10px;
background:#ccc;
margin:2em 0;
}	
-->
</style>
[B]<!--[if IE 8]>
<style type="text/css">
pre{word-wrap:break-word;}
</style>
<![endif]-->[/B]
</head>
<body>

<pre>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</pre>

[B]And see with 340px max-height!
[/B]
<pre>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</pre>

</body>
</html>
13

Try this with your original code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Testing</title>
<style type="text/css">
<!--
pre {
display:block;
border:#000 solid 1px;
overflow:auto;
width:500px;
padding:10px;
background:#ccc;
margin:2em 0;
}
pre, #ie8#fix {
max-height:340px;
}	
-->
</style>
</head>
<body>

<pre>TextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextText TextTextTextTextTextTextText</pre>

</body>
</html>

What that will do is will force IE8 to ignore max-height because of bug #23 from bugs list linked in 3rd post of this thread.

14

Hi, thanks for trying!

While that does work like the original hack, it also makes ie8 loose it’s max-height.

I worked on it again this morning for awhile and went through all the rules trying to find that elusive display inline. No luck!