Menu
I have the following html page:
<?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> 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?
455
Ok, this is pure insanity. Ray's answer worked for the initial test, but not for my real life example, which led me to create a second test case with Ray's fix:
<?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>title</title> </head> <body> <form> <table style="width: 700px;"> <tr> <td colspan="2">Here is some really long text. For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why. Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td> </tr> <tr> <td style="width:100px; background: green;"><input type="checkbox" value="1" /></td> <td style="width:600px;">blah</td> </tr> </table> <table style="width: 700px;" border="0"> <tr> <td colspan="2">Some short text</td> </tr> <tr> <td style="width: 100px; background: red;"><input type="checkbox" value="1" /></td> <td style="width: 600px;">blah</td> </tr> </table> </form> </body> </html> For some reason, having the input elements within the first table cell makes Ray's solution not quite work.
The solution that did end up solving the real world case we were trying to fix required adding "table-layout:fixed" to the tables, and making the first row in the table have empty cells with the width's set. Here's a modified version of the previously example with the fix I just described:
<?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>title</title> </head> <body> <form> <table style="table-layout: fixed; width: 700px;"> <tr> <td style="width: 100px;"></td> <td style="width: 600px;"></td> </tr> <tr> <td colspan="2">Here is some really long text. For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why. Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td> </tr> <tr> <td style="background: green;"><input type="checkbox" value="1" /></td> <td>blah</td> </tr> </table> <table style="width: 700px; table-layout: fixed;" border="0"> <tr> <td style="width: 100px;"></td> <td style="width: 600px;"></td> </tr> <tr> <td colspan="2">Some short text</td> </tr> <tr> <td style="background: red;"><input type="checkbox" value="1" /></td> <td>blah</td> </tr> </table> </form> </body> </html> Really Internet Explorer??? REALLY?
181
Here is my result for failed td width in IE8:
<table style="width: 100%;" border="1"> <tr> <td style="width:auto;">td1</td> <td style="width:15px;">td2</td> <td style="width:20px;">td3</td> </tr> <tr> <td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td> </tr> </table> <!-- IE8 HACK 100% WIDTH --> <table style="width: 100%;" border="1"> <tr> <td style="width:100%;">td1</td> <td style="width:15px;">td2</td> <td style="width:20px;">td3</td> </tr> <tr> <td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td> </tr> </table> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
