Browser rending weirdness OSX and firefox
Note: This article was originally published at Planet PHP on 26 January 2011.Article originally from rooJSolutions blog
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
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 Title hereWhere 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 Agot 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 beingTitle hereAnd amazingly enough it rendered perfectly on all browser.. strange but true....