www.webdeveloper.com
Results 1 to 3 of 3

Thread: Positioning issues with Internet Explorer 9

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Posts
    1

    Question Positioning issues with Internet Explorer 9

    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>

  2. #2
    Join Date
    Jan 2011
    Posts
    117
    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

  3. #3
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles