Website displays wrong on IE but correctly in Chrom
I am a newbie - in fact working on a simple personal site for a school final .... due in two days. I recently downgraded to Dreamweaver 2015 because that is what the class was created in, and I had a lot of struggles finding changes in the app. Now I'm figuring out changes in the app I downgraded, and I'm not finding online solutions to my problem.
My code is probably a mess, I have only been creating and not cleaning up much when I delete something I don't like. However, I will post it below. Everything looks and works fine in Chrome, but in IE the layout changes and the simple background color disappears.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>home</title>
<link href="heatherstyle.css" rel="stylesheet" type="text/css">
<style type="text/css">
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
</head>
<body>
<main id="main">
<div class="heading">Heather Hazelton</div>
<p>
<nav class="navigation"><a href="home.html">Home</a> <a href="resume.html">Resume</a> <a href="philanthrophy.html">Philanthropy</a> <a href="bio.html">Bio</a></nav>
</p>
<div class="heather image"><img src="images/Heather.JPG" width="309" height="444" alt=""/>
</div>
<div class="content home">
<p> </p>
<p>"The more I live, the more I learn. The more I learn, the more I realize, the less I know." ~ Michael Legrand</p>
<p> Hello, and welcome to my web site. My career highlights over thirteen years of success in the Information Technology field, beginning as a Signal Support Systems Specialist in the U.S. Army. I served in Operation Iraqi Freedom from 2006 to 2007. I am currently the IT Site Lead at 3M in Hartford City, Indiana. </p>
<p> I am a motivated, passionate and adaptable employee. I belief in life-long learning, and will be graduating with my M.Ed of Instructional Design and Technology in December 2018. I am continually excited to grow within my field, and branch out to utilize my new skills and talents in an educational capacity. </p>
<p> </p>
<p> </p>
</div>
<div class="footer">©Copyright 2017 Heather Hazelton</div>
<div><img src="images/family.JPG" width="271" height="197" alt=""/><img src="images/hobby.JPG" width="212" height="197" alt=""/><img src="images/books.JPG" width="256" height="197" alt=""/><img src="images/Zaya.JPG" width="283" height="197" alt=""/></div>
<p> </p>
</main>
</body>
</html>
css style sheet:
@charset "utf-8";
.heading {
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
height: 100px;
width: 1024px;
background-color: #8E8989;
border: 2px dashed #000000;
color: #FFFFFF;
font-variant: small-caps;
font-weight: normal;
font-size: 78px;
text-align: center;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
text-shadow: 0px 0px;
letter-spacing: 4px;
padding-left: 0px;
position: static;
}
.navigation {
width: 1024px;
height: 25px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
word-spacing: 150px;
background-color: #D7D7D7;
padding-top: 10px;
letter-spacing: 2px;
padding-bottom: 10px;
text-decoration: none;
color: #000000;
margin-top: 0px;
position: static;
}
.navigation a:hover {
color: #FF0004;
font-style: italic;
position: static;
}
#main {
background-color: #F8F9A9;
margin-left: auto;
margin-right: auto;
width: 1024px;
height: 950px;
position: static;
}
.heather.image {
width: 320px;
height: 448px;
float: left;
border: 2px double #050505;
padding-top: 5px;
padding-right: 5px;
}
.content.home {
width: 660px;
height: 453px;
float: right;
border: 2px double #000000;
background-color: #D7d7d7;
background-image: -webkit-linear-gradient(265deg,rgba(255,255,255,1.00) 0%,rgba(115,115,115,1.00) 100%);
background-image: -moz-linear-gradient(265deg,rgba(255,255,255,1.00) 0%,rgba(115,115,115,1.00) 100%);
background-image: -o-linear-gradient(265deg,rgba(255,255,255,1.00) 0%,rgba(115,115,115,1.00) 100%);
background-image: linear-gradient(185deg,rgba(255,255,255,1.00) 0%,rgba(115,115,115,1.00) 100%);
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-align: left;
padding-right: 5px;
}
#main div {
margin-top: 10px;
position: static;
}
.heather.image img {
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
position: static;
}
.footer {
width: 1024px;
height: 25px;
clear: both;
background-color: #8E8989;
color: #FFFFFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-align: center;
font-size: small;
position: static;
}
#resume {
width: 1000px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: small;
background-color: #F8F9A9;
border: 2px double #000000;
position: static;
}
#casa {
width: 1024px;
margin-left: auto;
margin-right: auto;
position: static;
}
#casa img {
display: block;
padding-left: 150px;
position: static;
}
#casacontent1 {
width: 508px;
margin-top: 10px;
border: 2px double #000000;
float: left;
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,1.00) 0%,rgba(255,255,255,1.00) 0%,rgba(215,215,215,1.00) 100%);
background-image: -moz-linear-gradient(270deg,rgba(0,0,0,1.00) 0%,rgba(255,255,255,1.00) 0%,rgba(215,215,215,1.00) 100%);
background-image: -o-linear-gradient(270deg,rgba(0,0,0,1.00) 0%,rgba(255,255,255,1.00) 0%,rgba(215,215,215,1.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,1.00) 0%,rgba(255,255,255,1.00) 0%,rgba(215,215,215,1.00) 100%);
margin-left: 5px;
position: static;
}
#main table {
float: right;
width: 500px;
margin-top: 50px;
text-align: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
border: 2px double #000000;
background-color: #D7D7D7;
margin-right: 5px;
position: static;
}
#casacontent2 {
width: 1024px;
clear: both;
margin-top: 10px;
padding-top: 5px;
position: static;
}
#main #casacontent1 p {
font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, sans-serif;
padding-left: 10px;
padding-right: 10px;
position: static;
}
#main #casacontent2 p {
font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, sans-serif;
font-size: small;
text-align: center;
margin-top: 10px;
position: static;
}
#photographycontent {
width: 500px;
margin-top: 10px;
float: left;
border: 2px double #F8F9A9;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
position: static;
}
#photography {
width: 500px;
float: right;
border: 2px double #F8F9A9;
position: static;
}
AdChoices