Question

XUL box for div element contained an inline br child, forcing all its children to be wrapped in a block.

It is just an alert but not a fatal error, the webpage won’t have any problems with this error, but it took place in my firebug console which is annoying, how to prevent this? Or how to ignore these errors in firebug?

I suspect it is cause by this :

#top_icon01{
    position:relative;
    background-image : url('../hill_header/img/top_Icon_i01.png');
    background-repeat : no-repeat;
    background-size : 56px 56px;
    background-position: 50% 20px;
    width : 172px;
    height : 130px;
    padding-top : 25px;
    text-align: center;
    display:block;
    display:-webkit-box;
    display:-moz-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -moz-box-pack:center;
    -moz-box-align:center;
}

I provide some more details:
I didn’t tick show chrome error, see this is very annoying.

If I remove the top header :

<div id='topHeader'>
    <section id='top_middle_panel'>
        <div id='top_ryan'>
        <span class='float'> 
            <div id='top_icon01' class='top_icons'> 
                <h1>Design</h1><br><h6>Create Value</h6>
            </div>
        </span>
        <span class='float'> 
            <div id='top_icon02' class='top_icons'> 
                <h1>Multimedia</h1><br><h6>Amazing Presentation</h6>
            </div>
        </span>
        <span class='float'> 
            <div id='top_icon03' class='top_icons'> 
                <h1>Marketing</h1><br><h6>Connect to The World</h6>
            </div>
        </span>
        </div>
    </section>
</div>  

There is no more errors.

Answer 1

edit: changing my answer

I’ve reproduced it in jsFiddle! http://jsfiddle.net/brianpeiris/KEsZh/show/

Since you’ve set your top_icon divs to use the flexible box model (display: -moz-box), Firefox warns you that you’ve put a <br /> directly inside, which then forces it to wrap the contents of those divs in another block, so it complains about that (perhaps unnecessarily).

So, to stop Firefox from complaining, you can wrap the contents of your top_icon divs in another div explicitly. This makes Firefox happy.

<div id='topHeader'>
    <section id='top_middle_panel'>
        <div id='top_ryan'>
        <span class='float'> <div id='top_icon01' class='top_icons'><div><h1>Design</h1><br><h6>Create Value</h6></div></div></span>
        <span class='float'> <div id='top_icon02' class='top_icons'><div><h1>Multimedia</h1><br><h6>Amazing Presentation</h6></div></div></span>
        <span class='float'> <div id='top_icon03' class='top_icons'><div><h1>Marketing</h1><br><h6>Connect to The World</h6></div></div></span>
        </div>
    </section>
</div>  

Alternatively, you can remove the <br /> and find another solution to format your content.