THIS works now in IE6 and Firefox 2.0.0.4. I moved the lunar img to be a 'background-image' of the anchor, -and it works! I removed an image or two from un-necessary DIV-containment. -You don't need to encapsulate an image with a DIV in order to style it... you can apply the style directly to the image with either inline-style, or class="".
WTH is the reason this wasn't working, I dunno -but I'm goning to sit back, snap-open a cold one (or three) and
not
let
it
bother me
a n y m o r e
...tonight. :D
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
<style type="text/css">
/* body styles */
* {
margin: 0;
padding: 0;
}
html, body {
height: 101%; padding-bottom:10px;
}
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #9CB1C2;
}
#wrapper {
min-height: 100%; height:100%;
width: 760px;
background-color: #F5F5F5;
border: 2px solid #74899A;
margin: 10px auto 2px auto;
}
/* font styles */
h1 {
font-size : 100%;
font-weight: bold;
text-align : center;
line-height: 300%;
color: #000078;
margin: 0px 0px 0px 0px;
}
h2 {
font-size : 100%;
font-weight: bold;
text-align : center;
color: #780000;
margin: 10px 0px 0px 0px;
}
p.mainleft {
/*font-family : sans-serif,arial,geneva,helvetica;*/
font-size : 100%;
font-weight: normal;
text-align : left;
text-indent : 20px;
color: #000000;
}
p.maincenter {
/*font-family : sans-serif,arial,geneva,helvetica;*/
font-size : 100%;
font-weight: normal;
text-align : center;
color: #000000;
}
/* space styles (1=16px) */
#sp8 {
height: 128px;
}
/* content styles */
#content {
position: relative;
text-align : center;
background-color: #F5F5F5;
/*background-color: #800000;*/
height: 96.4%;
width: 530px;
margin: 10px 25px 0px 207px;
}
* html #content {
margin: 10px 12px 0px 204px;
}
#content img {
position: absolute;
top: auto;
bottom: 25px;
left: 180px;
height: 69px;
border: 0;
}
/* navigation styles */
#leftnav {
position: relative;
float:left;
/*margin: 10px 0px 0px 12px;*/
left: 12px;
top: 10px;
width:170px;
height:96%;
text-align: center;
border: 2px solid #9CB1C2;
background: #808080 url(http://www.buffalosoftware.net/images/leftnav.gif) repeat-x;
}
/*
* html #leftnav{
margin: 10px 0px 0px 6px;
}*/
#leftnav a:link {
color: #D2D2D2;
}
#leftnav a:visited {
color: #D2D2D2;
}
#leftnav a:hover {
color: #E6E6E6;
font-weight: bold;
}
p.nav {
font-size : 100%;
font-weight: normal;
text-align : center;
line-height: 220%;
}
.imglogo {
position:relative;
margin-top:4px;
margin-left: 1px;
margin-bottom: 30px;
height: 112px;
}
.imglunar {
bottom: 6px;
left: 5px;
height: 45px;
width: 130px;
border: 0;
}
* html .imglunar{
bottom: 3px;
}
/* bottom nav styles */
#navlinks {
position: absolute;
top: auto;
bottom: 0px;
left: 0px;
background-color: #F5F5F5;
height: 10px;
width: 530px;
}
/* footer styles */
#footer {
clear: both;
width: 760px;
text-align: center;
background-color: #9CB1C2;
height: 20px;
margin: 8px auto 0 auto;
}
p.smfont{
font-size : 80%;
font-weight: normal;
text-align : center;
color: #000000;
}
</style>
<base href="http://www.buffalosoftware.net/" />
</head>
<body>
<div id="wrapper" style="position:relative;">
<div id="leftnav">
<img src="images/buffsoftlogo.gif" alt="Buffalo Software" style="margin-top:10px; width:113px; height:112px;" />
<p class="nav"><a href="index.htm">Home</a></p>
<p class="nav"><a href="products.htm">Products</a></p>
<p class="nav"><a href="contact.htm">Contact</a></p>
<a href="http://www.lunarpages.com/id/buffsoft" style="position:absolute; left:10px; bottom:20px; width:140px; height:40px; padding:0; margin:0; border:2px solid blue; background-color:gray; background-image:url(http://www.lunarpages.com/banners/images/static_125x40_01.gif)"></a>
</div>
<div id="content" style="">
<h1>Buffalo Software</h1>
<p class="mainleft">Welcome to the home of Buffalo Software. Thank you for your interest in our products. We take pride in creating innovative, high quality, and easy to use software. By the way, all of our software is FREE! So, take them for a test drive, and see what you think. Enjoy!</p>
<div id="sp8"></div>
<h1>coming soon...</h1>
<p>The PC Timer 5.0</p>
<p>The Patriot 3.0</p>
<p><a href="http://www.buffalofieldcampaign.org"><img src="images/savebuffalo.gif" alt="Save the Buffalo!" width="170" height="69"/></a></p>
<div id="navlinks"><p class="smfont"><a href="index.htm">Home</a> •
<a href="products.htm">Products</a> •
<a href="contact.htm">Contact</a></p>
</div>
</div>
<div id="footer" style="position:relative; top:4px; width:756px; padding:7px 0 2px 0; border:2px solid #f5f5f5; border-top:5px solid f5f5f5; margin-bottom:10px;"><p class="smfont">Copyright © 2007 Buffalo Software - All rights reserved. Please read our <a href="privacy.htm">Privacy Statement.</a></p></div>
</div>
</body>
</html>