• Like
  • Save
CSS Exercise 1: 18 Examples
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

CSS Exercise 1: 18 Examples

  • 8,315 views
Published

See how Firefox 1.5 and IE 6 render the same design differently.

See how Firefox 1.5 and IE 6 render the same design differently.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,315
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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