Positioning issues with Internet Explorer 9

**SkullBulbStudio** · 04-07-2012 07:12 PM

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">



<head>

<link href="PPdesert.css" rel="stylesheet" type="text/css" />

<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>


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

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

</head>



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


<table>
<tr>

<td id="containerSide" align="left" valign="top">



<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>




</td>



<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>





<td id="containerMain" align="right" valign="top" >



<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>








<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>





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

</html>

**Troy III** · 04-08-2012 06:02 AM

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

but you are calling 'modernizer' which is made for html5 tags support on Gen4 browsers.
yet you are not using a single 'modern' tag thrughout your doc.

what's with the </br>
</br> tag?

you are also using <td id="containerMain" align="right" valign="top" >
align which is also deprecated etc

**Eye for Video** · 04-08-2012 09:08 AM

If that is ALL the code, then you are missing a VERY important part, the DOCTYPE declaration:
http://www.w3schools.com/tags/tag_doctype.asp
This should be the very first line of code. It sets the rules by which the browser will parse the page. To pull IE into line, you'll need to add it.
Best wishes,
EfV

Thread: Positioning issues with Internet Explorer 9

Thread Tools

Display

Hybrid View

Positioning issues with Internet Explorer 9

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions