Css: An element is floating over an Image on firefox but not in other browsers. Is firefox respecting css standards or are the other browsers?

Question

Like in the title, I have this:

http://jsfiddle.net/Eddie84/vh6n4/

Is firefox respecting css standards or are the other browsers? And, how can I have the same result on other browsers without changing the DOM and not twisting the css?!

HTML:

<div>
    <h2>
        <a href="#">Lorem Ipsum</a>
    </h2>
    <p>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis. Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p>

<h4>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit.</h4>
    <a class="circle" href="#">
        <span>Lorem</span> <br />
        <span>
            <img alt="" src="http://lorempixel.com/50/50" />
        </span>
    </a>

    <p>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis</p>
    <p>
        <img style="display:block; width:100%" alt="" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" />
    </p>
    <p>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis</p>
</div>

CSS:

.circle {
    float:right;
    border-radius: 50%;
    box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    height: 110px;
    line-height: 1.4;
    padding: 10px;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 110px;
    background:red;
}

Thank you very much

Serafino

Answer 1

its not firefox bug..you just din use clear as you use float so you must use clear:both then you can see that your code is working..check my code..

<p>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis. Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p>

<h4>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit.</h4>

    <a class="circle" href="#">
        <span>Lorem</span> <br />
        <span>
            <img alt="" src="http://lorempixel.com/50/50" />
        </span>
    </a>

    <p>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis</p>
    <div style="clear:both;"></div>

    <p>
        <img style="display:block; width:100%" alt="" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" />
    </p><div style="clear:both;"></div>
    <p>Lorem ipsum. dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis</p>

evn if i will use display:block or not but circle image wont overflow on another..i hope you will like my ans..thanx :)