In Class 4

In this project you will create styles that use position to create various types of images. You will also learn how to get background colors to appear the same in both Netscape and Internet Explorer.

1. Right click on the image below and save it in the directory you are using for this exercise.

2. Create a new page. Add the following style in the head section of your page.

#div1 { 
color: #FF0000;
background: #C0C0C0;
font-family: Garamond;
font-weight: bold;
font-size: 14pt;
border-style:groove; border-width:  30px; border-color: #FF0000;
margin: 10px;
position: absolute;
width: 520;
}

3. Create a DIV element with id div1.

Notice that each of the browsers has its own way of interpreting this div element. Try adding some text inside the div element.

4. Try some different border styles, widths and colors using Red Edit's edit style hander (in the DHTML menu and the right button menu).

1. Which styles are not implemented by one or more browsers? Give the style not implemented and the browser that doesn't implement it.
2. Which styles are implemented, but not as you might expect? Again list the browser, the style and what is wrong.

5. Add the following style to the style you created in step 2.

.blockcolor {
color: #FFFF00;
background: #0000FF;
margin: 20px 30px 30px 10px;
}

6. Suround the text you created in 3 by a paragraph element and set the class of that element to blockcolor.

Notice that the background color for the text in Internet Explorer looks like this:

In Netscape the same code gives you the following

The Internet Explorer version is closer to what you might have expected with the margin varying on all four sides.

What happens to the image in Internet Explorer when you vary the margin values?

7. Place your text paragraph in the cell of a table that surrounds the text with one row and one cell. Set the cell BGCOLOR to 0000FF.

Compare the results in the two browsers.

8. Set the table width to 520 (same as div1)

At this point the text will appear about the same in both browsers.

9. Add DIV element inside the DIV element you created in step 3, below the table you created in step 7. Now add the picture you downloaded in step 1 to the new DIV element.