3

I encountered an issue with difference in rendering an element, which is absolute positioned, containing another element inside negative margins, then inside another one with clearfix and lastly some floated element in it.

Test case: http://jsfiddle.net/u5Qat/

HTML:

<div class="absolute">
    <div class="content">
        Test
        <footer><p class="clearfix"><span>Footer</span></p></footer>
    </div>
</div>

CSS:

* {
    box-sizing: border-box;
}

*:before, *:after {
    box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

.absolute {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid red;
}

.content {
    padding: 0 50px;
}

footer p {
    margin-top: 25px;
    margin-bottom: -10px;
}

footer p span {
    float: left;
}

I suppose Chrome renders it correctly (55px height) and Firefox incorrectly expands the absolute positioned element so that it covers the element with negative margins (65px height).

Screenshot:

Looks like the clearfix & float don't do good in this case?

edit: IMO the correct behavior is of Chrome (on the right), and Firefox is wrong.

hawk
  • 299
  • 2
  • 8
  • Are you trying to get this to work, or are you simply asking why each browser behaves the way it does? If you're trying to get this to work, which behavior is the one you're looking for? – BoltClock Jun 11 '14 at 10:49
  • The expected behavior is the one rendered by Google Chrome. – hawk Jun 11 '14 at 13:01

1 Answers1

0

enter image description here

footer p {
margin-top: 25px;
margin-bottom: -10px;
}

Replace the above code with the below one

footer p {
margin-top: 25px;
margin-bottom: 0px;
}

In case if you want to change height of content in various browsers, use the below keywords

footer p {
   -moz-margin-bottom:    0px;   /* Firefox 1, probably can drop this */
   -webkit-margin-bottom: 0px;   /* Safari 3-4, also probably droppable */
   margin-bottom:        0px;   /* Everything else */
}
Nithyanandhan M
  • 1,524
  • 1
  • 16
  • 26
  • I'm pretty sure the negative margin is there for a reason and you can't just toss it out. – BoltClock Jun 11 '14 at 10:43
  • see the updated code above. footer p { margin-top: 25px; margin-bottom: 0px; } will works fine. check it. – Nithyanandhan M Jun 11 '14 at 10:46
  • The expected result is as rendered by Chrome browser. Absolute element should not wrap around the content with negative margin. Change margin-bottom to some bigger negative value e.g. -100px for comparison - – hawk Jun 11 '14 at 13:00
  • No don't use negative values. Based on the browser issue declare the margin like -moz- for firefox. Or share the link where issue came. – Nithyanandhan M Jun 11 '14 at 13:05