Related

PHP just does some things better. cloud backups, pecl-expect

Interesting Problems.

Migrating off Netsuite - The hidden cost of Clouds..

Browser rending weirdness OSX and firefox

Leadership lessons, or are MBA courses any good?

Company rename and RooJS sites now online

nested trees in mysql - handy stored procedures.

2008 roundup - Recession kicking in?

Where have all the good mice gone?

Microsoft, always delivers... crap...

Browser rending weirdness OSX and firefox

Published 2011-01-26 00:00:00

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

Comments

Packet size
I've had a problem like this before, and couldn't work out what would cause the rendering difference when viewing a page via a back button compared to going straight to a url.

From what I remember it was due to the html chunks being split up over http packets (sorry, can't find any links right now). If the block inside the inline element isn't closed before the end of the packet, Firefox does you a 'favour' and alters the mark up by closing the block element. I could replicate this on FF on linux as well.
#0 - paadamson ( Link) on 2011-01-27 18:19:37 Delete Comment
Block/inline elements
Actually, in html 4.01 the <a> element is an inline element and a <div> is a block element. Because inline elements can only contain inline elements, this is invalid html.

When you change the <div> (a block element) to <span> (an inline element) this will solve indeed the problem.

There is also another solution: html5. In the new specification it is allowed to wrap an <a> element around block level elements, so this won't be invalid html anymore. Be careful with this approach: when you wrap an <a> element around block level elements and some of the block level elements are new html5 elements, this triggers a bug in Firefox: http://www.nrc.nl/nieuws/categorie/nieuws/rss.php
#1 - Jurian Sluiman ( Link) on 2011-01-27 18:22:59 Delete Comment
Not strange at all
Not strange at all; I call it just a bad coding experience!

It happens to all of us :)


cheers!
#2 - kos ( Link) on 2011-02-05 06:47:57 Delete Comment

Add Your Comment

    Follow us