HTML bug …

19
HTML bug … intended page actual page! target.html error1.html

description

intended page. actual page!. . error1.html. HTML bug …. . target.html. lots of code!. . error test Page Heading

Transcript of HTML bug …

Page 1: HTML bug …

HTML bug …• intended page • actual page!

target.html

error1.html

Page 2: HTML bug …

lots of code! <html> <head> <title>error test</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <p>Page Heading</p> <table border="2” bordercolor="#FF0000 " cellspacing="0" cellpadding="12"> <tr> <td>A</td> <td>B </td> </tr> <tr> <td>C</td> <td>D <table border="2” bordercolor="#000099 " cellspacing="0" cellpadding="12"> <tr> <td>Da</td> <td>Db</td> </tr> <tr> <td>Dc</td> <td>Dd</td> </tr> </tabel> </td> </tr> <tr> <td>E</td> <td>F</td> </tr> <tr> <td>G <table border="2” bordercolor="#000099 " cellspacing="0" cellpadding="12"> <tr> <td>Ga</td> <td>Gb</td> </tr> </table> </td> <td>H</td> </tr> </table> <p>More text after the table</p> </body> </html>

error1.html

Page 3: HTML bug …

remove early bits

<html> <head> <title>error test</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <p>Page Heading</p> <table border="2" bordercolor="#FF0000" …. <tr> <td>A</td> <td>B </td> </tr> <tr> <td>C</td> <td>D <table border="2" cellspacing="0" …

leave <table> tagneed syntactically

correct unit

Page 4: HTML bug …

doesn’t help

<html> <head> <title>error test</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <table border="2" bordercolor="#FF0000" …. <tr> <td>C</td> <td>D <table border="2" bordercolor= … <tr> <td>Da</td> <td>Db</td> </tr> <tr>

error2.html

Page 5: HTML bug …

and a bit more …

… … … <table border="2" bordercolor="#FF0000" …. <tr> <td>C</td> <td>D <table border="2" bordercolor= … <tr> <td>Da</td> <td>Db</td> </tr> … … … </tabel> </td> </tr> <tr> <td>E</td> … … …

error2.html

Page 6: HTML bug …

now it works

… … … <table border="2" bordercolor="#FF0000" …. <tr> <td>E</td> <td>F</td> </tr> <tr> <td>G <table border="2" bordercolor= … <tr> <td>Ga</td> <td>Gb</td> </tr> </table> </td> <td>H</td> … … …

ok1.html

Page 7: HTML bug …

put it back

<html> <head> <title>error test</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <table border="2" bordercolor="#FF0000" …. <tr> <td>C</td> <td>D <table border="2" bordercolor= … <tr> <td>Da</td> <td>Db</td> </tr> <tr>

error2.html

Page 8: HTML bug …

… … … <td>F</td> </tr> <tr> <td>G <table border="2" bordercolor= … … … … </td> <td>H</td> </tr> </table> <p>More text after the table</p> </body> </html>

now remove end bit

error2.html

Page 9: HTML bug …

getting closer …

… … … </tr> <tr> <td>Dc</td> <td>Dd</td> </tr> </tabel> </td> </tr> <tr> <td>E</td> <td>F</td> </tr> </table> </body> </html>

error3.html

Page 10: HTML bug …

what next?

if we remove the EF row won’t be able to see if it is

OK or not

but could remove EF and add line

after end of table error3.html

Page 11: HTML bug …

try it

… … … <tr> <td>Dc</td> <td>Dd</td> </tr> </tabel> </td> </tr> <tr> <td>E</td> <td>F</td> </tr> </table> …. new line here … </body> </html>

error3.html

remove EF and add line after end of table

add line afterend of table

Page 12: HTML bug …

very close now

… … … <tr> <td>Da</td> <td>Db</td> </tr> <tr> <td>Dc</td> <td>Dd</td> </tr> </tabel> </td> </tr> </table> <p>More text after the table </p> </body> </html>

error4.html

Page 13: HTML bug …

simplify inner table

… … … <table border="2" bordercolor= … <tr> <td>Da</td> <td>Db</td> </tr> <tr> <td>Dc</td> <td>Dd</td> </tr> </tabel> </td> </tr> </table> <p>More text after the table </p> … … …

error4.html

Page 14: HTML bug …

still fails

… … … <table border="2" bordercolor="#FF0000" … <tr> <td>C</td> <td>D <table border="2" bordercolor= … <tr> <td>Da</td> </tr> </tabel> </td> </tr> </table> <p>More text after the table </p> … … …

error5.html

Page 15: HTML bug …

remove inner table completely

… … … <table border="2" bordercolor="#FF0000" … <tr> <td>C</td> <td>D <table border="2" bordercolor= … <tr> <td>Da</td> </tr> </tabel> </td> </tr> </table> <p>More text after the table </p> … … …

error5.html

Page 16: HTML bug …

it works again!

<html><head><title>OK document</title></head><body bgcolor="#FFFFFF" text="#000000"><table border="2" bordercolor="#FF0000" … <tr> <td>C</td> <td>D </td> </tr></table><p>More text after the table</p></body></html>

ok2.html

Page 17: HTML bug …

let’s look at that inner table

… … … <table border="2" bordercolor="#FF0000" … <tr> <td>C</td> <td>D <table border="2" bordercolor= … <tr> <td>Da</td> </tr> </tabel> </td> </tr> </table> <p>More text after the table </p> … … …

error5.html

OOPS!

Page 18: HTML bug …

fix it

… … … <table border="2" bordercolor="#FF0000" … <tr> <td>C</td> <td>D <table border="2" bordercolor= … <tr> <td>Da</td> </tr> </table> </td> </tr> </table> <p>More text after the table </p> … … …

ok3.html

Page 19: HTML bug …

now fix original file … … … <td>Dc</td> <td>Dd</td> </tr> </table> </td> </tr> <tr> <td>E</td> <td>F</td> </tr> <tr> <td>G <table border="2” bordercolor= … <tr> <td>Ga</td> <td>Gb</td> … … …

target.html