IE8 Bug I need to fix?

**PicnicTutorials** · May 28, 2009 20:10

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!

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;
max-height:340px;
width:500px;
padding:10px;
background:#ccc;
margin:2em 0;
}	
-->
</style> 
</head>
<body>

<pre>TextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextText TextTextTextTextTextTextText</pre>

</body>
</html>

**kohoutek** · May 28, 2009 21:12

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

you could use something like this for IE8:

Code HTML4Strict:

<!--[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.

**Rayzur** · May 28, 2009 21:14

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

With a dirty hack to fix it found here.

Code:

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

**PicnicTutorials** · May 29, 2009 05:07

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!

**kohoutek** · May 29, 2009 07:15

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.

**Rayzur** · May 29, 2009 08:54

@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.

**kohoutek** · May 29, 2009 09:44

No worries at all, Ray.

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.

**PicnicTutorials** · May 29, 2009 10:09

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

**jameshopkins** · May 29, 2009 11:40

Originally Posted by Rayzur

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

Great catch, Eric. Although very similar to bug #41, I deem this to be a 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.

**Rayzur** · May 29, 2009 11:55

Thanks for the bug collection James, very helpful resource.

Way to go Eric! You made it on the list

**logic_earth** · May 29, 2009 13:30

Originally Posted by Rayzur

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.

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

**PicnicTutorials** · May 29, 2009 20:14

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...

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;
max-height:340px;
width:500px;
padding:10px;
background:#ccc;
margin:2em 0;
}	
-->
</style>
<!--[if IE 8]>
<style type="text/css">
pre{word-wrap:break-word;}
</style>
<![endif]-->
</head>
<body>

<pre>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</pre>

And see with 340px max-height!

<pre>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</pre>

</body>
</html>

**CyberAlien** · May 30, 2009 14:43

Try this with your original code:

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.

**PicnicTutorials** · May 30, 2009 16:17

Originally Posted by CyberAlien

Try this with your original code:

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.

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!

User Tag List

Thread: IE8 Bug I need to fix?

Thread Tools

Display

IE8 Bug I need to fix?

Bookmarks

Bookmarks

Posting Permissions