Hello Friends


Here's my dilemma. My website looks lovely in all browsers, except Internet Explorer 7,8,9...

The layout is set up with a sidebar on the left hand side. It contains links, logo. Next to that sidebar there is another on the right hand adjacent side to it, containing more links (basically a sub-link group of the others.) The content is adjacent to the right side of that sub-link box. The sidebar, subbar, and content box are all within a table, for layout purposes. Each <td> contains it's respective content (#sidebar, #subbar, #mainContainer, etc.) In the main content box there is a nivo slider, transitioning through several pictures. When that slider renders the next picture, the subbar and mainContainer <td>s SCRUNCH into the left-most sidebar. When I scroll over a link in the sidebar or sub-bar, the page repositions itself. However, either before or after this reposition, only the first two links in the sidebar are clickable/mouseOver-able. I am assuming this has something to do with the position:relative/position:absolute attributes associated with the nivo slider.

Here is the code ; Hopefully it's not too sloppy

Any help would be greatly appreciated!

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">




<!-- HEADER ---------------------------------------------------------------->
<!-- HEADER ---------------------------------------------------------------->
<head>

<link href="PPdesert.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="PPdesertIE.css" />
<![endif]-->
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!--[if IE]>
<script src="modernizr-2.0.min.js"></script>
<![endif]-->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Paradise for your Pet :: Reptile Enclosure by Timothy Zielinski</title>

</head>
<!-- HEADER ---------------------------------------------------------------->
<!-- HEADER ---------------------------------------------------------------->



<body id="main" bgcolor="#7E2217" >


<!-- Table for Entire Page Alignment -->
<table>
<tr>


<td id="containerSide" align="left" valign="top">
<!-- SIDEBAR --------------------------------------------------------------->
<!-- SIDEBAR ----------------------------------------------------------------------------------->
<!-- SIDEBAR --------------------------------------------------------------->
<div id="linkBut" align="left" valign="top" >
<table id="sideBar" width="300px">

<tr>
<td width="35px" id="border" rowspan="100">
</td>
<td align="center">
<img id="linkPic" src="logoHeader.png" />
</td>
<td id="border2" width="35px" rowspan="100">
</td>
</tr>
<tr>
<td id="links" align="center">
<a id="about" href="about.html" />
</td>
</tr>
<tr>
<td id="links" align="center">
<a id="features" href="#" />
</td>
</tr>
<tr>
<td id="links" align="center">
<a id="gallery" href="#" />
</td>
</tr>
<tr>
<td id="links" align="center">
<a id="order" href="Order.html" />
</td>
</tr>
<tr>
<td id="fBox" align="center">
<a id="fBook" href="#" />
</td>
</tr>
<tr>
<td id="fBox" align="center">
<a id="tWit" href="#" />
</td>
</tr>
<tr>
<td height="900px">
</td>
</tr>
</table>

</div>

<!-- SIDEBAR --------------------------------------------------------------->
<!-- SIDEBAR --------------------------------------------------------------->
<!-- SIDEBAR --------------------------------------------------------------->
</td>
<!-- CHOICES BAR ----------------------------------------------------------->
<!-- CHOICES BAR ----------------------------------------------------------->
<!-- CHOICES BAR ----------------------------------------------------------->
<td id="containerBorder" valign="top" style="padding-top:100px;">
<table id="choices">
<tr>
<td id="choicesIn">
<a id="desert" href="ParadisePetDesert.html" />
</td>
</tr>
<tr>
<td id="choicesIn">
<a id="cove" href="ParadisePetCove.html" />
</td>
</tr>
<tr>
<td id="choicesIn">
<a id="island" href="ParadisePetIsland.html" />
</td>
</tr>
<tr>
<td id="choicesIn">
<a id="seaL" href="ParadisePetSea.html" />
</td>
</tr>

</table>
</td>
<!-- CHOICES BAR ----------------------------------------------------------->
<!-- CHOICES BAR ----------------------------------------------------------->
<!-- CHOICES BAR ----------------------------------------------------------->






