You guys know the story; I have a page with CSS navigation that works properly in Firefox 2 but not IE 6 :-/
(FYI, I cleaned up the HTML and the CSS the best i know how)
Here’s a link so you can see how it looks in Firefox and IE:
http://www.thespeedlounge.com/FeatureRide/12-06/12-06test.shtml
Here’s the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>TSL: December's Feature Ride</title>
<meta name="Keywords" content="speed lounge, brs supra, jdm toyota, toyota, 2jz, featured ride, tsl"/>
<link rel="stylesheet" type="text/css" href="http://www.thespeedlounge.com/FeatureRide/styletest.css" />
<script src="http://www.thespeedlounge.com/navi.js" type="text/javascript"></script>
<style type="text/css">
A:link {text-decoration: none;
color:black;
}
A:visited {text-decoration: none;
color:black;
}
A:active {text-decoration: none;
color:black;
}
A:hover {text-decoration: underline; color: red;}
body {
text-align:center;
background-image: url(../../images/tile.jpg);
background-repeat: repeat-x;
}
#container {
width:950px;
margin:auto;
padding:0px;
text-align:left;
}
#left {
height:2096px;
float:left;
voice-family: "\"}\"";
voice-family:inherit;
}
.leftmenu2 {
height:2056px;
}
#middle {
height:2096px;
float:left;
voice-family: "\"}\"";
voice-family:inherit;
}
.middlemenu2 {
height:2056px;
}
#right {
height:2096px;
float:left;
voice-family: "\"}\"";
voice-family:inherit;
}
.rightmenu2 {
height:2056px;
}
.floatright {
float: right;
margin: 5px 5px 5px 5px;
border: 1px solid #666;
}
.floatleft {
float: left;
margin: 5px 5px 5px 5px;
border: 1px solid #666;
}
</style>
</head>
<body>
<div id="container">
<div id="title">
<!--#include virtual="/header.html" -->
</div>
<div id="header"></div>
<div id="navi">
<!--#include virtual="/nav2.html" -->
</div>
<br />
<div id="left">
<p class="leftmenu"> >> <strong>Spec Sheet</strong></p>
<p class="leftmenu2">
<strong>Owner:</strong> Kahlee Aguilar-Ramos<br />
<br />
<strong>Make:</strong> Toyota <br />
<strong>Model:</strong> Supra <br />
<strong>Year:</strong> 1994<br /><br />
<strong>Engine:</strong> 2JZ-GTE
<br /><br />
<strong>Engine Modifications:</strong><br />
Brian Crower crank, Brian Crower rods, Brian Crower cams, Brian Crower sprockets, Brian Crower valves, Brian Crower valve springs, Arias Pistons, RC Engineering 1000cc injectors, Full-Race Intake manifold(intake not installed in the pictures), Full-Race exhaust manifold, Garrett GT 42R prototype turbocharger, PWR oil cooler, PWR intercooler, PWR Radiator, HKS DLI
<br /><br />
<strong>Engine Management:</strong><br />
AEM EMS, Apex’i AVC-R, Apex’i S-AFC, Apex’i RSM
<br /><br />
<strong>Drivetrain:</strong> <br />
Stock
<br /><br />
<strong>Suspension:</strong> <br />
Tein Super Circuit coilovers, Battle Version arm links
<br /><br />
<strong>Wheels, Tires, Brakes:</strong> <br />
J-Line wheels, Toyo R888 Tires 275/30-18 fronts and 305/30-18 rears
<br /><br />
<strong>Chassis, Body:</strong> <br />
JGTC Wide Body kit by BRS Autodesign, Battle Version roll cage
<br /><br />
<strong>Interior:</strong> <br />
Bride Ergo seats, Simpson harnesses, Nardi steering wheel
<br /><br />
<strong>Numbers:</strong><br />
Power- 824 WHP<br />
torque- 690 foot pounds<br />
<br /><br />
<strong>Future Mods: ???</strong><br />
</p>
</div>
<!--PUT THE ARTICLE IN HERE -->
<div id="middle">
<p class="middlemenu"> >> <strong>Feature Ride</strong></p>
<p class="middlemenu2">
<span class="style7"><strong>A Long Strange Trip</strong></span><br />
<span class="style2">Lyrics by Rich Lavigne, Artwork by Rich Lavigne and Chris Manacop</span>
<br />
<br />
<!-- enter the link for the forum post here-->
<a href="http://www.thespeedlounge.com/forums/showthread.php?p=26066#post26066" target="_blank"><img src="topofarticle.jpg" alt="gotta love Cali" width="470" height="313" border="0" class="topimage"/></a><br />
<br />
<span class="style1"> <!--THIS IS THE START OF THE ARTICLE, bREAK THE PARAGRAPHS THE WAY I HAVE IT CURRENTLY -->
As 2006 comes to an end, I thought it’d be appropriate to take a few minutes and think back over the course of the year. TheSpeedLounge started in 2005 as a small regionally based website, with about 1500 members. We had done our first few Featured Rides in 2005 and continued that into 2006. Fast forward 12 months and boy what a long, strange trip it’s been. We now have over 3,000 members, a full year’s worth of Featured Rides in the bag and some of the best event video and photo coverage on the world wide web. In addition to that and much to the delight of some of our male members, we’ve added our Shotgun section which features some of the newest and hottest up and coming models. Much like the history of TSL, this months Feature has been on a long, strange trip as well.
<br />
<br />
The first Time I met Kahlee and saw his Supra was during the spring of 1999. I had just started working in a local shop called Intense<a href="017.jpg" target="_blank" title="Nice, but does he know how to use them"><img class="floatright" src="thumbnails/017.jpg" border="0" alt="Nice, but does he know how to use them" /></a> Tuning and being that it was one of the few local tuner shops at the time, many of the local racers started to come through the doors including a few members of the Alpha crew. At that time, Kahlee’s Supra was relatively stock. He had just begun hooking it up with a new front mount intercooler, the standard alphabet soup of devices from Apex’i and HKS including the S-AFC, AVC-R and VPC. As is the case with most tuners, Kahlee spent the next few years gradually working on his Supra, entering car shows and drag-races and did fairly well at more than a few bracket events at Raceway Park. Ultimately, Kahlee’s silver Supra was selected to be a cover and feature car for the an issue of D-Sport magazine. Being the cover car of a magazine is a great honor and some would argue it represents one of the pinnacles of our scene, something to aspire to, but it forced Kahlee to think about a few things regarding the future of his project. Once featured on a magazine, your car has pretty much run the course and in order to be featured again or get any more attention you either need to start with a new car or do something radically different to catch people’s attention. It was at this point, that Kahlee knew that if he wanted to realize his dream of being a SEMA featured vehicle, he’d have to make some changes…big changes.
<br />
<br />
In 2004, Kahlee sent the car out to California for a complete engine overhaul and body kit transformation. Kahlee is good friends with Jojo Callos, of import drag-racing fame, and the two of them set out to create some serious horsepower from the Toyota 2JZ-GTE power plant. Engine internals from Brian Crower and Arias were selected to handle the high boost, including a new crank, rods and pistons. Brian Crower cams, valves and valve springs all control the insane amount of boosted air pounding into the engine. A Full Race exhaust manifold mounted to a prototype Garrett GT 42R turbocharger ensure that boost is quickly spooled up and a Full Race intake manifold distributes the boost efficiently to all 6 cylinders. A whole host of cooling accessories from PWR keep everything cold and safe, including a PWR intercooler, oil cooler, and radiator. Engine management duties are handled by an AEM Engine Management System as well as those very same devices that Kahlee originally installed. All of these engine and tuning upgrades, allowed Kahlee and Jojo to make a total of 824 hp and 690 lb/ft of torque<a href="012.jpg" target="_blank" title="the wheels on the bus go round and round"><img class="floatleft" src="thumbnails/012.jpg" border="0" alt="the wheels on the bus go round and round" /></a> .
<br />
<br />
It was at this point that Kahlee realized that he wanted to start moving his focus from drag-racing toward road-racing and time attack events. With so much power on tap, Kahlee new he’d need a nicely set up suspension to put the power to the pavement. He selected Tein’s Super Circuit Coilovers to spring and shock dampening duties and arm links from Battle Version. For those of you out there that aren’t familiar with Battle Version, they are a new company started by Drifter and Road-Racer, Alex Pfeifer.
<br />
<br />
When building a road-racing or time attack Supra, there’s only one real model to follow and that’s the Japanese Grand Touring Championship, where they compete in the GT500 class. The beasts of the JGTC while only having 500 hp, are still some of the most technically advanced machines on the planet and you can be assured that if it doesn’t make the car go faster, they don’t use it. It was only natural for Kahlee to model his car after these machines and he knew that the widebody and lines of the JGTC cars, not only looked sexy, but made sure that the car stayed planted and stable at high speeds. With that in mind, Kahlee approached his friends at BRS Autodesign, who specialize in wide body kits, to design and manufacture a JGTC style wide-body kit. The entire body kit is custom made and when coated in the bright Fuscia paint from BASF, really becomes the most striking thing you notice about the car. Custom wheels from J-Line were anodized to match the car and wrapped in Toyo Tire’s newest road-racing spec tire, the R888. A big brake kit from JBT makes sure that it can hold up and stop to match it’s get up and go.
<br />
<br />
In November, Kahlee realized his second goal with his Supra, becoming a featured car at the annual SEMA Show in Las Vegas, Nevada. He was chosen by Toyo tires to be in their booth and is even featured in some of their advertisements. Shortly thereafter, Kahlee took part in his first Time Attack event at Buttonwillow Raceway.
<br />
<br />
I’m sure that we haven’t heard the end of this story yet, but just like the growth of TSL, it’s been a long strange trip.
<br />
<br />
See you guys next year. Have a great holiday season and a Happy New Year! Be on the lookout for more from us in 2007 with our annual, “Old School for the New Year”.
<br />
<br />
<em>Kahlee would like to thank...<br/><br/>
Jojo Callos @Cure Automotive, Brian @ Brian Crower, Geoff @ Full-Race, RC Engineering, Stan @ Toyo tires, Mike Burlas, Erwin Jereidini, Don@ Straightline Performance, Tein, Clint @ PWR, J-Line, JBT Brakes, Bri @ Bridges Racing, Brian AKA Barry @ <a href="http://www.eastsleeprace.com" target="_blank" title="Eat Sleep Race">Eat Sleep Race</a>, The crew @ Fontana Nissan, Alpha Crew, Dave AKA monemakindave, Franics aka Speedlounge, Rich AKA DC-5, and the rest of The Speed Lounge crew...
</em><br />
<br />
<br />
What do you think of this month’s Featured Ride? Post your comments
<!-- enter the link for the forum post here-->
<a href="http://www.thespeedlounge.com/forums/showthread.php?p=26066#post26066">here</a>.<br/><br/><br/>
</span>
</p>
</div>
<div id="right">
<p class="rightmenu"> >> <strong>Artwork</strong></p>
<p class="rightmenu2" align="center"><br />
<a href="002.jpg" target="_blank"><img class="image" src="thumbnails/002.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="003.jpg" target="_blank"><img class="image" src="thumbnails/003.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="004.jpg" target="_blank"><img class="image" src="thumbnails/004.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="005.jpg" target="_blank"><img class="image" src="thumbnails/005.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="006.jpg" target="_blank"><img class="image" src="thumbnails/006.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="007.jpg" target="_blank"><img class="image" src="thumbnails/007.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="008.jpg" target="_blank"><img class="image" src="thumbnails/008.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="009.jpg" target="_blank"><img class="image" src="thumbnails/009.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="010.jpg" target="_blank"><img class="image" src="thumbnails/010.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="011.jpg" target="_blank"><img class="image" src="thumbnails/011.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="012.jpg" target="_blank"><img class="image" src="thumbnails/012.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="013.jpg" target="_blank"><img class="image" src="thumbnails/013.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="014.jpg" target="_blank"><img class="image" src="thumbnails/014.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="015.jpg" target="_blank"><img class="image" src="thumbnails/015.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="016.jpg" target="_blank"><img class="image" src="thumbnails/016.jpg" border="0" alt="thumbnails"/></a><br /><br />
<a href="017.jpg" target="_blank"><img class="image" src="thumbnails/017.jpg" border="0" alt="thumbnails"/></a><br /><br />
</p>
</div>
<div id="footer" >
<!--#include virtual="/footer.html" -->
</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-418872-1";
urchinTracker();
</script>
</body>
</html>
And here’s the CSS sheet:
.floatleft {
float: left;
margin: 5px 5px 5px 5px;
border: 1px solid #666;
}
.image {
border: 1px solid #666;
}
.topimage {
border: 1px solid #666;
margin-left:40px;
}
.top {
margin-bottom:-3px;
}
.title {
margin-top:-1px;
margin-bottom:-4px;
}
.navi {
margin-top:-1px;
border:0px;
}
#navi {
width:920px;
height:50px;
border:0;
padding:0;
}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #navi { /* ie5win fudge ends */
width:920px;
}
#google {
border:0;
padding:0;
float:left;
width:300px;
}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #google { /* ie5win fudge ends */
width:300px;
}
#title {
width:920px;
height:61px;
border:0;
padding:0;
}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #title { /* ie5win fudge ends */
width:920px;
height:61px;
}
#header {
width:920px;
height:320px;
border:0;
padding:0;
background-image: url(../../images/ride.jpg);
}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #header { /* ie5win fudge ends */
width:920px;
height:320px;
border:0;
padding:0;
}
#left {
border-right:1px solid #999999;
border-bottom:1px solid #999999;
width:176px;
}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #left {
/* ie5win fudge ends */
width:176px;
}
.leftmenu {
border:1px solid #000000;
voice-family: "\"}\"";
voice-family:inherit;
width:162px;
padding:5px;
background-color:#333333;
margin:1px 1px 0px 1px;
color:#FFFFFF;
height:15px;
font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.leftmenu2 {
border-bottom:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
width:162px;
padding:5px;
background-color:#999999;
margin:0px 1px 1px 1px;
color:#000000;
font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
#middle {
border-right:1px solid #999999;
border-bottom:1px solid #999999;
float:left;
voice-family: "\"}\"";
voice-family:inherit;
width:558px;
margin-left:4px;
}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #middle { /* ie5win fudge ends */
width:558px;
}
.middlemenu {
border:1px solid #000000;
padding:5px;
background-color:#333333;
margin:1px 1px 0px 1px;
color:#FFFFFF;
height:15px;
width:547px;
font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
html>body .middlemenu { /* ie5win fudge ends */
width:544px;
}
.middlemenu2 {
border-bottom:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
padding:5px;
background-color:#999999;
margin:0px 1px 1px 1px;
color:#000000;
width:544px;
font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
#right {
border-right:1px solid #999999;
border-bottom:1px solid #999999;
float:left;
voice-family: "\"}\"";
voice-family:inherit;
width:176px;
margin-left:4px;
}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #right { /* ie5win fudge ends */
width:176px;
}
.rightmenu {
border:1px solid #000000;
padding:5px;
background-color:#333333;
margin:1px 1px 0px 1px;
color:#FFFFFF;
height:15px;
width:162px;
font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.rightmenu2 {
border-bottom:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
padding:5px;
background-color:#999999;
margin:0px 1px 1px 1px;
color:#000000;
width:162px;
font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
#footer {
width:920px;
padding:2px;
text-align:center;
font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #footer { /* ie5win fudge ends */
width:920px;
}
<!-- /* NAVIGATION */ -->
dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 20px;
padding: 0;
}
#menu {
position : relative;
left: 8px;
top: 10px;
}
#menu dl {
float: left;
}
#menu li {
display: inline;
}
#menu a {
text-decoration: none;
color: #fff;
background: #999;
font:Verdana, Arial, Helvetica, sans-serif;
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8 {
position: absolute;
left: 20px;
font-size: 0.7em;
border-top: 1px solid black;
width: 815px;
}
.navi {
margin-top:-1px;
border:0px;
}
#navi {
width:920px;
height:50px;
border:0;
padding:0;
font: 18px Arial, sans-serif;
background-color:#999999;
}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #navi { /* ie5win fudge ends */
width:920px;
}
<!-- /* HEADER */-->
#head {
position : absolute;
left: 810px;
top: 50px;
}
#head dl {
float: left;
}
#head li {
display: inline;
}
#head a {
text-decoration: none;
color: #fff;
background: #999;
}
And if it helps, here is the code for the Navigation:
<div id="menu">
<dl>
<dt onmouseover="montre('smenu1');"><a href="http://www.thespeedlounge.com/tsltv.shtml">TSL TV</a></dt>
<dd id="smenu1">
<ul>
<li>TSL TV:</li>
<li><a href="http://www.thespeedlounge.com/tsltv.shtml">Check out the latest videos that only The Speed Lounge can provide.</a></li>
<li><a href="#"></a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu2');"><a href="#">Features</a></dt>
<dd id="smenu2">
<ul>
<li>Features:</li>
<li><a href="http://www.thespeedlounge.com/garage.shtml">Garage</a></li>
<li><a href="http://www.thespeedlounge.com/shotgun.shtml">Shotgun</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu3');"><a href="#">Intel</a></dt>
<dd id="smenu3">
<ul>
<li>Intel:</li>
<li><a href="http://www.thespeedlounge.com/info.shtml">Info</a></li>
<li><a href="http://www.thespeedlounge.com/press.shtml">Press</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu4');"><a href="http://www.thespeedlounge.com/stuff.shtml">Store</a></dt>
<dd id="smenu4">
<ul>
<li>TSL's Store:</li>
<li><a href="http://www.thespeedlounge.com/stuff.shtml">Got your exclusive Speed Lounge T-Shirt or Hoodie yet?</a></li>
<li><a href="#"></a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu5');"><a href="http://www.thespeedlounge.com/forums/">Forum</a></dt>
<dd id="smenu5">
<ul>
<li>TSL's Forums:</li>
<li><a href="http://www.thespeedlounge.com/forums/">Enough about us, we want to hear from you.</a></li>
<li><a href="#"></a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu6');"><a href="http://www.thespeedlounge.com/photopost/">Gallery</a></dt>
<dd id="smenu6">
<ul>
<li>TSL's Photo Gallery:</li>
<li><a href="http://www.thespeedlounge.com/photopost/">Check out the latest photos from all events in the Sport Compact scene.</a></li>
<li><a href="#"></a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu7');"><a href="http://www.thespeedlounge.com/links.shtml">Links</a></dt>
<dd id="smenu7">
<ul>
<li>TSL's Links:</li>
<li><a href="http://www.thespeedlounge.com/links.shtml">If you like us, then you gotta check these sites out.</a></li>
<li><a href="#"></a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu8');"><a href="#">TSL</a></dt>
<dd id="smenu8">
<ul>
<li>TSL:</li>
<li><a href="http://www.thespeedlounge.com/about.shtml">About</a></li>
<li><a href="http://www.thespeedlounge.com/contact.shtml">Contact</a></li>
</ul>
</dd>
</dl>
</div>
Can anyone suggest how I can get the navigation to display correctly??
