Простой HTML-сайт не отображается как ожидалось в Firefox, Safari и IE

Question

Я создал простой веб-сайт с использованием HTML и CSS.

Прежде всего, используя Chrome, теперь я вижу, что сайт не отображает как ожидалось на Fx, Safari или IE. Существуют проблемы компоновки, т. Е. Теги/кнопки кажутся неуместными.

Есть ли какие-либо заявления, которые должны быть сделаны для того, чтобы сайт соответствовал требованиям Chrome?

#wrapper { 
 
    /*background-color: #ffff99;*/ 
 
    width: 1150px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 50px; 
 
    font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif; 
 
    font-size: 16pt; 
 
    font-style: normal; 
 
    font-variant: normal; 
 
    font-weight: 500; 
 
    line-height: 26.4px; 
 
} 
 
header { 
 
    background-color: #a6dd88; 
 
    height: 150px; 
 
    padding-top: 5px; 
 
    position: relative; 
 
    padding-bottom: 0px; 
 
} 
 
#company { 
 
    position: relative; 
 
    left: 250px; 
 
    bottom: 115px; 
 
    font-size: 35pt; 
 
    color: #003300; 
 
} 
 
#iaw { 
 
    position: relative; 
 
    left: 250px; 
 
    bottom: 140px; 
 
    color: #2db300; 
 
    font-weight: 200; 
 
} 
 
#p1 { 
 
    position: relative; 
 
    bottom: 170px; 
 
    right: 340px; 
 
    color: #005e00; 
 
    font-weight: 200; 
 
    text-align: center; 
 
} 
 
#p2 { 
 
    position: relative; 
 
    bottom: 255px; 
 
    right: 80px; 
 
    color: #005e00; 
 
    font-weight: 200; 
 
    text-align: center; 
 
} 
 
#comms { 
 
    float: right; 
 
    position: relative; 
 
    bottom: 455px; 
 
    right: 45px; 
 
} 
 
nav { 
 
    width: 510px; 
 
    position: relative; 
 
    left: 650px; 
 
    bottom: 335px; 
 
    display: inline-block; 
 
    /*background-color: blue;*/ 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
#content { 
 
    background-color: #79bf56; 
 
    padding: 10px 50px 10px 50px; 
 
} 
 
.button { 
 
    background-color: #4CAF50; 
 
    /* Green */ 
 
    border: none; 
 
    color: white; 
 
    padding: 7px 8px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 14.5px; 
 
    /*margin: 4px 50px 2px 50px;* <Button space inbetween>*/ 
 
    -webkit-transition-duration: 0.4s; 
 
    /* Safari */ 
 
    transition-duration: 0.4s; 
 
    cursor: pointer; 
 
} 
 
.button1 { 
 
    background-color: white; 
 
    color: black; 
 
    border: 2px solid #4CAF50; 
 
} 
 
.button1:hover { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 
footer { 
 
    background-color: #a6dd88; 
 
    position: relative; 
 
} 
 
#footer { 
 
    text-align: center; 
 
} 
 
ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    font-size: 10pt; 
 
} 
 
table, 
 
td, 
 
th { 
 
    /*border: 1px solid #003300;*/ 
 
    text-align: center; 
 
} 
 
table { 
 
    /*border-collapse: collapse;*/ 
 
    position: relative; 
 
    height: auto; 
 
    bottom: 260px; 
 
    margin-bottom: -250px; 
 
} 
 
th, 
 
td { 
 
    padding: 15px; 
 
} 
 
#ov { 
 
    color: #004d00; 
 
} 
 
#ovw { 
 
    font-weight: 100; 
 
} 
 
#clsp { 
 
    text-align: center; 
 
    color: #063b03; 
 
    font-size: 18pt; 
 
    font-weight: normal; 
 
    font-style: italic; 
 
} 
 
#c1 { 
 
    display: inline-block; 
 
    padding-right: 10px; 
 
    color: #e6e600; 
 
    font-size: 18pt; 
 
    font-weight: normal; 
 
    font-style: italic; 
 
} 
 
#c2 { 
 
    display: inline-block; 
 
    color: #e6e600; 
 
    font-size: 18pt; 
 
    font-weight: normal; 
 
    padding-left: 35px; 
 
    font-style: italic; 
 
} 
 
#com { 
 
    text-align: center; 
 
    color: #063b03; 
 
    font-size: 16pt; 
 
    font-weight: normal; 
 
    font-style: italic; 
 
} 
 
#wwat { 
 
    text-align: center; 
 
    color: #063b03; 
 
    font-size: 20pt; 
 
    font-weight: normal; 
 
    font-style: italic; 
 
} 
 
#wwa { 
 
    text-align: left; 
 
    width: auto; 
 
    position: relative; 
 
} 
 
.wwa { 
 
    width: auto; 
 
    position: relative; 
 
    left: 145px; 
 
} 
 
ul.org { 
 
    text-align: center; 
 
    list-style-type: square; 
 
    list-style-position: inside; 
 
    font-size: 15pt; 
 
    list-style-position: all; 
 
    font-style: italic; 
 
} 
 
