0

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

Mudassir
  • 1,136
  • 1
  • 11
  • 29
Serafino Bilotta
  • 51
  • 1
  • 9
  • 2
    Can you explain what you're trying to do and include more code? jsFiddle is not loading for me and these two lines of code mean absolutely nothing. – BoltClock Apr 11 '14 at 08:00
  • ok, I'll add full html&css here. – Serafino Bilotta Apr 11 '14 at 08:05
  • 1
    I think that it's the inclusion of the image declared as `display:block` inside the `p`. If you remove the display property it all works. Block elements that aren't "Phrasing Content" should not be placed inside `p` tags. http://stackoverflow.com/questions/15858107/why-should-we-not-place-block-elements-inside-inline-elements – Paulie_D Apr 11 '14 at 08:29
  • so... is it a firefox bug? – Serafino Bilotta Apr 11 '14 at 08:37

1 Answers1

0

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 :)

Leo the lion
  • 3,164
  • 2
  • 22
  • 40