Hi, So I am following Build your own website book and in Firefox the website is perfect. In Google Chrome the about page zooms in when you navigate to it. In IE 11, all the CSS is stripped for the whole website.
Here is my About page:
Here is my CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Us at Bubble Under</title>
<meta charset="utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK - let's make a
splash!</p>
</div>
</div> <!-- end of header div -->
<!-- insert navigation page under here -->
<div id = "mainnavigation" >
<!-- <h3> Site Navigation</h3> -->
<ul>
<li> <a href = "index.html"> Home </a> </li>
<li> <a href = "about.html" > About </a> </li>
<li> <a href = "contact.html"> Contact </a></li>
</ul>
</div>
<div id = "bodycontent"> <!-- start of the div tag -->
<h2> About us </h2>
<p class ="highlight"> <span class="fun"> Bubble Under</span> is a group of diving enthusiasts based in the south-
west UK who meet up for diving trips in the summer months
when the weather is good and the bacon rolls are flowing. We
arrange weekends away as small groups to cut the costs of accom-
modation and travel, and to <em>ensure</em> that everyone gets a trust-
worthy dive buddy. Although were based in the south-west,
we don't stay on <span style = "color:red;font-style:italic;"> ourown </span> turf: past diving
weekends have included trips up to ScapaFlow
in Scotland and to Malta's numerous wreck sites</p>
<p>Although we're based in the south-west, we don't stay on
our own turf: past diving weekends away have included
trips up to Scapa Flow in Scotland and to Malta's
numerous wreck sites.</p>
<p>When we're not diving, we often meet up in a local pub
to talk about our recent adventures (any excuse,eh?).</p>
<!-- always use block quotes to quote something.-->
<p>A qupote by this guy:</p>
<blockquote>
<p class="fun"> Happiness is a dip in the ocean followed by a pint or two ofOld Speckled Hen. You can quote me on that!"</p>
</blockquote>
</div> <!-- end of div tag -->
</body>
</html>
/*
css style sheet
*/
a{
color:blue;
}
a:link{
color:red;
}
a:visited {
color: navy; ;
}
a:hover{
color:red;
}
a:active{
color:navy;
}
body{
font-family:Verdana, Arial;
background-color:#e2edff;
line-height: 125%;
padding:30px;
border: 4px solid navy;
}
li{
font-size:small;
}
S
S
p {
font-size: small;
color: navy;
}
em{
text-transform:uppercase;
}
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
}
h1, h2, h3{
font-family:"Trebuchet MS", Helvetica;
color:white;
}
h1 {
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
}
h2 {
color:navy;
font-size: 130%;
padding-top:15px;
}
#mainnavigation{
width:180px;
border: 1px dotted navy;
background-color:#7da5d8;;
}
.fun {
font-family: Helvetica, serif;
color: #339999;
letter-spacing: 0.15em;
}
blockquote.fun{
}
/*.highlight {
/*border-width: 2px;
border-top: dotted;
border-bottom:solid;
border-bottom-color: white;
border-right-style: double;
border-right-color: fuchsia;
border-left-style:double;
border-left-color: red;
border-left-width: 5px;
*/
border: 5px solid blue /* this is short hand way of doing borders /*
}
/*
Can someone help me resolve the issue? I want everything to display the same in each web browser.