Had to rework quite a bit of it, and change some images, but this now works in IE6 aswell.
HTML:
Code:
<!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>
<link rel="stylesheet" href="index.php_files/style.css" type="text/css" media="screen">
<script type="text/javascript" src="http://67.222.130.14/~performa/jquery.js"></script>
<script type="text/javascript" src="http://67.222.130.14/~performa/superfish.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.nav")
.superfish({
pathClass : 'current',
animation : { opacity:"show",height:"show"},
delay : 400
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Performance Marine</title></head><body>
<div class="head">
<div class="logo">
<img src="http://67.222.130.14/~performa/images/logo.jpg">
<div class="menu">
<ul class="nav superfish">
<li class="">
<a href="http://67.222.130.14/%7Eperforma/index.php"><strong>HOME</strong></a> </li>
<li class="">
<a href="#"><strong>SALES</strong></a>
<ul style="display: none; visibility: hidden;">
<li>
<a href="http://67.222.130.14/%7Eperforma/newboats.php">New Boats</a> </li>
<li>
<a href="http://67.222.130.14/%7Eperforma/campion.php">Campion</a> </li>
<li>
<a href="http://67.222.130.14/%7Eperforma/raider.php">Raider</a> </li>
<li>
<a href="http://67.222.130.14/%7Eperforma/usedboats.php">Used Boats</a> </li>
<li>
<a href="http://67.222.130.14/%7Eperforma/engines.php">Engines</a> </li>
<li><a href="http://67.222.130.14/%7Eperforma/suzuki.php">Suzuki</a></li>
<li><a href="http://67.222.130.14/%7Eperforma/volvopenta.php">Volvo Penta</a></li>
<li><a href="http://67.222.130.14/%7Eperforma/mercruiser.php">Mercruiser</a></li>
<li>
<a href="http://67.222.130.14/%7Eperforma/trailers.php">Trailers</a> </li>
</ul>
</li>
<li class="">
<a href="#"><strong>FAQ</strong></a>
<ul style="display: block; visibility: hidden;">
<li>
<a href="http://67.222.130.14/%7Eperforma/aboutus.php">About Us</a> </li>
<li>
<a href="http://67.222.130.14/%7Eperforma/directions.php">Directions</a> </li>
</ul>
</li>
<li class="">
<a href="#"><strong>SERVICE</strong></a>
<ul style="display: none; visibility: hidden;">
<li>
<a href="http://67.222.130.14/%7Eperforma/accessories.php">Accessories</a> </li>
<li>
<a href="http://67.222.130.14/%7Eperforma/service.php">Service</a> </li>
<li>
<a href="http://67.222.130.14/%7Eperforma/parts.php">Parts</a> </li>
<li>
<a href="http://67.222.130.14/%7Eperforma/storage.php">Storage</a> </li>
</ul>
</li>
<li class="">
<a href="http://67.222.130.14/%7Eperforma/contact.php"><strong>CONTACT</strong></a> </li>
</ul>
</div>
</div>
</div>
<div id="gradient"><img src="http://67.222.130.14/~performa/images/frontfillerlogos.jpg" /></div>
<div id="wrapper">
<div class="container">
<div class="content"><h1>Welcome to Performance Marine</h1>
<p>Since 1979, Performance Marine has supplied quality factory
authorized warranty service to Everett and Seattle, Washington boat
owners. Consistently awarded Superior Service Awards, as well as named
the top service department by Suzuki Marine. We feature new and used
boat sales, superior service and quality Suzuki Outboard, Volvo Penta
and Mercury Marine parts for our customers in the Seattle-Everett area.<br><br>
Performance Marine has supplied the Northwest with it's services for
over 20 years. If you need your boat serviced, parts for your boat, or
are looking for a new boat. We here at Performance Marine would be glad
to help you with any questions you may have. </p></div>
<div class="footer">
<small>Performance Marine, Inc. © Copyright 2008. All Rights Reserved. Site Design By: <a href="http://www.creationsbe.com/" target="_blank">Creationsbe.com</a></small><br>
<small>930 West Marine View Drive, Everett WA 98201</small></div>
</div>
</div></body></html>
CSS:
Code:
/* There is a version of this file commented in great detail for educational purposes here:
* http://users.tpg.com.au/j_birch/plugins/superfish/superfish.commented.css
*/
/*** ESSENTIAL STYLES ***/
.nav, .nav * {
margin:0;
padding:0;
list-style:none;
}
.nav {
line-height:1.0;
}
.nav ul {
position:absolute;
top:-999em;
width:9.45em;
}
.nav ul li,
.nav a {
}
.nav li {
float:left;
position:relative;
z-index:99;
}
.nav a {
display:block;
}
.nav li:hover ul,
ul.nav li.sfHover ul {
left:-1px;
top:2.5em;
}
.nav li:hover li ul,
.nav li.sfHover li ul {
top:-999em;
}
.nav li li:hover ul,
ul.nav li li.sfHover ul {
left:9.45em;
top:-1px;
}
.superfish li:hover ul,
.superfish li li:hover ul {
top: -999em;
}
.clear {
clear:both;
}
/*** ORIGINAL SKIN ***/
.nav {
margin-bottom:1.5em;
font-family: Trebuchet MS;
}
.nav li {
background: url(images/topbg.jpg) bottom;
border-left:0px;
border-top:0px;
width:7.45em;
}
.nav a {
color: #000000;
padding: .75em 0;
text-decoration:none;
text-align:center;
}
.nav li:hover, .nav li.sfHover {
background:#FFFFFF;
}
.nav a:focus, .nav a:hover, .nav a:active {
background:#008bd5;
}
.nav li li {
background:#FFFFFF;
}
.nav li li li {
background:#9AAEDB;
}
body {
background: #252b30 url(images/pagebg.gif) repeat-y 50% 0;
margin: 0;
height: 100%;
margin-left:1px;
}
h1 {
font-family: Trebuchet MS; color: #0071bc; font-size: 18px;
}
.container {
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
background: #FFFFFF;
display: block;
width: 800px;
z-index: 0;
clear:both;
}
.head {
height:123px;
background:#fff url(images/topbg.jpg) repeat-x bottom ;
}
.logo {
width:800px;
margin:0 auto;
}
.logo img {
position:absolute;
float:left;
z-index:100000;
}
.footer {
width: 800px;
padding:55px 0;
text-align: center;
margin: 0 auto;
font-family: Trebuchet MS; font-size: 12px; font-color: #252b30; font-weight: bold;
}
.menu {
position:absolute;
float:left;
margin: 0;
z-index: 1000;
margin-top:83px;
margin-left:229px;
width:677px;
}
.content {
text-align: left;
width: 750px;
padding: 15px;
font-family: Trebuchet MS; font-size: 14px;
float:left;
}
#wrapper {
margin:0 auto;
width:800px;
}
#gradient {
text-align:center;
background:url(images/contentbg.jpg) repeat-x;
}
Here is a zip of the 3 images you need.
Grab them here
I advise you to use position:absolute; as rarely as possible, learn how to use floats to arrange your page.
Hybrid Mode
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed