SQL query is affected by the color of the HTML table?

1. The story
2. The explanation
3. The moral of the story
4. Comments (2)

The story

One day, on a Russian PHP forum, a new topic was created, titled "A mystery, SQL query is affected by the color of the HTML table!". Quite intrigued, I clicked in. The message text said:

Encountered with a problem today.
An SQL query always inserted the data twice. I made a list of all the pages where the problem appeared and started with reducing the code, to narrow the problem spot to the smallest example possible, it order to spot the place where the double insert occurs. After an hour of work I was able to reduce the problem code to this one:

<table><td background=#fff7eb id=message>
<?php mysql_query("INSERT INTO ...";

And when I removed background=#fff7eb - I couldn't believe my eyes - the problem disappeared! I was positively shocked.
Honestly, I've got 5 years experience with PHP but it's the first time I see anything like that.

At first nobody was able to understand the problem.
The folks started to giggle simply not believing him, making jokes like

Add a skill to your CV, "Writing cross-browser SQL"!

I myself mistook the case for the other issue, when improperly implemented front controller starts the application even for invalid requests, a non-existent favicon.ico for example. It took some time and a whole page of comments until a guy with a real good eye pointed out at the actual reason.

The link to the original topic, Google translated

The explanation

Indeed one have to be very attentive or have a good experience with CSS to spot the problem!
If you did it already - my sincere congratulations, as personally I failed to recognize the issue.

Either way, here is the explanation which is super-simple: the guy confused bgcolor with (now deprecated) background attribute, while the latter requests an image from HTTP.

Whether it was a regular value, like "background.png", it wouldn't have caused such a tumult - a browser would have simply requested this file and no second insert ever occurred. But, as it's a CSS color designation starting from #, it makes a legitimate URL, as #fff7eb simply makes an HTML anchor mark as well. If written alone, it is considered to point at the current URL and so treated by the browser. So you can tell that by seeing this code a browser makes a request to the current page for the second time, making SQL query naturally runs twice!

The moral of the story

1. The guy actually did a magnificent job, as he was able to dig up the root of the problem all by himself. By taking away all irrelevant parts of the code he was able to boil it down to just two statements - that's just amazing result. Everyone should be like him. Gradual reducing the problem code to the smallest example possible is the cornerstone of debugging.
2. Developer tools console in your browser is your indispensable friend. Every time you see a mysterious double insert, go straight to the Net tab in Developer tools and watch for the a suspicious request - most likely it's the reason.