[4.1 B2] Panel with an unterminated tag messes up layout in IE8

**slemmon** · 29 Jan 2012 7:45 PM

REQUIRED INFORMATION Ext version tested:

Ext 4.1 rev B2

Browser versions tested against:

IE8
FF5 (firebug 1.8.1)

DOCTYPE tested against:

strict

Description:

Having an unterminated font tag "<font>" in the HTML body of a panel messes up the layout in IE. It's messed up on both the file system or on a Windows 2008R2 webserver, but it's messed up slightly differently. Works ok in FF5 and works ok with 4.0.7 in all environments. I realize this is probably fixable on my side by closing out the font tag, but I'll be trying to drop 4.1 into an existing project that someone else built and am trying to mitigate any out of the box upgrade issues possible.

Steps to reproduce the problem:

Make a panel with html: '<font>'. I tried to find other tags that would break the layout and didn't see any during testing, though I just test a handful.

The result that was expected:

A panel laid out with no layout issues (as if there was no html property at first glance).

The result that occurs instead:

The panel is shifted down about 20px. On the file system the bottom border is missing and the panel title is shifted down by about 1 pixel.

Test Case:

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=iso-8859-1">
    <title>Tabs Example</title>
    <!-- Ext includes -->
    <link rel="Stylesheet" type="text/css" href="../../ext4/resources/css/ext-all.css" />

    <!-- <script type="text/javascript" src="../../ext4/ext-all.js"></script> -->
    <script type="text/javascript" src="../../ext-4.1.0-beta-2/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">
    Ext.onReady(function () {
        Ext.widget('panel', {
            title: 'Open Tag Panel'
            , renderTo: Ext.getBody()
            , height: 200
            , width: 200
            , html: '<span>'
        });
    });
</script>
    
</head>
<body>

</body>
</html>

HELPFUL INFORMATION Screenshot or Video:

attached

See this URL for live test case: Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

WinXP Pro

File System example
panel_open_font_tag_file_system.PNG

Windows 2008R2 webserver
panel_open_font_tag_web_server.PNG

**mitchellsimoens** · 30 Jan 2012 1:07 PM

This technically isn't an Ext JS bug IMO... your HTML is invalid

**slemmon** · 30 Jan 2012 1:15 PM

Yeah, I thought about not even posting this. Last week I inherited an existing application running on Ext 2.2 and was working on porting it to 4.x. It was working ok on 4.0.7 so I tried loading up 4.1 B2 and started just picking off issues as I found them. Don had mentioned that he wanted to make sure that everything that was working in 4.0.x was working ok in 4.1 so figured I'd post since the same html was working without incident in 2.2 and 4.0.7.

But, I'm good closing this one. Buggier than 4.0.7, but not a bug.

[4.1 B2] Panel with an unterminated tag messes up layout in IE8

Thread Tools

Search Thread

Display

[4.1 B2] Panel with an unterminated tag messes up layout in IE8

[4.1 B2] Panel with an unterminated tag messes up layout in IE8