Pixel, I somehow saved the trimmed files as a png.tmp file. Can you explain what the tmp file is? The image now shows up in design view on DW but not on uploaded site. Also, the footer shows up fine in DW but when uploaded site is displayed you can see it is not aligned properly. It goes just under the header image.
http://www.applingpiratesbaseball.com/directions.html
Code is below...
<!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>
<title>Home Page</title>
<link rel="stylesheet" href="main.css">
<body>
<div id="header">
<img src="images/header_logo.jpg" alt="Pirates Baseball" width="960" height="173"/></div>
<div id="mid">
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="roster.html">Roster</a></li>
<li><a href="jrvarsity.html">Junior Varsity</a></li>
<li><a href="middle.html">Middle School</a></li>
<li><a href="players.html">Players at Next Level</a></li>
<li><a href="coaches.html">Coaches </a></li>
<li><a href="history.html">History</a></li>
<li><a href="news.html">News</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="region.html">Region 2-AA</a></li>
<li><a href="facilities.html">Facilities</a></li>
<li><a href="dugoutclub.html">Dugout Club</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="concessions.html">Concessions</a></li>
<li><a href="summer.html">Summer Ball</a></li>
<li><a href="directions.html">Directions</a></li>
</ul>
<div class="content">
<p> porttitor quis luctus erat tristique. </p>
</div>
</div>
<div id="footer"></div>
</body>
CSS
body {
font-family:Georgia, serif;
font-weight:normal;
font-size:9pt;
color:#C9AC7D;
background: url( dirt.jpg) repeat;
text-align: center;
width: auto;
}
div#header, div#mid, div#footer {
position:relative;
width:960px;
left:50%;
margin:0 0 0 -480px;
padding:0;
}
div#mid {
text-align: center;
}
div#footer {
background-color:#960;
height:60px;
bottom: inherit;
margin-bottom: 5px;
}
ul.links {
float:left;
margin:0;
padding:0;
width:160px;
height:auto;
}
ul.links li {
list-style-type:none;
margin:2px 0;
padding:0;
}
ul.links a:link, ul.links a:visited {
display:block;
font-weight:bold;
font-size:11pt;
color:#fff;
width:160px;
height:37px;
line-height:37px;
text-align:center;
text-decoration:none;
background: url(images/button.png.tmp) no-repeat;
outline:none;
padding:0;
margin:0;
}
ul.links a:hover, ul.links a:focus {
background:url(images/over.png.tmp)
)
}
div.content {
float:left;
background-color: #666;
margin:2px;
width: 796px;
min-height:450px;
}
div.content p {
text-align:center;
padding:20px;
margin:0;
}
The body also has the background tile.