I am seeking code advice for how to create a fixed width layout that is compatible with multiple browser sites. I have looked at several other questions posted on this site, but none have completely helped me with my specific coding issues. I would appreciate any suggestions or tips to make the code more functional.
The link for the site homepage is hooknhornsranch.com
The code that I have been working with is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hook-N-Horns Ranch, LLC</title>
<style type="text/css">
#container {
position: fixed;
top: 0;
left: auto;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
height: 100%;
width: 100%;
right: auto;
z-index: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
overflow: scroll;
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
.outer{
position:relative;
height:200px;
width:200px;
border:solid blue 1px;
}
.top, .middle, .bottom{
height: 200px;
width: 200px;
border: solid red 1px;
top: 424px;
left: 14px;
position: absolute;
}
.bottom{
border:solid orange 1px;
}
.middle{
border:solid green 1px;
}
.inside-middle{
text-align:right;
display:block;
}
#menu{
height: 3px;
width: 615px;
padding-top: 67px;
padding-left: 495px;
top: -10px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#photo{
height: 300px;
width: 685px;
top: 90px;
left: 266px;
border: 12px solid #FFF;
}
#banner{
height: 225px;
width: 481px;
background-image: url(images/bannerslice.png);
background-repeat: no-repeat;
top: -2px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#welcomeimage{
background-repeat: no-repeat;
width: 366px;
height: 225px;
left: 285px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#welcometext{
height: 166px;
width: 283px;
left: 650px;
padding-top: 50px;
padding-left: 15px;
padding-right: -60px;
font-size: 12px;
color: #12060A;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: ".tk-museo";
}
#footer{
height: 67px;
width: 754px;
top: 662px;
left: 249px;
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.tk-museo-slab {
font-family: "museo slab";
font-size: 16px;
font-weight: 500;
text-align: left;
}
.tk-museo {
font-family: museo;
font-size: 11px;
font-weight: 300;
text-align: left;
}
a:link {
color: #190C0B;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #190C0B;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.muesoslab500white {
color: #FFFFFF;
}
.tk-museo {
font-family: ".tk-museo-slab-12p";
}
</style>
<script type="text/javascript" src="//use.typekit.net/brv6oja.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div class="bottom" id="container">
<div class="top" id="menu"><span class="tk-museo-slab"><span class="museoslab500"><a href="file:///Macintosh HD/Users/ekscott22/Documents/Hook N Horns Web/about.html">About </a> <a href="file:///Macintosh HD/Users/ekscott22/Documents/Hook N Horns Web/cattle.html">Cattle </a> <a href="file:///Macintosh HD/Users/ekscott22/Documents/Hook N Horns Web/wheat.html">Wheat </a> <a href="file:///Macintosh HD/Users/ekscott22/Documents/Hook N Horns Web/hunting.html">Hunting </a> <a href="file:///Macintosh HD/Users/ekscott22/Documents/Hook N Horns Web/management.html">Management </a></span></span></div>
<div class="bottom" id="photo"><img src="images/homepagecattle1.JPG" width="685" height="300" alt="cattle" /></div>
<div class="middle" id="banner">
</div>
<div class="middle" id="welcomeimage"><img src="images/welcomeimageslice.png" width="356" height="213" alt="Welcome to Hook-N-Horns Ranch" />
</div>
<div class="middle" id="welcometext"> <span class="tk-museo">In 2010, Hook-N-Horns Ranch, LLC was created as a small scale cattle and crop raising ranch. Today HNH manages over 1,000 acres of land with over 100 head of cattle.<br /><br />
HNH is proud to raise premium Black Angus beef, excellent crops of winter wheat as well as a maintaining healthy wildlife populations for large and small game hunting. Please explore our site to learn more about Hook-N-Horns Ranch. </span></div>
<img src="images/bigbackground.png" width="1280" height="800" />
</div>
