Home/ Questions/Q 638119
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T20:41:52+00:00

This page renders differently in Firefox and Chrome. Code <p style=border: solid 1px red>Test

  • 0

This page renders differently in Firefox and Chrome.

Code

<p style="border: solid 1px red">Test test</p>
<p style="border: solid 1px red">Test test</p>
<p style="border: solid 1px red">Test test</p>
<div style="margin-bottom: 1em; overflow: auto;"></div>
<p style="border: solid 1px red">Test test</p>
<p style="border: solid 1px red">Test test</p>

<p style="border: solid 1px red">Test test</p>

Firefox, Opera, Internet Explorer

alt text http://koper.wowpanda.net/firefoxr.PNG

Chrome

alt text http://koper.wowpanda.net/chromer.PNG

Questions

  1. Who is right? Firefox or Chrome?
  2. When does it happen exactly? For example if I add padding: 1px then suddenly Chrome will add the bottom margin too. Same thing if I add something (anything) in the div contents.
  3. Is there any CSS/Javascript hack to make both browsers display it the same without modifying the HTML?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <div style="margin-bottom: 1em; overflow: auto;"></div>

    You need to specify a height here.

    If you don’t chrome treats it as an empty element and does not render it. Whereas firefox does. To avoid this just add a height attribute. like so:

    <div style="margin-bottom: 1em; overflow: auto; height:1px;"></div>
    • 0