Sometimes rendering bugs can be very annoying, IE has it's share of misbehaving, but usually firefox, chrome are consistant and never need much testing. However on one site, prior to going live someone testing on OSX kept saying that the menu bar was broken in Firefox.
Testing on Windows and Linux it looked fine. however on their browser, the horizontal line of buttons for the menu broke into two lines. It was not until I finally did remote control on her PC was I able to see what was going on.
Basically, on first load it rendered fine, but as soon as you went back to the page, the buttons would break. Inspecting it in firebug indicated that the second time it rendered the DOM tree was actually different to the HTML source.
The button code looks a bit like this
<a href="somurl"><div class="btn"><div class="btn-right"><div class="btn-left"><div
class="btn-body">Title here</div></div></div></div></a>
The idea is that the div's provide the rounded button edges, and allow nice hover effects all in CSS.
however inspecting the reloaded page indicated the tree looked like
<a href="somurl"></a>
<div class="btn"><div class="btn-right"><div class="btn-left"><div
class="btn-body">Title here</div></div></div></div>
Where the a tag had broken away from the div, strangely only on one button.
It was only after I ran it through the w3 validator and got an error message about block elements inside and inline one, that I had the idea to rewrite that HTML to use span's, rather than div's. Along with adding display:block to all the CSS for the button elements.
The resulting HTML being
<a href="somurl"><span class="btn"><span class="btn-right"><span class="btn-left"><span
class="btn-body">Title here</span></span></span></span>
And amazingly enough it rendered perfectly on all browser.. strange but true....
