Home/ Questions/Q 3223640
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T16:07:50+00:00

Safari 4 seems to be ignoring element margins unless I add a border. The

  • 0

Safari 4 seems to be ignoring element margins unless I add a border.

The following example renders left and right margins but no top or bottom.

Upon adding a border, it renders as expected. Am I doing something wrong or am I going to have to add borders (albeit transparent ones) to every element with margins just for Safari?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>testing</title>
<style>
    body {background-color:#666;}
    div {display:block; position:relative; margin:0; padding:0;}
    .background {background-color:#990000;}
    .foreground {background-color:#fff; margin:10px; padding:10px;}
</style>
</head>
<body>
    <div class='background'>
        <div class='foreground'>
        foreground
        </div>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s a normal weird behaviour calling margin (edited, sorry i’m french) collapse.
    To simply avoid it add overflow:auto; on the container.

    .background {background-color:#990000; overflow:auto;}
    • 0