HTML bug …

Post on 30-Dec-2015

24 views 0 download

description

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

Transcript of HTML bug …

HTML bug …• intended page • actual page!

target.html

error1.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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!

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

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