CODEWITHSUNDEEP
htmlcssinternet-explorer-8internet-explorer-9internet-explorer-11
Edward Okech
Edward Okech

Reputation: 161

Web page aligning badly on Internet Explore

i have an app that will only be viewed on internet explorer,the page contents are positioned well in other browser on the center but in IE everything aligns to the left.I kindly need help

here is my css

<head>
  <meta charset="UTF-8">
  <title>SCOPE ACADEMY | HOME</title>

  <link rel="stylesheet" type="text/css" href="css/style.css" />

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to styles and they must be inlined if they are on local disk! */
      @import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font: 14px/1 'Open Sans', sans-serif;
  color: #555;
  background: #fff;
}

h1 {
  padding: 50px 0;
  font-weight: 400;
  text-align: center;
}

p {
  margin: 0 0 20px;
  line-height: 1.5;
}

main {
  min-width: 320px;
  max-width: 800px;
  padding: 50px;
  margin: 0 auto;
  background: #fff;
}

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

input {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

label[for*='1']:before {
  content: '\f015';
}

label[for*='2']:before {
  content: '\f07c';
}

label[for*='3']:before {
  content: '\f0d6';
}

label[for*='4']:before {
  content: '\f085';
}

label[for*='5']:before {
  content: '\f109';
}

label:hover {
  color: #0066cc;
  cursor: pointer;
}

input:checked + label {
  color: #0066cc;
  border: 1px solid #ddd;
  border-top: 2px solid orange;
  border-bottom: 1px solid #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
  display: block;
}

@media screen and (max-width: 650px) {
  label {
    font-size: 0;
  }

  label:before {
    margin: 0;
    font-size: 18px;
  }
}
@media screen and (max-width: 400px) {
  label {
    padding: 15px;
  }
}
/*img {
    position: absolute;
    top: 0; bottom:1200; left: 0; right:0;
    margin: auto;
}*/

span.centerImage {
     text-align: center;
}

/*.footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #efefef;
    text-align: center;

}
*/
/* IE 6 */
* html .footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

/*inline accordion css styles*/



    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

Thanks in advance

Upvotes: 0

Views: 52

Answers (1)

Ayush Sharma
Ayush Sharma

Reputation: 2107

Just add display:block property for main tag

main {
 min-width: 320px;
 max-width: 800px;
 padding: 50px;
 margin: 0 auto;
 background: #fff;
 display:block; 
}

Upvotes: 1

Related Questions