Hello all,
I’m new to the whole css/html scene but I’m trying to make a website just for kicks because well.. I think its fun. So I decided I’d make a bunch of templates and maybe if I get good enough I can make sites for small businesses.
Anyway. Whilst showing my sister my latest creation, she let me in on a secret… the site rendered horribly in IE! I made the mistake of only checking it in Chrome because well.. that’s just what I use.
So, here are two screenshots of the site in both Chrome and IE…
http://www.sonoraoutdooradventures.com/template/chrome.jpg
http://www.sonoraoutdooradventures.com/template/IE.jpg
and here is a link to its *temporary* location: http://www.sonoraoutdooradventures.com/template/index.html
and here’s the code… I know its long but bear with me!
<html>
<head>
<title>WWWdots! Template</title>
<style type="text/css">
body
{ margin-top: 5%;
margin-bottom:5%;
margin-left: 5%;
margin-right: 5%;
padding-left: 0;
padding-right: 0;
background-image:url('snippets/gradient.jpg');
background-repeat:repeat-x;
}
#box{
height:100%;
width:100%;
margin-left:auto;
margin-right:auto;
background-color:#800d4a;
}
#header {
margin: auto;
padding: 0px;
background-color:#e73a95;
}
#nav {
float:left;
margin:auto;
width: 9em;
}
#content {
margin-top:1em;
margin-left:9em;
margin-right:5em;
height:65%;
padding:1px;
background-image:url('snippets/contentgradient.jpg');
background-repeat:repeat-x;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
h1, h2, h3, h4, h5, h6
{
color:#870047;
font-family:"Comic Sans MS", cursive, sans-serif;
text-align:center;
}
p.content
{
color:black;
font-family:"Comic Sans MS", cursive, sans-serif;
text-align:center;
}
</style>
</head>
<body>
<div id="box">
<div id="header">
<img class="center" src="snippets/banner.png" height="20%" width="100%"/>
</div>
<div id="nav">
<a href="#home"><img class="center" src="snippets/home.png" /></a>
<a href="#home"><img class="center" src="snippets/stylists.png" /></a>
<a href="#home"><img class="center" src="snippets/hotcuts.png" /></a>
<a href="#home"><img class="center" src="snippets/contactus.png" /></a>
<a href="#home"><img class="center" src="snippets/dailydeals.png" /></a>
</div>
<div id="content">
<h2> ~ This is a test template ~ </h2>
<p class="content"> This site is another basic layout that has no troublesome scripts just HTML/CSS! </p>
<h3> This could be your site! </h3>
<img class="center" src="snippets/lady.png" />
<h6> WWWdots! Template created by Katherine Johnson © 2010 <h6>
</div>
</div>
</body>
</html>
What can I do! I love the way it looks in chrome but I know most people use IE. :-(
Thanks in advance!
—Mynxie