<!-- MIDDLE ------------------------------------------------------------------------------>
<td id="containerMain" align="right" valign="top" >
<!-- MIDDLE ------------------------------------------------------------------------------>
<!-- MIDDLE ------------------------------------------------------------------------------>
<!-- MIDDLE ------------------------------------------------------------------------------>
<div id="habTitle">
<img id="desertTitle" src="desHab.png" alt="Desert Habitats" align="left" />


</div>


<div id="ieContainer" align="left">
<div id="pagewrap" style="padding-top:150px;">
<header>
<h1>

</h1>
</header>

<div id="slidewrap">
<div id="slider">
<img alt="Desert Habitat" title="#caption1" src="034.jpg" />
<img alt="Desert Habitat" title="#caption1" src="013.jpg" />
<img alt="Desert Habitat" title="#caption1" src="022.jpg" />
<img alt="Desert Habitat" title="#caption1" src="032.jpg" />
<img alt="Desert Habitat" title="#caption1" src="088.jpg" />
<img alt="Desert Habitat" title="#caption1" src="037.jpg" />
</div>
<div class="ribbon"></div>
<div id="caption1" class="nivo-html-caption">
<span class="title">Name:</span><br/>
Sunnyside<br/><br/>
<span class="title">Climate:</span><br/>
Desert<br/><br/>
<span class="title">Built For:</span><br/>
Bearded Dragon<br/><br/>
<span class="title">Showcased:</span><br/>
Mar 18, 2012
</div>


</div>
</div>
<!-- MIDDLE ------------------------------------------------------------------------------>
<!-- MIDDLE ------------------------------------------------------------------------------>
<!-- MIDDLE ------------------------------------------------------------------------------>

<!-- INFO ------------------------------------------>
<!-- INFO ------------------------------------------>
<!-- INFO ------------------------------------------>

<div id="informationes" align="center">
<img id="moreInfo" src="islandInfo.png" alt="Information about Habitats" />
<table id="wikiContainer" width="800px">
<tr>
<td align="left">



<h3 id="wikiTit" style="padding-top:25px;">
Example Shown:
</h3>
<h2 id="wiki">
Turtle Island is a custom habitat built for Turtles who love to bask.

It is a multi climate habitat including both island and aquatic areas.

The island portion of the habitat includes both a feeding and basking area for the turtles.
Because turtles must swallow their food under the water, either side of the island gradients into an aquatic habitat ;
The island is easily accessible from the aquatic habitats located on either side of the fixture.
Both aquatic habitats are enriched with freshwater creatures , creating a flourishing island ecosystem.
</br>
</br>
Not all creatures live harmoniously together, so please consult with our professionals when making selections for your ecosystem.




<h3 id="wikiTit" style="padding-top:25px;">
Acceptable Species:
</h3>

<h2 id="wiki">
-Bearded Dragons
</br>
-Iguanas
</br>
-Small Tortoises
</br>
-Geckos (Leopard, Spotted)
</br>
-Desert Snakes
</br>
</br>
</h2>
<h3 id="wikiTit">
Habitat Care:
</h3>

<h2 id="wiki">
Most habitats created for you by Paradise for your Pet are self sustaining ecosystems and require little maintenance.
</br>
There are some elements that should be monitored. Please visit the <a id="care" href="#">Habitat Care</a> page for more information on your habitat.

</br>
</br>


</h2>

<h3 id="wikiTit">
Size:
</h3>

<h2 id="wiki">
Small - 25 gallons
</br>
Medium - 50-100 gallons
</br>
Large - 100-200 gallons
</br>
Extra Large - 200+ gallons
</h2>
</h2>
</td>
</tr>
</table>
</div>






<!-- INFO ------------------------------------------>
<!-- INFO ------------------------------------------>
<!-- INFO ------------------------------------------>




</td>
</tr>
</table>
</body>






</html>