Boxing with CSS, Part II: No Margin For Error

Exercises

Eclipse Helios Update Brings New PHP Tools

Internet Explorer 9 Ups Standards Support

This concludes our two-part introduction to the CSS visual formatting model. By now, you know how to control the box model properties, and how to do simple layout of block elements one after the other. The following excercises will help you get the bigger picture of how these methods are put into action despite browser bugs.

Explorer Challenge

Take the document below, and try to make it look like it should if it had the following style sheet:

BODY {
  margin: 1em;
  padding: 1em;
}
DIV {
  padding: 1em;
  margin: 1em;
  border: 1em solid green;
  background: cyan;
}
P {
  padding: 1em;
  margin: 1em;
  border: 1em solid blue;
  background: magenta;
}

The style sheet you use should be legal CSS, and not create any bizarre effects if tried on Navigator or according to the specification. Any one who manages to do this, tell me how and you'll get an honorary mention in this tutorial.

<BODY>

<DIV>

<P>Acme Computer Corporation is a technology-based 
company that seeks to offer its customers the latest 
in technological innovation. Our products are created 
using the latest breakthroughs in computers and are 
designed by a team of top-notch experts.</P>

<P>We are based in Acmetown, USA, and have offices 
in most major cities around the world. Our goal is to 
have a global approach to the future of computing. Have 
a look at our product catalog for some examples of our 
innovative approach.</P>

</DIV>

</BODY>

Netscape Coloring

Take the document above, and make both paragraphs have a square green background, with a white background on the body, without any borders showing.