This document contains screenshots from 36 slides showing CSS exercises completed by students in an advanced web design course. The screenshots compare the rendering of each page design in Firefox 1.5 and Internet Explorer 6. Several of the design examples demonstrate differences in how elements are positioned or styled between the two browsers. The document emphasizes the importance of testing web page designs in multiple browsers to identify compatibility issues.
2. The next 36 slides show the first CSS exercise by students in an advanced Web design course. In each pair, the first slide shows the page in Firefox 1.5 and the second shows the same page in IE 6. All screenshots were taken from Windows XP on a monitor at 1024 x 768. The browser windows were maximized. The full screen was captured.
10. IE 6 – Note the bottom scrollbar – this is too wide for 1024 x 768.
11. Firefox 1.5 – Design is not centered, but that’s okay for this assignment.
12. IE 6 – Note how the top and left margins are slightly different in IE and in Firefox. This is a characteristic of the browsers. You should always specify { margin: 0; } for the body in your CSS.
14. IE 6 – Notice different LINK color (bottom left) and also different margin above the heading. These were not spec’d (in the CSS) to make them match in the two browsers. They should have been.
30. IE 6 – Notice how the body text is in a completely different place here. There is no margin between the right-hand edge of the text and the left edge of the picture. This CSS needs some work.
32. IE 6 – There are two minor differences between the two browsers. (1) Color of LINK text. (2) Vertical position of the attribution (below the body text).
38. IE 6 – Notice the two white corners peeking out below the comic balloon. Another reason to test in both browsers – always! Also note the bottom scrollbar – this is too wide for 1024 x 768.