Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Jun 2010
    Posts
    5
    Member #
    22180
    Hi,

    I am having some problems getting the products page of my website to work in IE7&8. It works fine with all of the other browsers i have used but i cannot get it working with IE. Please check it out to see if it works on your system @ www.markoneaudio.co.uk. I believe it is a css hack problem but as i am a bit of a beginner in programming css i would appreciate any help. I have included the IE hacks from my css code below:
    /* __________[ browser hacks ]__________*/

    .ie6 a.selected {
    position:relative !important;
    z-index:1;
    }
    .ie6 #navigation li a:hover {
    z-index:2;
    }
    .ie6 .box-title {
    width:199px;
    }
    .ie6 #main {
    width:820px;
    }
    .ie6 #sidebar {
    position:absolute;
    margin-left:-16px;
    }
    .ie6 #portfolio-thumbnails li {
    height:165px;
    }
    .ie6 .activeSlide {
    padding:6px 0 6px 0 !important;
    margin-top:0 !important;
    z-index:100;
    position:relative;
    font-weight:bold;
    text-decoration:underline;
    background:url(images/featured-button.png) 0 -36px !important;
    }
    .ie7 #navigation {
    margin-right:5px;
    }
    .ie7 #portfolio-thumbnails li {
    height:170px;
    }

    One final point, i didn't code these hacks as i just purchased a template and edited it

  2.  

  3. #2
    Member
    Join Date
    Jun 2007
    Posts
    37
    Member #
    15430
    I posted in the website review forums thread that you made, you deleted the dtd (Document type definition) the first line of code. This throws ie into quirks mode and the beast is un-tamable from there. Simply add

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    to the top of your page

  4. #3
    Member
    Join Date
    Jun 2007
    Posts
    37
    Member #
    15430
    You Also had some invalid code going on copy and paste the following code below. Next time http://validator.w3.org/ and validate your html code. You still have a few repeat ids which makes the validation throw a few errors. You should change the ids to classes in both the html and css if you want complete validation. Everything appears correctly for me in firefox, ie7, ie8. I didn't check any other browsers.


    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" xml:lang="en" lang="en">
    <head>
    <title>Products : MarkOneAudio</title>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta name="Author" content="" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <base href="http://www.markoneaudio.co.uk/" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    
    <!-- 
        CSS Browser Selector v0.2.7
        Rafael Lima (http://rafael.adm.br)
        http://rafael.adm.br/css_browser_selector
        License: http://creativecommons.org/licenses/by/2.5/
        Contributors: http://rafael.adm.br/css_browser_selector#contributors 
    -->
    <script type="text/javascript" src="scripts/css_browser_selector.js"></script>
    <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
    <link rel="stylesheet" href="scripts/prettyphoto/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
    <script src="scripts/prettyphoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    </head>
    
    <body>
    <div id="container">
      <div id="header" class="clearfix">
        <div id="logo"><a href="index.html"><img src="images/logo.png" alt="" /></a></div>
        <div id="navigation">
          <ul>
            <li><a href="index.html" id="b-home">Home</a></li>
            <li class="alan"><a href="products.html" id="b-portfolio" class="selected">Products</a></li>
            <li class="alan2"><a href="merchandise.html" id="b-about">Merchandise</a></li>
            <li><a href="contact.php" id="b-contact">Contact</a></li>
          </ul>
        </div>
        <!-- /navigation --> 
        
      </div>
      <!-- /header -->
      
      <div id="main" class="clearfix">
        <div id="content">
          <div class="content-title"> <img src="images/featured-title.png" alt=""/></div>
          <ul id="portfolio-thumbnails">
            
            <!-- portfolio item -->
            
            <li class="clearfix"> <a href="abc_switch_box.html" class="thumbnail-link" rel="prettyPhoto"><img src="images/switchbox_thumb.jpg" alt=""/></a> 
              <h3 class="work-description">SwitchBox ABC Pedal</h3>
              The MarkOne Audio SwitchBox ABC pedal is designed for seamless input switching of up to 3 instruments.<br />
              <br />
              <strong>Read More &gt; </strong><a href="abc_switch_box.html">Click here</a> </li>
            
            <!-- end of portfolio item -->
          </ul>
          <ul id="portfolio-thumbnails">
            
            <!-- portfolio item -->
            
            <li class="clearfix"> <a href="triple_switcher.html" class="thumbnail-link" rel="prettyPhoto"><img src="images/tuner_thumb.jpg" alt=""/></a>
              <h3 class="work-description">TripleSwitcher</h3>
              The MarkOne Audio TripleSwitcher is the only pedal you will ever need for all of your signal switching demands.<br />
              <br />
              <strong>Read More &gt; </strong><a href="triple_switcher.html">Click here</a> </li>
            
            <!-- end of portfolio item -->
            
          </ul>
          <ul id="portfolio-thumbnails">
            <!-- portfolio item -->
            
            <li class="clearfix"> <a href="chromatic_tuner.html" class="thumbnail-link" rel="prettyPhoto"><img src="images/tuner_thumb.jpg" alt=""/></a> 
              <h3 class="work-description">Chromatic Tuner</h3>
              The MarkOne Audio Chromatic Tuner is a true bypass pedal with unrivaled resolution.<br />
              <br />
              <strong>Read More &gt; </strong><a href="chromatic_tuner.html">Click here</a> </li>
            
            <!-- end of portfolio item -->
            
          </ul>
        </div>
        <!-- /content -->
        <div id="sidebar">
          <div class="sidebox">
            <h3 class="box-title" id="latest-news">Latest News</h3>
            <ul>
              <li>We are in the final stages of development of our next pedal. Check out the details on the products page and help us choose the name using the poll below. &raquo;</li>
              <li>The MarkOne Audio SwitchBox is now avaliable for purchase. Follow the link through the products page to check it out. &raquo;</li>
            </ul>
          </div>
          <div class="sidebox">
            <h3 class="box-title" id="testimonials">Testimonials</h3>
            <ul>
              <li class="quote">The MarkOne Audio SwitchBox always delivers, I haven't found anything on the market that compares in quality. <strong>-Alan Brown</strong></li>
            </ul>
          </div>
          <div class="sidebox">
            <ul>
              <li><script type="text/javascript" src="http://host1.easypolls.net/ext/scripts/emPoll.js?p=14768"></script><a class="OPP-powered-by" href="http://www.objectplanet.com/opinio/" style="text-decoration:none;">
                <span style="font: 9px arial; color: gray;">survey software</span>
                </a>
                </li>
            </ul>
          </div>
        </div>
        <!-- /sidebar --> 
        
      </div>
      <!-- /main -->
      
      <div id="footer">
        <p>&copy; 2009 MarkOne Audio</p>
      </div>
      <!-- /footer --> 
      
    </div>
    <!-- /container --> 
    
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script> 
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-7763065-1");
    pageTracker._trackPageview();
    } catch(err) {}</script>
    </body>
    </html>

  5. #4
    Junior Member
    Join Date
    Jun 2010
    Posts
    5
    Member #
    22180
    Thank you jeverd01, your an absolute star! just uploaded your edited code and it's sorted the problem out.

  6. #5
    Member
    Join Date
    Jun 2007
    Posts
    37
    Member #
    15430
    You are welcome


Remove Ads

Posting Permissions

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

Search tags for this page

css only for ie7&8

,

ie7&8 css hack

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:35 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com