Here is the issue I am facing:
I am currently working on a website and encountering difficulty in achieving uniform appearance across different internet browsers. Below you will find my posted stylesheet.
My attempt to utilize css.reset is posing a challenge as I am not completely understanding its functionality. The problem arises when viewing the website in Chrome versus Internet Explorer. In Chrome, the styling renders the website as desired; however, in Internet Explorer, there is a misalignment of pixels by approximately 200 pixels in an opposite direction. I am also looking to provide a comparison screenshot displaying how the site appears in Explorer.
html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, center,
dl, dt, dd, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
footer, header, hgroup, menu, nav, section {
display: block;
}
html {
height: 100%;
width: 100%;
}
h1 {
text-align: center;
color: white
}
h3 {
text-align: center;
color: white;
}
@media only screen and (min-width:960px){
/* styles for browsers larger than 960px; */
.center{
margin-left: auto;
margin-right: auto;
top: 125px;
right: 420px;
margin-bottom: auto;
margin-top: auto;
width: 700px;
height: 400px;
position: fixed;
}
}
@media only screen and (min-width:1440px){
/* styles for browsers larger than 1440px; */
}
@media only screen and (min-width:2000px){
/* for sumo sized (mac) screens */
}
@media only screen and (max-device-width:480px){
/* styles for mobile browsers smaller than 480px; (iPhone) */
.center{
margin-left: auto;
margin-right: auto;
top: 150px;
right: 130px;
margin-bottom: auto;
margin-top: auto;
width: auto;
height: 350px;
position: fixed
}
}
@media only screen and (device-width:768px){
/* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
/*must aways have a position
VIDEO SECTION
*/
@media only screen and (min-width:960px){
/* styles for browsers larger than 960px; */
video{
width: 1000px;
height: 500px;
position: absolute;
left: 200px;
top: 150px;
}
}
@media only screen and (max-device-width:480px){
/* styles for mobile browsers smaller than 480px; (iPhone) */
video{
width: 600px;
height: 500px;
position: absolute;
left: 70px;
bottom: 500px;
}
}
h4 {
text-align: center;
color: white
}
h2 {
text-align: center;
color: white
}
h5 {
text-align: center;
color: white
}
p{
position: relative;
text-align: center;
top: 400px;
}
body {
/*This is the pages background color*/
background-color: #000080;
background-repeat: no-repeat;
background-size: cover;
color:white;
font-family: Arial, Helvetica, sans-serif;
}
.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
/* tab color*/
background-color: #cccccc;
opacity: 1;
}
.boarder {
float: left;
border: 2px groove black;
}
ol {
word-break: break-all;
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
/*This works like an margin in word where it the words
a few inches from the border*/
padding-left: 30px;
}
ol li {
padding: 10px;
margin-left: 35px;
}
.boarder_2{
border: 5px groove black;
border-style: solid;
margin: 0;
opacity: 1;
border-color: #5791ed;
padding: 5px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 8px 10px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.none {
float: none;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}