SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE9 displaying main content above navigation and left nav dropping

    Hi all Im having an issue with IE9 only every other browser Ive tested in looks great. Whats happening is I have a template that list the main content first and the navigation and header at the bottom of the code. In IE9 the main content rises above the header and the lef nav drops way below.

    Here is the HTML


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- InstanceBeginEditable name="doctitle" -->
    <title>Scentsy Candles. Buy Scentsy Products. Certified Scentsy Consultants. The Safest Candles.</title>
    <meta name="Description" content="Scentsy Candles are The Safest Candles. The Candle Warmers are Flameless, Wickless and Lead Free making them safer than other candles. Buy, host or join from us. We are Scentsy Independent Consultants" />
    <meta name="Keywords" content="scentsy, candles, candle warmers, wickless, sell, join, products" />
    <link rel="canonical" href="http://www.thesafestcandles.com/" />
    <meta name="netinsert" content="840.0.1.12.20.1" />
    <meta name="google-site-verification" content="W-21fqB8qKoMe75BIpUbdgv9Go1ToTy4teMUzgb4YsA" /><!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    <link href="../css/main.css" rel="stylesheet" type="text/css" />
    <link href="../css/navbar.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <!-- Page Container begins here -->
    <div id="outerWrapper"><!-- InstanceBeginEditable name="optionalnav" -->
    <div id="crumbs">
    <span><b>You are here: </b></span><span itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://www.thesafestcandles.com/" itemprop="url" title="Scentsy Candles"><span itemprop="title">The Safest Candles</span></a></span>  <span itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://www.example.com/dresses/real" itemprop="url" title="Scentsy Candles"><span itemprop="title">Real Dresses</span></a></span>  <span itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://www.example.com/clothes/dresses/real/green" itemprop="url" title="Scentsy Candles"><span itemprop="title">Real Green Dresses</span></a></span>
    </div><!-- InstanceEndEditable -->
      <!-- Content Container begins here -->
    <div id="contentWrapper">
    <div id="offset"><!-- Main Content begins here -->
    <div id="content"><!-- InstanceBeginEditable name="main" -->
    <h1>Scentsy Wickless Candles. Flameless and Safe Candles</h1>
    <div class="view view-first"><img src="../images/buy-home.gif" width="220" height="220" alt="Buy Scentsy Products" />
    <div class="mask">
    <h2>Scentsy Products</h2>
    <p>Buy Authentic Scentsy Products. Warmers, Plug ins and Scentsy Bars</p>
    <a href="#" class="info">Shop Scentsy</a></div>
    </div>
    <div class="view view-first"><img src="../images/join-home.gif" width="220" height="220" alt="Join Scentsy or learn about the Scentsy Business Opportunity" />
    <div class="mask">
    <h2>Join Scentsy</h2>
    <p>Learn all about the scentsy Business Opportunity. Join Scentsy and Start a Business</p>
    <a href="#" class="info">Join Scentsy</a></div>
    </div>    
    <!-- InstanceEndEditable --></div>
    </div>
    <!-- Left Column begins here -->
    <div id="leftColumn1">
    <div id="market">
    <img src="../images/flags.png" width="180" height="20" alt="Country Flags" />
    <form action="../">
      <select onchange="window.open(this.options[this.selectedIndex].value,'_top')" style="color:green;font-size:12px;font-weight:bold; width:150">
        <option value="">Choose your Market</option>
        <option value="http://www.thesafestcandles.com/">USA English</option>
        <option value="http://www.thesafestcandles.com/scentsy-espanol/">USA Espa&ntilde;ol</option>       
        <option value="http://www.thesafestcandles.com/scentsy-canada/">Canada</option>
        <option value="http://www.thesafestcandles.com/scentsy-germany/">Germany</option>
        <option value="http://www.thesafestcandles.com/scentsy-ireland/">Ireland</option>
        <option value="http://www.thesafestcandles.com/scentsy-united-kingdom/">Unted Kingdom</option> 
    </select>
    </form>
    </div>
    <div id="arrowlistmenu">
    <h3>Follow Us</h3>
    <div class="social"><a href="https://www.facebook.com/thesafestcandles" title="The Safest Candles on Facebook" class='fade'><img src="../images/social-facebook.png" width="40" height="40" alt="Scentsy Facebook" /></a><a href="http://www.twitter.com/WendyScents" title="The Safest Candles on Twitter" class='fade'><img src="../images/social-twitter.png" width="40" height="40" alt="Scentsy Twitter" /></a><a href="http://www.youtube.com/user/TheSafestCandles" title="The Safest Candles on Youtube" class='fade'><img src="../images/social-youtube.png" width="40" height="40" alt="Scentsy Youtube" /></a><a href="http://feeds.feedburner.com/ScentsyWicklessCandles-ScentedCandleWarmers" title="The Safest Candles on RSS Feed" class='fade'><img src="../images/social-feed.png" width="40" height="40" alt="Scentsy RSS Feed" /></a></div>
    <div id="corporate"><a href="http://www.scentsy.net" title="Scentsy Corporate" class="fade"><img src="../images/corporate.png" alt="Facebook" width="126" height="52" /></a></div>
    <h3>Fragrance Products</h3>
    <ul>
    <li><a href="https://robinson.scentsy.us/Buy/Category/875">Layers by Scentsy</a></li>
    <li><a href="https://robinson.scentsy.us/Buy/Category/368">Scentsy Fragrances</a></li>
    </ul>
    <h3>Warmers</h3>
    <ul>
    <li><a href="https://robinson.scentsy.us/Buy/Category/819">Premium Full-Size Warmers</a></li>
    <li><a href="https://robinson.scentsy.us/Buy/Category/537">Full-Size Warmers</a></li>
    <li><a href="https://robinson.scentsy.us/Buy/Collection/892">Silhouette Collection</a></li>
    <li><a href="https://robinson.scentsy.us/Buy/Category/821">Premium Mid-Size Warmers</a></li>
    <li><a href="https://robinson.scentsy.us/Buy/Category/514">Mid-Size Warmers</a></li>
    <li><a href="https://robinson.scentsy.us/Buy/Category/521">Plug-In Warmers</a></li>
    </ul>
    <h3>DIY (Design It Yourself)</h3>
    <ul>
    <li><a href="https://robinson.scentsy.us/Buy/Collection/489">DIY Warmers</a></li>
    <li><a href="https://robinson.scentsy.us/Buy/Collection/490">DIY Theme Packs</a></li>
    </ul>
    <h3>Scentsy Buddy Family</h3>
    <ul>
    <li><a href="https://robinson.scentsy.us/Buy/Collection/785">Scentsy Buddy</a></li>
    </ul>
    <h3>Specials</h3>
    <ul>
    <li><a href="https://robinson.scentsy.us/Buy/Collection/780">Featured Products</a></li>
    <li><a href="https://robinson.scentsy.us/Buy/Collection/464">Combine and Save</a></li>
    <li><a href="http://www.thesafestcandles.com/monthly-specials/">Scent &amp; Warmer of the Month</a></li>
    <li><a href="https://robinson.scentsy.us/Buy/Collection/808">Close-Out Items</a></li>
    </ul>
    <h3>Accessories &amp; Replacements</h3>
    <ul>
    <li><a href="https://robinson.scentsy.us/Buy/Collection/463">Warmer Accessories</a></li>
    <li><a href="https://robinson.scentsy.us/Buy/Category/535">Replacement Parts</a></li>
    </ul>
    <h3>FYI</h3>
    <ul class="Nav">
    <li><a href="../scentsy-questions.html" title="Scentsy Questions and Answers"><span>FAQ</span></a></li>
    <li><a href="https://robinson.scentsy.us/online_party_rewards"><span>Online Shopping Rewards</span></a></li>
    <li><a href="https://robinson.scentsy.us/shipping_information"><span>Shipping Information</span></a></li>
    <li><a href="https://robinson.scentsy.us/how_do_the_products_work"><span>How Do the Products Work?</span></a></li>
    <li><a href="https://robinson.scentsy.us/Browse"><span>View My Interactive Catalog</span></a></li>
    <li><a href="https://robinson.scentsy.us/PerfectGiftIdeas"><span>Perfect Gift Ideas</span></a></li>
    <li><a href="https://robinson.scentsy.us/ScenTrend"><span>ScenTrend</span></a></li>
    <li><a href="http://www.thesafestcandles.com/scentsy-catalog.html"><span>Online Catalog</span></a></li>
    </ul>
    </div>
    </div>
    <!-- Left Column ends here --></div>
    <div id="header"><!-- Banner graphic begins here -->
    <a href="http://www.thesafestcandles.com/"><img src="../images/banner.png" alt="Scentsy Candles The Safest Candles" class="logo" /></a>
    <div id="centeredmenu">
    <ul>
    <li><a href="http://www.thesafestcandles.com/" title="Scentsy The Safest Candles" class='fade'>Home</a></li>
    <li><a href="https://robinson.scentsy.us/Buy" rel="nofollow" title="Buy Scentsy Online" class='fade'>Buy</a></li>
    <li><a href="http://www.thesafestcandles.com/scentsy-products/" title="Scentsy Candle Warmers and Fragrance Products" class='fade'>Products</a></li>
    <li><a href="http://www.thesafestcandles.com/join-scentsy/" title="Start a Scentsy Candle Business" class='fade'>Join</a></li>
    <li><a href="http://www.thesafestcandles.com/scentsy-party/" title="Host a Scentsy Party" class='fade'>Host</a></li>
    <li><a href="http://www.thesafestcandles.com/scentsy-consultants.html" title="Locate a Scentsy Consultant" class='fade'>Find a Consultant</a></li>
    <li><a href="http://www.thesafestcandles.com/scentsy-monthly-candle-warmer.html" title="Scentsy Candle Warmer of the Month" class='fade'>Monthly Specials</a></li>
    <li><a href="http://www.thesafestcandles.com/scentsy-consultants-shawn-wendy-robinson.html" title="Our Scentsy Story" class='fade'>About Us</a></li>
    <li><a href="http://www.thesafestcandles.com/contact.html" title="Contact your Scentsy Consultant" class='fade'>Contact</a></li>
    <li><a href="http://www.thesafestcandles.com/blog/" title="Scentsy News and Updates" class='fade'>Blog</a></li>        
    </ul>
    </div>
    <!-- Top Navigations ends here --></div>
    <div id="footer">
    <div class="bottom-clear"></div>
    <div class="left">
    <p>Dress up any room with a Scentsy Warmer, add one of 80-plus fragrances, and enjoy! Shop online today.</p>
    <p class="c1"><a class="TextLink ArrowNext_Left" href="https://robinson.scentsy.us/Buy">Shop my online store</a></p>
    </div>
    <div class="center">
    <p>Looking for a rewarding career that works with your schedule?  As a Join as a Scentsy Consultant, you’ll set your own hours.</p>
    <p class="c1"><a class="TextLink ArrowNext_Left" href="http://www.thesafestcandles.com/join-scentsy/">Join our Scentsy Team</a></p>
    </div>
    <div class="right">
    <p>Have fun while earning Host Rewards—free or half-price Scentsy Products—when you host your own Scentsy party.</p>
    <p class="c1"><a class="TextLink ArrowNext_Left" href="http://www.thesafestcandles.com/scentsy-party/">Shop my online store</a></p>
    </div>
    <br class="c2" /></div>
    <!-- Footer ends here --></div>
    <!-- Page Container ends here -->
    <div id="bottom">
    <ul>
    <li><a href="http://www.thesafestcandles.com/" title="Scentsy The Safest Candles">Home</a></li>
    <li><a href="http://www.thesafestcandles.com/join-scentsy/" title="Start a Candle Business">Join Scentsy</a></li>
    <li><a href="http://www.thesafestcandles.com/scentsy-consultants-shawn-wendy-robinson.html" title="Scentsy Consultants Shawn and Wendy Robinson">About Us</a></li>
    <li><a href="http://www.thesafestcandles.com/scentsy-europe.html" title="Scentsy Europe, Germany, Ireland and the United Kingdom">Europe</a></li>
    </ul>
    <p>Site designed by <a href="https://plus.google.com/117926938199743366567" rel="author">Shawn Robinson</a></p>
    </div>
    <!-- JavaScript Files -->
    <script src="../scripts/jquery-1.3.2.min.js" type="text/javascript">
    </script><script type="text/javascript" src="../scripts/jcarousellite.min.js">
    </script><script src="../scripts/tipsy.js" type="text/javascript" charset="utf-8">
    </script><script type='text/javascript'>
    //<![CDATA[
      $(function() {
        
        $('#example-1').tipsy();
        
        $('#north').tipsy({gravity: 'n'});
        $('#south').tipsy({gravity: 's'});
        $('#east').tipsy({gravity: 'e'});
        $('#west').tipsy({gravity: 'w'});
        
        $('#auto-gravity').tipsy({gravity: $.fn.tipsy.autoNS});
        
        $('.fade').tipsy({fade: true});
        
        $('#example-custom-attribute').tipsy({title: 'id'});
        $('#example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });
        $('#example-fallback').tipsy({fallback: "?" });
        
        $('#example-html').tipsy({html: true });
        
      });
    
    //]]>
    </script>
    <script type="text/javascript">
    //<![CDATA[
      try {
      var pageTracker = _gat._getTracker("UA-7251479-2");
      pageTracker._trackPageview();
      } catch(err) {}
      //]]>
    </script><!-- Start of Zopim Live Chat Script -->
    <script type="text/javascript">
    //<![CDATA[
    window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=
    z.s=d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o
    ){z.set._.push(o)};$.setAttribute('charset','utf-8');$.async=!0;z.set.
    _=[];$.src=('https:'==d.location.protocol?'https://ssl':'http://cdn')+
    '.zopim.com/?YYz2NID5qbpPgor4bipFkHdaCoHRbeYV';$.type='text/java'+s;z.
    t=+new Date;z._=[];e.parentNode.insertBefore($,e)})(document,'script')
    //]]>
    
    </script><!-- End of Zopim Live Chat Script -->
    </body>
    <!-- InstanceEnd --></html>
    Here is the CSS

    Code:
    body {
    	font-size:12px;
    	font-family:Arial, Helvetica, sans-serif;
    	background:white url(../images/bg_CleanGreen_Illustration.jpg) no-repeat top scroll;
    	margin:0;
    	padding:0;
    }
    
    body img {
    border:0;
    text-decoration:none;
    }
    
    h1,h2,h3 {
    	color:purple;
    	font-family:Arial, Helvetica, sans-serif;
    	margin:5px 0 5px 10px;
    }
    
    h3 {
    	font-size:16px;
    	color: #606;
    }
    
    h1 {
    	font-size:20px;
    	color: #606;
    }
    
    h2 {
    	font-size:18px;
    	color: #606;
    }
    
    a,a:link {
    	color:#606;
    	text-decoration:underline;
    	font-weight: bold;
    }
    
    a:visited {
    	color:#606;
    	text-decoration:underline;
    	font-weight: bold;
    }
    
    a:hover {
    	color:#5FB83C;
    	text-decoration:underline;
    	font-weight: bold;
    }
    
    a:focus {
    	color:#606;
    }
    
    a:active {
    color:#039;
    }
    
    #header {
    	width:100%;
    	height:125px;
    	position:absolute;
    	top:0;
    	left:0;
    	background-color:#FFF;
    	text-align:center;
    }
    #topnav {
    	background-color: #606;
    	width: 100%;
    	height: 43px;
    	text-align: center;
    	margin-right: auto;
    	margin-left: auto;
    }
    
    .logo {
    padding-top:20px;
    }
    
    #banner {
    background-position:center;
    width:100%;
    background-image:url(../images/banner.png);
    background-repeat:no-repeat;
    height:125px;
    }
    
    #navbar ul {
    list-style:none;
    background-color:#606;
    border-bottom-width:medium;
    border-bottom-style:solid;
    border-bottom-color:#606;
    border-top-width:medium;
    border-top-style:solid;
    border-top-color:#606;
    }
    
    #navbar li {
    background-position:left;
    display:inline;
    padding-left:15px;
    padding-right:3px;
    margin-right:40px;
    line-height:200%;
    background-image:url(../images/nav.gif);
    background-repeat:no-repeat;
    }
    
    #navbar p {
    padding-bottom:10px;
    margin-top:0;
    margin-left:20px;
    padding-top:0;
    background-color:transparent;
    font-weight:700;
    }
    
    #navbar a {
    text-decoration:none;
    color:#FFF;
    font-size:18px;
    }
    
    #navbar a:hover {
    	color:#FD35EB;
    }
    
    #navbar,.ctr {
    text-align:center;
    }
    
    /* Breadcrumbs */
    #crumbs {
    	text-align: left;
    	padding-left: 250px;
    	padding-top: 5px;
    	clear: left;
    	font-size: 12px;
    }
    
    
    #outerWrapper {
    	width:1024px;
    	text-align:left;
    	margin-top: 165px;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    }
    
    #outerWrapper #contentWrapper {
    	overflow:hidden;
    	float:left;
    	width:1024px;
    	position:relative;
    	z-index:10;
    }
    
    #outerWrapper #contentWrapper #leftColumn1 {
    width:200px;
    padding-right:3px;
    padding-bottom:0;
    padding-left:30px;
    }
    
    #outerWrapper #contentWrapper #leftColumn1 #arrowlistmenu {
    width:200px;
    }
    
    #outerWrapper #contentWrapper #leftColumn1 #arrowlistmenu h3 {
    background-image:url(../images/side-nav-line.png);
    background-position:left bottom;
    background-repeat:no-repeat;
    color:#B4CC95;
    font-family:Arial;
    font-size:16px;
    font-weight:700;
    padding-bottom:5px;
    padding-top:5px;
    }
    
    #outerWrapper #contentWrapper #leftColumn1 #arrowlistmenu ul {
    list-style-type:none;
    margin:0 0 8px;
    padding:0;
    }
    
    #outerWrapper #contentWrapper #leftColumn1 #arrowlistmenu ul li {
    padding-bottom:2px;
    background-image:url(../images/side-nav-aline.png);
    padding-top:3px;
    background-repeat:no-repeat;
    background-position:18px 22px;
    }
    
    #outerWrapper #contentWrapper #leftColumn1 #arrowlistmenu ul li a {
    color:#6D276A;
    display:block;
    text-decoration:none;
    font-size:12px;
    padding:4px 0 2px 15px;
    }
    
    #outerWrapper #contentWrapper #leftColumn1 #arrowlistmenu ul li a:hover {
    background-image:url(../images/arrow.gif);
    background-position:left center;
    background-repeat:no-repeat;
    }
    
    #outerWrapper #contentWrapper #content {
    	margin-left:250px;
    	margin-right:30px;
    	padding:5px;
    }
    
    #outerWrapper #contentWrapper #content .dot li {
    	list-style-type: square;
    	padding-bottom: 5px;
    }
    
    
    #outerWrapper #contentWrapper #content .rightimage {
    width:188px;
    float:left;
    padding-right:26px;
    padding-left:26px;
    }
    
    #outerWrapper #contentWrapper #content .gallery li {
    display:inline;
    list-style:none;
    width:150px;
    min-height:175px;
    float:left;
    text-align:center;
    margin:0 10px 10px 0;
    }
    
    #outerWrapper #contentWrapper #content .imgcenter {
    text-align:center;
    margin-top:5px;
    }
    
    #outerWrapper #contentWrapper #content .imgright {
    clear:right;
    float:right;
    margin-right:0;
    margin-bottom:10px;
    margin-left:10px;
    padding-top:22px;
    }
    
    #outerWrapper #contentWrapper #content .imgleft {
    float:left;
    padding-top:22px;
    margin:0 5px 0 0;
    }
    
    #offset {
    width:1024px;
    float:right;
    margin-left:-220px;
    }
    
    #topofpage {
    }
    
    #topofpage a{
    	color: #F00;
    }
    
    dl.margins-removed
    {
    	margin: 0;
    }
    
    .margins-removed dt
    {
    	font-weight: bold;
    	color: #FFF;
    	font-style: italic;
    	background-color: #660066;
    }
    
    .margins-removed dd
    {
    	margin: 0;
    	background-color: #CCC;
    }
    
    #corporate {
    	text-align: center;
    }
    #market {
    	text-align: center;
    }
    
    
    
    .bottom-clear {
    	float:left;
    	background-image:url(../images/bg_CleanGreen_InnerFooter.png);
    	background-repeat:no-repeat;
    	height:81px;
    	width:1024px;
    }
    
    #bottom {
    height:100px;
    background-image:url(../images/bottom.png);
    background-repeat:repeat-x;
    background-position:bottom;
    padding-top:10px;
    }
    
    #bottom ul {
    list-style-type:none;
    text-align:center;
    margin:0;
    padding:0;
    }
    
    #bottom ul li {
    display:inline;
    }
    
    #bottom ul li a {
    text-decoration:none;
    color:#000;
    padding-right:22px;
    }
    
    #bottom ul li a:hover {
    color:#fff;
    }
    
    #footer {
    width:1024px;
    text-align:center;
    }
    
    #footer p {
    margin-right:30px;
    margin-left:30px;
    }
    
    #footer .left {
    float:left;
    width:341px;
    text-align:center;
    padding-top:33px;
    background-image:url(../images/buy-footer.png);
    background-repeat:no-repeat;
    background-position:center top;
    }
    
    #footer .center {
    float:left;
    width:341px;
    text-align:center;
    padding-top:33px;
    background-image:url(../images/join-footer.png);
    background-repeat:no-repeat;
    background-position:center top;
    }
    
    #footer .right {
    float:left;
    width:341px;
    text-align:center;
    padding-top:33px;
    background-image:url(../images/host-footer.png);
    background-repeat:no-repeat;
    background-position:center top;
    }
    
    #footer a {
    color:#606;
    }
    
    .imgrgt {
    float:right;
    padding:5px 0 5px 10px;
    }
    
    .imgctr {
    	display:block;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    }
    
    .smltxt {
    font-size:small;
    }
    
    form fieldset {
    border:1px solid #353c48;
    font-family:sans-serif;
    font-size:80%;
    line-height:1;
    padding:2px;
    }
    
    .button {
    font:normal 90% Verdana, serif;
    height:22px;
    background-color:#353c48;
    color:#FFF;
    }
    
    #navigation {
    float:left;
    text-align:center;
    width:100%;
    top:0;
    left:0;
    }
    
    #navigation ul.Nav7 {
    clear:none;
    display:inline;
    float:none;
    padding-top:0;
    text-align:center;
    }
    
    #navigation ul li {
    display:inline;
    font-size:12px;
    list-style:none;
    }
    
    #navigation ul li a {
    background-image:url(../images/mainNav_btn.png);
    background-repeat:no-repeat;
    color:#609;
    display:block;
    float:left;
    font-weight:400;
    height:23px;
    margin-left:2px;
    padding-top:7px;
    text-decoration:none;
    width:115px;
    }
    
    #navigation ul li a:hover {
    background-position:0 -30px;
    text-decoration:none;
    }
    
    #navigation ul li a:active {
    background-position:0 -60px;
    }
    
    #navigation ul li ul {
    display:none;
    }
    
    .profle {
    text-align:center;
    height:120px;
    background-image:url(../images/profile.gif);
    background-repeat:no-repeat;
    margin:3px auto 8px;
    }
    
    .approval {
    text-align:center;
    height:82px;
    background-image:url(../images/approval.png);
    background-repeat:no-repeat;
    margin:3px auto 8px;
    }
    
    .social {
    text-align:center;
    margin:10px auto 8px;
    }
    
    .search {
    text-align:center;
    font-size:10px;
    font-family:Tahoma, Helvetica, Arial, sans-serif;
    margin:3px auto 8px;
    }
    
    .searchsite {
    text-align:center;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    float:right;
    margin:3px 55px 8px 0;
    }
    
    .myform {
    margin:0;
    padding:0;
    }
    
    .myform .textinput {
    width:100px;
    border:1px solid gray;
    }
    
    .myform .submit {
    height:25px;
    background-color:#071532;
    color:#fff;
    font-family:Verdana;
    font-size:12px;
    font-weight:700;
    }
    
    #div-1a {
    display:block;
    position:absolute;
    top:5px;
    right:0;
    width:126px;
    height:52px;
    background-image:url(../images/corporate.png);
    background-repeat:no-repeat;
    margin-right:15px;
    }
    
    #div-1b {
    position:absolute;
    top:5px;
    width:75px;
    text-align:center;
    left:0;
    background-image:url(../images/approved-site.png);
    background-repeat:no-repeat;
    height:84px;
    margin-left:63px;
    }
    
    #div-1c {
    position:absolute;
    top:15px;
    width:200px;
    left:60%;
    background-image:url(../images/top-join.gif);
    background-repeat:no-repeat;
    height:100px;
    }
    
    .clear {
    height:1px;
    clear:both;
    padding-bottom:22px;
    margin:0;
    }
    
    a.TextLink {
    padding-left:16px;
    }
    
    br.c2 {
    clear:left;
    }
    
    p.c1 {
    margin-top:10px;
    }
    
    #outerWrapper #contentWrapper #content .leftcolumn,#outerWrapper #contentWrapper #content .middlecolumn,#outerWrapper #contentWrapper #content .rightcolumn {
    width:188px;
    float:left;
    padding-right:20px;
    padding-left:20px;
    }
    
    .search p,.searchsite p {
    margin-bottom:0;
    font-size:12px;
    }
    
    #top_social {
    position:absolute;
    top:5px;
    left:40%;
    width:160px;
    text-align:center;
    font-weight:700;
    margin:0;
    }
    
    #top_social p {
    color:#000;
    font-size:16px;
    line-height:0;
    padding-bottom:0;
    }
    
    #top_social ul.social li {
    display:inline;
    margin:0 5px 0 0;
    padding:2px 0 0;
    }
    
    #social {
    padding:20px 0;
    }
    
    #social img,img.a {
    padding:2px 0 0;
    }
    
    #social a:hover {
    }
    
    .tipsy {
    font-size:11px;
    opacity:1px;
    filter:alpha(opacity=100);
    background-repeat:no-repeat;
    background-image:url(../images/tipsy.gif);
    margin-top:10px;
    color:#1F242F;
    font-family:Arial, Helvetica, sans-serif;
    padding:5px;
    }
    
    .tipsy-inner {
    background-color:#606;
    color:#FFF;
    max-width:200px;
    text-align:center;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    padding:5px 8px 4px;
    }
    
    .tipsy-north {
    background-position:top center;
    }
    
    .tipsy-south {
    background-position:bottom center;
    }
    
    .tipsy-east {
    background-position:right center;
    }
    
    .tipsy-west {
    background-position:left center;
    }
    
    .view {
    	width: 220px;
    	height: 220px;
    	margin: 10px;
    	float: left;
    	overflow: hidden;
    	position: relative;
    	text-align: center;
    	-webkit-box-shadow: 1px 1px 2px #e6e6e6;
    	-moz-box-shadow: 1px 1px 2px #e6e6e6;
    	box-shadow: 1px 1px 2px #e6e6e6;
    	cursor: default;
    	border: 2px solid #CCC;
    }
    .view .mask,.view .content {
       width: 220px;
       height: 220px;
       position: absolute;
       overflow: hidden;
       top: 0;
       left: 0;
    }
    .view img {
       display: block;
       position: relative;
    }
    .view h2 {
    	text-transform: uppercase;
    	color: #fff;
    	text-align: center;
    	position: relative;
    	font-size: 17px;
    	padding: 10px;
    	background: rgba(0, 0, 0, 0.8);
    	margin-top: 30px;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    }
    .view p {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	position: relative;
    	color: #000;
    	text-align: center;
    	padding: 5px;
    	font-weight: bold;
    }
    .view a.info {
       display: inline-block;
       text-decoration: none;
       padding: 7px 14px;
       background: #660066;
       color: #fff;
       text-transform: uppercase;
       -webkit-box-shadow: 0 0 1px #000;
       -moz-box-shadow: 0 0 1px #000;
       box-shadow: 0 0 1px #000;
    }
    .view a.info: hover {
       -webkit-box-shadow: 0 0 5px #000;
       -moz-box-shadow: 0 0 5px #000;
       box-shadow: 0 0 5px #000;
    }
    
    .view-first img {
       -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
       -ms-transition: all 0.2s linear;
       transition: all 0.2s linear;
    }
    .view-first .mask {
       -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
       filter: alpha(opacity=0);
       opacity: 0;
       background-color: rgba(255, 255, 255, 0.7);;
       -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
       -o-transition: all 0.4s ease-in-out;
       -ms-transition: all 0.4s ease-in-out;
       transition: all 0.4s ease-in-out;
    }
    .view-first h2 {
       -webkit-transform: translateY(-100px);
       -moz-transform: translateY(-100px);
       -o-transform: translateY(-100px);
       -ms-transform: translateY(-100px);
       transform: translateY(-100px);
       -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
       filter: alpha(opacity=0);
       opacity: 0;
       -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
       -ms-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out;
    }
    .view-first p {
    	-webkit-transform: translateY(100px);
    	-moz-transform: translateY(100px);
    	-o-transform: translateY(100px);
    	-ms-transform: translateY(100px);
    	transform: translateY(100px);
    	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    	filter: alpha(opacity=0);
    	opacity: 0;
    	-webkit-transition: all 0.2s linear;
    	-moz-transition: all 0.2s linear;
    	-o-transition: all 0.2s linear;
    	-ms-transition: all 0.2s linear;
    	transition: all 0.2s linear;
    }
    .view-first:hover img {
       -webkit-transform: scale(1.1,1.1);
       -moz-transform: scale(1.1,1.1);
       -o-transform: scale(1.1,1.1);
       -ms-transform: scale(1.1,1.1);
       transform: scale(1.1,1.1);
    }
    .view-first a.info {
       -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
       filter: alpha(opacity=0);
       opacity: 0;
       -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
       -ms-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out;
    }
    .view-first:hover .mask {
       -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
       filter: alpha(opacity=100);
       opacity: 1;
    }
    .view-first:hover h2,
    .view-first:hover p,
    .view-first:hover a.info {
       -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
       filter: alpha(opacity=100);
       opacity: 1;
       -webkit-transform: translateY(0px);
       -moz-transform: translateY(0px);
       -o-transform: translateY(0px);
       -ms-transform: translateY(0px);
       transform: translateY(0px);
    }
    .view-first:hover p {
       -webkit-transition-delay: 0.1s;
       -moz-transition-delay: 0.1s;
       -o-transition-delay: 0.1s;
       -ms-transition-delay: 0.1s;
       transition-delay: 0.1s;
    }
    .view-first:hover a.info {
       -webkit-transition-delay: 0.2s;
       -moz-transition-delay: 0.2s;
       -o-transition-delay: 0.2s;
       -ms-transition-delay: 0.2s;
       transition-delay: 0.2s;
    }
     ***********************************
     GALLERY ITEMS
     ***********************************
    */
    
    /*
            Items list
    */
    .items {
                    margin-top: 20px;
    }
    .items li {
    	position: relative;
    	width: 100px;
    	float: left;
    	list-style: none;
    	margin-top: 0;
    	margin-right: 20px;
    	margin-bottom: 30px;
    	margin-left: 0;
    	padding: 0;
    }
    .items li .website {
    
    }
    .items li .smalltext {
    	font-size: 12px;
    	text-align: center;
    }
    
    ul.product ul#categoryMenuList > li.disabled { display: none; height: 0; }
    
    ul.productRow {
    	display:block;
    	position:relative;
    	float:left;
    	width:768px;
    }
    ul.productRow li {
    	position:relative;
    	height:25em;
    	float:left;
    	width:155px;
    	margin-top: 0;
    	margin-right: 20px;
    	margin-bottom: 0;
    	margin-left: 0;
    }
    ul.productRow li h2 {
    	margin:200px 0 0 0;
    	font-size:14px;
    	font-family:Arial, Helvetica, sans-serif;
    	font-style:normal;
    	text-align: center;
    }
    ul.productRow li h2 a {
    	line-height:1.4em;
    }
    ul.productRow li span span {
    	color: #666;
    	text-align: center;
    	
    }
    ul.productRow li img { position:absolute; top:0; left:0; }
    ul.productRow li:hover a { text-decoration:underline; }
    ul.productRow li:active a, ul.productRow li:active span { color:#F38030; }
    
    ul.productRow li span.oldPrice { text-decoration:line-through; margin:0 5px 0 0; }
    ul.productRow li span.newPrice { color:#F00; }
    
    
    /* remove once ol issue is fixed : start */
    ol.productRow { display:block; position:relative; float:left; width:768px; }
    ol.productRow li { position:relative; height:25em; margin:0 20px 0 0; float:left; width:172px; }
    ol.productRow li h2 { margin:200px 0 0 0; font-size:1em; font-family:Consolas, Lucida Console, Monaco, Tahoma, sans-serif; font-style:normal; }
    ol.productRow li h2 a { line-height:1.4em; }
    ol.productRow li span span { color: #666; }
    ol.productRow li img { position:absolute; top:0; left:0; }
    ol.productRow li:hover a { text-decoration:underline; }
    ol.productRow li:active a, ul.productRow li:active span { color:#F38030; }
    
    ol.productRow li span.oldPrice { text-decoration:line-through; margin:0 5px 0 0; }
    ol.productRow li span.newPrice { color:#F00; }
    /* remove once ol issue is fixed : finish */
    
    #verticalMenuContainerID a, #listContent a { border:none; }
    ul, li { list-style-type:none; }
    
    /* FAQ News */
    
    .faq-news div.faq-news-list ul { margin: 53px 0 0 0; padding: 0; }
    .faq-news div.faq-news-list li { list-style-type: none; margin-bottom: 45px; padding-bottom: 20px; }
    .faq-news ul.faq-jumplinks { margin: 0 0 30px 0; padding: 0; }
    .faq-news ul.faq-jumplinks li { margin: 0 0 6px 0; padding: 0; list-style-type: none; } 
    .faq-news ul.faq-jumplinks li a { margin: 0; padding: 0; color: #769292; text-decoration: underline; } 
    .faq-news ul.faq-jumplinks li a:hover { text-decoration: none; }
    .faq-news div.faq-news-list { width: 90%; }
    .faq-news div.faq-news-list h2 { font-size: 15px; margin: 0; padding: 0; color: #666; font-size: 18px; font-weight: normal; border-bottom: 1px dotted #DDD; padding-bottom: 5px; margin-bottom: 10px; }
    .faq-news div.faq-news-list a { float: right; font-size: 11px; display: block; cursor: pointer;  }
    select.c1 {color:green;font-size:12px;font-weight:bold; width:150}
    Thanks in advance for any help.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hello. I viewed the page (images aren't showing obviously) in IEtester (which has IE9), standalone IE9, FF10, and Chrome, and none of htem had the sidebar dropping. Are you sure this is happening? Could you clear your cache?

    Do you have a live link to the page by any chance?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan

    Here's a link. ://www.thesafestcandles.com/ The entire website has the same template.

    I tested also at netrender for IE 9 and it looked great. My other computer that has IE9 on it but I didnt test at first. It takes about 2 seconds after the first load then it all pops up over the header and navigation.

  4. #4
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PS Thanks for taking a look.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Sorry IE9 is still displaying perfect . Do you have compatibility mode on?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,871
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    As Ryan said it sounds like you are tripping compatibility mode because the page is broken in IE7 which is what compatibility mode reverts to (more or less).

    Try adding padding-top:165px to #outerWrapper rather than margin-top:165px;


Tags for this Thread

Bookmarks

Posting Permissions

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