CSS Forum

**TWD** · 06-13-2010, 08:01 PM

To be honest I've been fairly impressed with IE8 up until now.
It seems like they managed to solve most of the IE brand's infamous
behavior.

However I just found one strange IE8 specific bug and also the
solution so thought I would post it for posterity.

Thanks to Luke at Stack Overflow for this.
I will repost verbatim.

Quote:

I have the following html page:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>A title</title>
</head>
<body>
    <table style="width: 700px; border: solid 1px green">
        <tr>
            <td style="border: solid 1px red;" colspan="2">A cell with a bunch of text.  The amount of text here increases the 'x' cell.<td>
        </tr>
        <tr>
            <td style="width: 100px; border: solid 1px purple;" >x</td>
            <td style="border: solid 1px blue;">Some sample text</td>
        </tr>
    </table>
</body>
</html>

Quote:

In all browsers other than Internet Explorer (8), the cell with contents "x" has a width of 100px, and it's adjacent cell fills the rest of the table. In internet explorer 8, it's quite a bit bigger, and it's size varies depending on how much text is in the cell with colspan="2" set. Is there a fix for this bug in IE?

The solution that worked for me (again thanks Luke)

Quote:

add style="width: 100%;" to the table cells with colspan="2" also fixes the problem.

http://stackoverflow.com/questions/2...th-colspan-set

I'll go ahead and pre-empt the usual queries about "why are you using tables instead of CSS floats, blah blah". Preaching to the converted.
But useful to know this just the same.

**LadynRed** · 06-13-2010, 08:36 PM

Also worth noting that the xml statement above the doctype puts IE into Quirks mode.

**TWD** · 06-13-2010, 10:14 PM

Quote:

Originally Posted by LadynRed

Also worth noting that the xml statement above the doctype puts IE into Quirks mode.

Are you sure about that?

I thought that was only the case if there was some HTML output to the screen before the DocType statement.

After all, it's fairly common practice to place PHP code (without HTML echo statements) above the DocType.

**TWD** · 06-14-2010, 08:49 AM

From Wikipedia. I thought it was interesting.

Quote:

...a web page which does not include a DOCTYPE at all will render in quirks mode. One notable exception to this is Microsoft's Internet Explorer 6 browser, which will render a page in quirks mode if the DOCTYPE is preceded by an XML prolog, regardless of whether a full DOCTYPE is specified. Thus an XHTML page which begins with the following code would be rendered in quirks mode by IE 6:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The above is useful to an extent as it can be used to trigger quirks mode in IE 6, but no other browsers.
Quirks mode in any version of IE will also be triggered if anything but whitespace precedes the DOCTYPE. For example, if a hypertext document contains a comment or any tag before the DOCTYPE, IE will use quirks mode:

Code:

<!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

The problem with the XML declaration was fixed in version 7 of Internet Explorer, in which the XML prolog is simply ignored.[6]

http://en.wikipedia.org/wiki/Quirks_mode

**LadynRed** · 06-14-2010, 02:42 PM

I know.. I saw that earlier. I believe IE8 will now tell you what mode it's running in. Unless you're rendering your HTML as XML and not txt, the xml declaration is rather pointless anyway.