Home/ Questions/Q 6722951
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T09:30:36+00:00

I made a web page with the following code and viewed it in Google

  • 0

I made a web page with the following code and viewed it in Google Chrome.

<html>
<head>
        <style type="text/css">
                html {padding:30px; background-color:blue;}
                body {margin:0px; background-color:red;}
        </style>
</head>
<body>
hello world
</body>
</html>

The result is what I expected, a red box with a 30 pixel blue border that fills the entire web browser window. However, when I view it in Firefox, the red box is only the height of one line-height. In IE8, there is no blue border.

How do I make Firefox and IE8 display the same thing as what I see in Google Chrome?

Additional notes I tried adding different doctype tags to the page, but that only made it appear like Firefox, that is, the 1 line-height of red.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For this I think you have to resort to absolute or relative positioning; otherwise, your height/margin combo will push the bottom blue line off the screen. This works cross browser for this simple case. Hopefully it works for your more complicated use case.

    <!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body { background:blue; }
      .first{
        position:absolute; /* fixed also works */
        background:red;
        top:30px;
        left:30px;
        right:30px;
        bottom:30px;
      }
    </style>  
  </head>
  <body>
    <div class="first">hello world</div>
  </body> 
</html>
    • 0