hi again, osgood. thank you for going to the trouble of testing my code; i'd be well pleased if you spot my error.
my previous post contained abbridged code to avoid tedium. here's the whole html (with pic now manually shortened to 859px)
<!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>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"/><link
href="css/print.css" rel="stylesheet" type="text/css" media="print"/>
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="logo">
<a href="index.html"><img src="logo"/>
</div>
<div id="social-media"> <a href="http://www.facebook.com/MossValeShow"><img src="images/facebook.jpg" /></a>
</div>
<div id="topnav">
<ul>
<li><a href="current show.html">2013 SHOW</a></li>
<li><a href="membership.html">MEMBERSHIP</a></li>
<li><a href="hire.html">SHOWGROUND HIRE</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
</div>
<div id="banner">
<img src="images/horse.gif" width="859"/>
</div>
<div id="content">
<h2>Welcome to the Moss Vale Show</h2>
<p>The Moss Vale & District AH&I Society Inc is dedicated to the promotion of agriculture, horticulture and industry in the Southern highlands of NSW. Our Annual Show provides a platform for the local community to showcase its skills in areas such as animal husbandry, horsemanship, art and craft and cookery. And it's quite good fun. </p>
<img class ="image-frame" src="images/tatting.jpg"/>
<img class ="image-frame" src="images/showground.gif"/>
<p> There are many ways to become involved with the Moss Vale Show. Entering an exhibit in the Pavilion is a great place to start, with classes to suit a broad range of interests and skill levels. It's a great place to get your kids involved, too. To avoid the queue at Showtime, why not join the Show Society? It's not expensive and every member's contribution makes planning the Annual Show and maintaining the grounds a little bit easier. You can also hire the grounds for your next event. We've had parties, picnics, conferences, sporting events and more. We can even help out with catering. </p>
</div>
<div id="rightside">
<h3>Upcoming Events</h3>
<h4>Autumn Horse Show</h4>
<h5>April 16th, 2012</h5>
<p>Showjumping and hacking.</p>
<h4>Moss Vale Market</h4>
<h5>April 6th, 2012</h5>
<p>A great range of local produce at one end and pre-owned treasure at the other on the 4th Saturday every month. Flea market stallholders admitted from 5am, no booking required.</p>
<h4>Annual Show</h4>
<h5>April 2nd, 2012</h5>
<p>It's the big one. </p>
</div>
<div id="footer">
<p>The Moss Vale Show and the Showground are wholly owned and operated by the Moss Vale AH&I Society</p>
</div>
</div>
</div>
</div>
</body>
</html>
************************************************
and here's the whole css:
/* CSS Document */
/* Color Legend */
/* Reset */
html, body { margin:0; padding:0; border:0; background:transparent; font-size:12px;}
div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h11, p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody, tfoot, thead {
margin:10px;
padding:0;
border:0;
vertical-align:baseline;
background:transparent;
}
img {
margin:10px;
padding:0;
border:0;
}
table, tr, th, td, tbody, tfoot, thead {
margin:10px;
padding:0;
border:0;
vertical-align:baseline;
background:transparent;
}
table {
border-collapse:collapse; border-spacing:0; }
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block
}
h1, h2, h3, h4, h5, h11, p, li, blockquote, td, th, a, caption, em, strong, strike {
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:100%;
font-weight:normal;
font-style:normal;
line-height:100%;
text-indent:0;
text-decoration:none;
text-align:left;
color:#000;
}
ol, ul {
list-style:none
}
/* Global */
html { }
body { background-image: url(../images/bush.jpg);}
/* Headings */
h1 {font-size:36px; }
h2 {font-size:30px; }
h3 {font-size:18px; }
h4 {font-size:18px; }
h11 {font-size:30px; }
h1 img, h2 img, h3 img, h4 img, h5 img, h11 img {margin:0; }
/* Text Elements */
p {color:#000; font-size:12px; line-height:120%; padding-bottom: 20px ; }
p .left {margin: 1.5em 1.5em 1.5em 0; padding:0; }
p .right {margin: 1.5em 0 1.5em 1.5em; padding:0; }
a { }
a:link {color:#903; }
a:visited {color:#C30; }
a:active {color:#903; }
a:focus {color:#903; }
a:hover {color:#09C; }
blockquote {color:#000; font-size:12px; }
strong {font-weight:bold; }
em {font-style:italic; }
/* Images */
.image-frame {padding:10px ; border: 1px #666 solid ; margin:10px; }
/* Lists */
ul { }
ol {list-style-type:decimal; }
ul li {color:#000; font-size:12px; }
ol li {color:#000; font-size:12px; }
dl { }
dt { }
dd { }
/* Tables */
table {width:100%; }
tr { }
.odd {background-color:#FFF; }
.even {background-color:#CCC; }
th {font-weight:bold; }
thead, th {background-color:transparent; }
tbody { }
th, td, caption { }
caption { }
tfoot { }
.tfooter {background-color:transparent; text-align:center; font-style:italic; }
caption {background:#efefef; }
/* Miscellaneous */
sup, sub {line-height:0 ;}
abbr, acronym {border-bottom: 1px dotted #666; }
address { }
del {background:#FFCECE; color:#F00; }
code, pre {background-color:#FF9; padding: 2px 0px; margin:4px 25px;font-family:"Courier New", Courier, monospace; font-size:12px; font-weight:normal; }
/* Containers */
#outer {
width:950px;
margin:0 auto;
background-color:#FFC;
}
#wrapper {
width:900px;
margin:20px auto;
background-color:#FFC;
}
#logo {margin:20px 0 0 0 ; padding-top: 30px; float:left; }
#logo a:link {color:#903; }
#logo a:visited {color:#903; }
#logo a:active {color:#903; }
#logo a:focus {color:#903; }
#logo a:hover {color:#903; }
#social-media { float:right; padding-top:150px; }
#topnav { clear:both; }
#topnav ul {
border-top:solid 1px #000;
border-bottom:solid 1px #000;
padding:10px ;
}
#topnav ul li { display:inline ; }
#topnav ul li a { padding: 0 8px; }
#topnav a:link {color:#000; }
#topnav a:visited {color:#000; }
#topnav a:active {color:#000; }
#topnav a:focus {color:#3F0; }
#topnav a:hover {color:#903; }
#banner {
}
#rightside {
width: 180px;
float:right;
background-color:#FFC;
padding: 0 15px;
font-size: 9px;
}
#content { width:650px; float:left; }
#footer {padding:15px; }
#footer p {clear: both; text-align:center; font-style:italic ; color: #666; border-top:solid 1px #666; padding:10px ; }
#box1 { }
#box2 { }
#box3 { }
/* Forms */
form {text-align:left; margin:20px; }
label, submit, input, textarea {
border:0 ; padding:0 ; margin:0 ; background:none ;
}
label {float:left ; width: 150px ; text-align:right ; display:block ;}
input, text area {
border:1px #333 solid ; margin-left: 10px ; }
input {width:280px ; margin-bottom:20px ; }
textarea {width: 280px; height: 150px; margin-bottom:16px ; }
select { }
.submit {width:90px ; height: 25px ; margin-left:150px ; font-size:12px ; }
br {clear:left; }
/* Miscellaneous */
.copyright-text {font-size:80%; font-style:italic; color:#666; }
.footer-text {font-size:80%; font-style:italic; color:#666; }
h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
color:#900;
margin-left:10px;
margin-bottom: 15px;
border-bottom:#666 solid 1px;
padding-bottom: 15px;
}
h3 {
font-family:Arial, Helvetica, sans-serif;
font-size:22px;
color:#000;
font-style:bold;
}
h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:underline ;
color:#000;
}
h5 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
color:#000;
margin:10px 0 3px 10px;
}
#h5 p {
margin-bottom:10px;
padding-bottom: 10px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#000;
}