table#rtb { 
 
    text-align: center; 
 
    position: relative; 
 
    bottom: 325px; 
 
    left: 10px; 
 
    border: none; 
 
} 
 
#rttb { 
 
    font-style: bold; 
 
    font-weight: 700; 
 
    font-style: italic; 
 
} 
 
table#test1 { 
 
    text-align: center; 
 
    position: relative; 
 
    bottom: 270px; 
 
    border: 1px solid #003300; 
 
    border-collapse: 
 
} 
 
#oc { 
 
    text-align: center; 
 
    color: #063b03; 
 
    font-size: 20pt; 
 
    font-weight: bold; 
 
    font-style: italic; 
 
} 
 
#cd { 
 
    text-align: center; 
 
    color: #006600; 
 
} 
 
#ca { 
 
    text-align: center; 
 
    color: #006600; 
 
    position: relative; 
 
    left: 145px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Who We Are</title> 
 
    <link rel="stylesheet" type="text/css" href="chambers.css"> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <header> 
 
     <img id="logo" src="http://www.carlogos.org/uploads/car-logos/Jaguar-logo-6.jpg" alt="Company" height="100px" width="130px" /> 
 
     <a href="Index.html"><h1 id="company">This Text appears correctly</h1></a> 
 
     <h6 id="iaw"><em>This Text appears correctly</em></h6> 
 
     <h6 id="p1">This Text appears correctly<br> This Text appears correctly</h6> 
 
     <h6 id="p2">This Text appears correctlappears correctly<br> 
 
    \t \t appears correctly</h6> 
 
     <h5 id="comms">This Text appears correctly<br>This Text appears correctly<br>E: This Text appears correctly</h5> 
 
     <nav> 
 
     <a href="index.html"> 
 
      <button class="button button1">Home</button> 
 
     </a> 
 
     <a href="WhoWeAre.html"> 
 
      <button class="button button1">Who We Are</button> 
 
     </a> 
 
     <a href="WhyUs.html"> 
 
      <button class="button button1">Why Us?</button> 
 
     </a> 
 
     <a href="Testimonials.html"> 
 
      <button class="button button1">Testimonials</button> 
 
     </a> 
 
     <a href="ContactUs.html"> 
 
      <button class="button button1">Contact Us</button> 
 
     </a> 
 
     </nav> 
 
    </header> 
 
    <div id="content"> 
 
     <p id="wwat">This Text appears correctly</p> 
 
     <table id="rtb"> 
 
     <tr> 
 
      <td> 
 
      This is text there that was entered but appears incorrectly in FireFox and Internet Adventure. This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in 
 
      FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that 
 
      was entered but appears incorrectly in FireFox and Internet Adventure. 
 
      <br> 
 
      <br>This is text there that was entered but appears incorrectly in FireFox and Internet Adventure. This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly 
 
      in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there 
 
      that was entered but appears incorrectly in FireFox and Internet Adventure. 
 
      <br> 
 
      <br>This is text there that was entered but appears incorrectly in FireFox and Internet Adventure. This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly 
 
      in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there 
 
      that was entered but appears incorrectly in FireFox and Internet Adventure. 
 
      <br> 
 
      <br>This is text there that was entered but appears incorrectly in FireFox and Internet Adventure. This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly 
 
      in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there 
 
      that was entered but appears incorrectly in FireFox and Internet Adventure. 
 
      <br> 
 
      <br>This is text there that was entered but appears incorrectly in FireFox and Internet Adventure. This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly 
 
      in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there 
 
      that was entered but appears incorrectly in FireFox and Internet Adventure. 
 
      <br> 
 
      <br>This is text there that was entered but appears incorrectly in FireFox and Internet Adventure. This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly 
 
      in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there 
 
      that was entered but appears incorrectly in FireFox and Internet Adventure. 
 
      <br> 
 
      <br> 
 
      <p id="wwat">xxxxxxxxx</p> 
 
      This is text there that was entered but appears incorrectly in FireFox and Internet Adventure. This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in 
 
      FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that 
 
      was entered but appears incorrectly in FireFox and Internet Adventure. 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    <div id="footer"> 
 
     <footer> 
 
     <ul> 
 
      </br> 
 
      <li id="li1"><b><em>This Text appears correctly</em></b> 
 
      </li> 
 
      <li id="liadd">This Text appears correctlyThis Text appears correctly</li> 
 
      <li id="li2"><b>This Text appears correctly<b></li> 
 
    \t \t \t <li id="li3"><em>This Text appears correctly</em></li> 
 
    \t \t \t </br> 
 
    \t \t </ul> 
 
    \t </footer> 
 
    \t </div> 
 
    \t </div> 
 
    </body> 
 
    </html>

Answer 1

Ваш код не хорошо, много уборки вы можете сделать, но исправить ошибки попробуйте изменить эти классы:

table { 
    /*border-collapse: collapse;*/ 
    position: relative; 
    height: auto; 
    /* bottom: 260px; < remove this */ 
    /* margin-bottom: -250px; < remove this */ 
} 

и

table#rtb { 
    text-align: center; 
    position: relative; 
    /* bottom: 325px; < remove this */ 
    left: 10px; 
    border: none; 
} 

http://codepen.io/anon/pen/gwXgWr