What could cause this HTML/CSS rendering issue in Firefox?

Question

The styles:

h2 {
    color: #71D0FF;
    font-size: 11px;
    font-weight: bold;
    margin: 0px 0px 5px 0px;
}
a.box {
    color: #FFFFFF !important;
    cursor: pointer;
    display: block;
    padding: 10px;
    text-align: justify;
}
a.box:hover {
    background-color: #0C0C0C;
}
a.box span.down {
    display: block;
    color: #D04242;
    float: right;
    font-size: 11px;
    margin-left: 5px;
}
a.box span.up {
    display: block;
    color: #71D013;
    float: right;
    font-size: 11px;
}
span.noob {
    color: #FFA142;
}
span.pro {
    color: #A142A1;
}

The HTML (this is basically repeated for each link):

<a href="/library/blaze" class="box">
<span class="down">-0</span>
<span class="up">+0</span>
<h2><span class="noob">NOOB</span> BLAZE</h2>
HAS CREATED 0 MAPS, WON 0 BATTLES, AND LOST 0 MAPS
</a>

What I'm not understanding is why it renders differently in Firefox occasionally. Sometimes it shows up like it's supposed to and sometimes it shows up in this weird format as seen here:

Direct Link: http://tronner.com/library

I've never had anything like this happen before, does anyone know what's causing it? Does it even do this for anyone else? Like I stated before, sometimes it loads just fine (exact same HTML, CSS, and everything) and sometimes it doesn't. It seems kind of random. It loads just fine in IE with no weird problems at all.

Answer 1

Works fine for me in Safari, Chrome, and Firefox 3.5.

I've tried refreshing repeatedly. No luck in duplicating your problem. Have you tried clearing your cache?

Inspecting the element in Safari or Web Developer (FF plugin) does not reveal anything unusual either.

Is N00B BLAZE always the one that messes up every time you see an issue or is it random?

Answer 2

For me, sometimes Firefox doesn't properly load CSS, it's usually all of it, not partially like it's happening to you. For me tho it's loading correctly. Have you recently changed it by any chance and didn't allowed to properly refresh?

Answer 3

I am a bit surprised that it doesn't act up more than it does.

You have put a block element (h2) inside an inline element (a). The markup is broken, and different browsers will do different things to try to make the best of it. One thing that can happen is that the browser adds an ending tag for the link before the block element.

Us an inline tag instead of the h2 tag, and use CSS to style it to look the way you want.

Answer 4

Interesting. I can definitely reproduce it on FF3.6, actually I'm getting the broken version more often.

I can't get my head around it right now, but looking at it in Firefox, there is something broken with the link. If you open "inspect element" in Firebug, you will notice that the rendered DOM definitely changes between the intact and broken view. Firebug will also add _moz-rs-heading to the link, which is sort of explained here.

The first step should definitely be making the markup W3C valid and checking whether it still occurs.

Answer 5

When I buzzed your site, the problem occurred for me in FF3.6. Using Firebug to peek at the HTML, the problem was that the lines that display incorrectly have an extra <a> wrapped around the text, within the <span>. Maybe some HTML included in your DB where it should only be text?

Answer 6

I'm having the same problem.

http://www.jameshughbanks.com/

I've narrowed it down to this. It ONLY happens when I put a link around multiple elements (in my case it involves one (or more) block element(s) and one (or more) in-line elements.

It is very odd as in it seems to only affect "every other" "error" you create using the method I described above. It will modify the first and third div output but not the 2nd. (at first it affected the 2nd one only, but I partially fixed the problem (it used to mess up the H2's also, but putting the link around the h2's only removed them from getting the error.

So it comes down to only being able to put a link around 1 block element, I haven't tested the error with more than 1 block element, only the mis-match of a block element and multiple in-line elements.

If anyone has any work-arounds for this issue in firefox please let me know. It does not appear to happen in IE, Opera, or Chrome.

Also for those that think this is bad markup, it is included to be valid in the next revision of html5, and it is the only way (without javascript/etc) to do these types of links. Firefox is obviously coded to show this markup properly but for some reason has some type of bug that makes it render it differently sometimes due to unknown reasons. Regardless it needs to be fixed or a work-around developed, I could make each element its own individual block and probably fix it, but that's a lot of extra unnecessary code.