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.

1. 18 CSS Exercises MMC 4341 University of Florida

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.

3. Firefox 1.5

4. IE 6 – Page is virtually identical in both browsers.

5. Firefox 1.5

6. IE 6 – Note scrollbars both at bottom and at right. Design is too large for 1024 x 768. This is probably a matter of margins or padding or both.

7. Firefox 1.5 – Text butts up against photo on the left edge

8. IE 6 – Note how the position of both the body text and the footer text changes between the two browsers.

9. Firefox 1.5

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.

13. Firefox 1.5

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.

15. Firefox 1.5

16. IE 6 – A perfect match in both browsers.

17. Firefox 1.5 – Some inappropriate touching can be seen where the corners of the text hits up on the image.

18. IE 6 – An almost perfect match in both browsers. In IE, the touching is less severe.

19. Firefox 1.5 – Justified text is bad, bad, bad. Never use { text-align: justify; } in your CSS!

20. IE 6 – The design was centered in Firefox, but notice that here, it is not. It is stuck to the left-hand edge of the window.

21. Firefox 1.5 – The lines of the body text are too long for good legibility.

22. IE 6 – In Firefox, this design was centered vertically. But here, it sticks to the top edge instead.

23. Firefox 1.5 – Note scrollbar at right. Too tall for 1024 x 768.

24. IE 6 – Same height problem here, but the design is almost exactly the same in both browsers (good).

25. Firefox 1.5 -- Too tall for 1024 x 768. We cannot read the footer unless we scroll.

26. IE 6 – Same problem (too tall).

27. Firefox 1.5

28. IE 6 – Slightly different (probably an issue with margins or padding) but nothing to worry about.

29. Firefox 1.5

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.

31. Firefox 1.5

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).

33. Firefox 1.5

34. IE 6 – Uh-oh, big problem here. Probably related to the widths, margins and padding of the two DIVs.

35. Firefox 1.5 – No “h” in Gettysburg.

36. IE 6 – This is a perfect match except for a slight variation in the vertical position of both picture and text – but that is quite insignificant.

37. Firefox 1.5

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.

39. 18 CSS Exercises MMC 4341 University of Florida