Firefox、Safari、IEでシンプルなHTML Webサイトがレンダリングされない

HTMLとCSSを使用して簡単なWebサイトを作成しました。Firefox、Safari、IEでシンプルなHTML Webサイトがレンダリングされない

主に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>

出典

2016-10-03 jTank

HTMLにいくつかのエラーがあります。バリデーターを使用してください。また、コンソールのCSSエラーをチェックしてください（例えば、 'font-style：bold;'はありません）。いくつかのプロパティは 'ul.org'の' list-style-position'（無効な 'all'値も使用します）のような他のプロパティを直接オーバーライドします。また、インターネットアドベンチャーとは何ですか？ – Xufox

あなたの返事と私の投稿をクリアしていただきありがとうございます。コンソールとバリデーターを使って見ていきます。クイックランは、4つのエラー、特にテーブルエラーを見ると驚いた。いくつかの宿題をして、うまくいけば戻ってくるのではなく、upvoteと答えとしてマークしてください！ Christopher Columbusのようなインターネットアドベンチャーを考えてみてください。 – jTank

あなたのコードは、あなたが行うことができます片付けたくさんの良いものではなく、エラーを修正することは、これらのクラスを編集してみてください。

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

出典

2016-10-03 22:41:52 SomeGuy

返信いただきありがとうございます。これらの行を削除すると、Firefoxではテーブルレイアウトがはるかに改善されましたが、Chromeでは、ページの半分をテーブルの半分に押し込む場所を把握できません。 – jTank

#commsの位置を 'absolute'に変更するには、bottomを削除して「top：-20px;」に変更します。それは非常にハッキーですが、コードはちょっと混乱しています。 – SomeGuy

^ありがとうございます。コードをクリアする必要があります。 – jTank

Firefox、Safari、IEでシンプルなHTML Webサイトがレンダリングされない

答えて

関連する問題