Class Home Page

Google Chrome

Firefox

IE

There are two changes amongst the homepage that I can clearly see. For one, the horizontal line color is a dark grey for firefox, while it is white in Chrome and IE. At the same time, the Font color of the hyperlinks in IE is a lighter shade of blue than the hyperlinks in chrome and firefox. To Fix them:

• To fix the horizontal line, add this to your css to reset it: hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
• To fix the font color of the anchor tags, add this to your css: a { font-size: 100%; color: #0000EE; font: inherit; }

Olympic Sports Page

Google Chrome

Firefox

IE

Just like with the last page, the font color of the anchor tags in IE is a lighter shade of blue in comparison to the others. Once again, to fix, add this to your css: a { font-size: 100%; color: #0000EE; font: inherit; }

Class Catalog Page

Google Chrome

Firefox

IE

Once again, the only difference I can see is the color of the hyperlinks. It would probably be pertinent to add both visited and unvisited colors to the CSS. It would read like: :link { color: #0000EE; } :visited { color: #551A8B; } You may change these as long as you have a baseline set here.

Pet Sitting Service Page

Google Chrome

Firefox

IE

besides the anchor tag color, there are a few small details. The check boxes in Firefox and IE have straight edges, while chrome's checkboxes are more rounded. There are other small details within the form like the select element having different types of arrows, the comment box having either arrows or an option to expand the box freely, etc.

• to reset the checkbox: input[type="checkbox"] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
• to change the arrow in the select element: .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent }
• To allow the size to change in any browser, add this to css: textarea { resize: both; }

Copyright© 2020 Jacob Rozmiarek