I have recently built a basic website using HTML and CSS.
After developing it primarily on Chrome, I've noticed that the layout is not rendering correctly on Firefox, Safari, and Internet Explorer. There are issues with the alignment of tags and buttons.
What declarations should I make to ensure the site is compliant for all browsers, especially 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: relativ...
<!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 appe...
<h6 id="p2">This Text appears correctlappears correctly<br>
appears correctly</h6>
<h5 id="comms">This Text appears correctly<br>This Text ap...
<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 ...g
</td>
</tr>
</table>
</div>
[…]