Major CSS Problem

Discussion in 'Sales, Marketing & PR' started by jaamarketing, Nov 6, 2007.

Thread Status:
Not open for further replies.
  1. jaamarketing

    jaamarketing UKBF Newcomer

    9 0
    I am having a real problem with a site i just recently created for a client.
    As soon as I put drop down menus into it I was startled to see that it doesn't work with IE6.. if viewed in firefox or IE7 its fine..

    Please could someone help me out here..

    Thanks :)

    the site is at savilerowshirts . net
     
    Posted: Nov 6, 2007 By: jaamarketing Member since: Oct 23, 2007
    #1
  2. leoludwig

    leoludwig UKBF Newcomer

    4 0
    IE6 does not support the :hover on the li tag - which I assume is what you've used solely to make your dropdowns.

    You need some javascript to make the drop down work in IE6 - try this:
    htmldog.com/articles/suckerfish/dropdowns/ with www at the start

    Hope this helps.

    Leo
     
    Posted: Nov 6, 2007 By: leoludwig Member since: Oct 11, 2007
    #2
  3. AndyBlack

    AndyBlack UKBF Regular

    425 30
    If the drop downs are part of your internal linking structure, I would keep well away from java script. Search engines can't read it, therefore they would not follow the links.

    Andy
     
    Posted: Nov 7, 2007 By: AndyBlack Member since: Nov 17, 2006
    #3
  4. leoludwig

    leoludwig UKBF Newcomer

    4 0
    the javascript is only used to show the popup to non standard compliant browsers - the navigation is html only.
     
    Posted: Nov 7, 2007 By: leoludwig Member since: Oct 11, 2007
    #4
  5. dave_n

    dave_n UKBF Legend

    2,847 274
    could you post the code for for your dd menus...may be easier to help you out with code
    Also are u testing on IE6/7 vanilla or a modded version that is not OOTB?
     
    Posted: Nov 7, 2007 By: dave_n Member since: Oct 27, 2007
    #5
  6. jaamarketing

    jaamarketing UKBF Newcomer

    9 0
    here's the code for the drop downs..
    following that the CSS Code

    Cheers Guys


    <!-- Navigation Level 2 (Drop-down menus) --> <div class="nav2">

    <!-- Navigation item -->
    <ul>
    <li><a href="index.html">Home</a></li>
    </ul>

    <!-- Navigation item -->
    <ul>
    <li><a href="about.html">Our Shirts<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="guide.html">Guide to Our Shirts</a></li>
    <li><a href="special.html">What makes them special? </a></li>

    </ul>

    </li>
    </ul>

    <!-- Navigation item --> <ul>
    <li><a href="shirts.html">Shirt Shop<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="shirts.html">Fitted Shirts</a></li>
    <li><a href="bshirts.html">Bespoke Shirts</a></li>
    <li><a href="special.html">What makes them special? </a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    </ul>

    <!-- Navigation item -->
    <ul>
    <li><a href="access.html">Accessories<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="cuffs.html">Cufflinks</a></li>
    <li><a href="ties1.html">Ties</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    </ul>

    <!-- Navigation item -->
    <ul>
    <li><a href="contact.html">Contact<!--[if IE 7]><!--></a><!--<![endif]-->

    </ul>

    </li>
    </div>




    CSS Code:

    .nav2 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px #fce2ca;;
    background-color: #FFFFFFF;

    }
    .nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:5px 36px 5px 36px; text-decoration:none; color: rgb(100,100,100);

    }
    .nav2 ul li ul {display:none; border:none;

    }

    .nav2 ul li table {display:none; border:none;

    }

    /*Non-IE6 hovering*/
    .nav2 ul li:hover a {background-color:#fce2ca; text-decoration:none;} /*Color main cells hovering mode*/
    .nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.8em; margin-top:0.1em; left:0;}
    .nav2 ul li:hover ul li a {display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px #fce2ca; border-top: solid .5px #fce2ca; border-bottom: solid .5px #fce2ca; background-color:rgb(255,255,255); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
    .nav2 ul li:hover ul li a:hover {background-color:#fce2ca; text-decoration:none;} /*Color subcells hovering mode*/

    /*IE6 hovering*/
    .nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;}
    .nav2 ul li a:hover {background-color:#fce2ca; text-decoration:none;} /*Color main cells hovering mode*/
    .nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.9em; t\op:3.0em; left:0; marg\in-top:0.1em;}
    .nav2 ul li a:hover ul li a {display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #fce2ca; border-top: solid .5px #fce2ca; border-bottom: solid .5px #fce2ca; background-color:rgb(255,255,255); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
    .nav2 ul li a:hover ul li a:hover {background-color:#fce2ca; text-decoration:none;} /*Color subcells hovering mode*/
     
    Posted: Nov 7, 2007 By: jaamarketing Member since: Oct 23, 2007
    #6
  7. leoludwig

    leoludwig UKBF Newcomer

    4 0
    seriously, have a look at the suckerfish drop down menus. forget about the table tags, your making your code way too complex.

    in the end you should only have the following as HTML:
    <div class="nav2">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">Our Shirts</a>
    <ul>
    <li><a href="guide.html">Guide to Our Shirts</a></li>
    <li><a href="special.html">What makes them special?</a></li>
    </ul>
    </li>
    <li><a href="shirts.html">Shirt Shop</a>
    <ul>
    <li><a href="shirts.html">Fitted Shirts</a></li>
    <li><a href="bshirts.html">Bespoke Shirts</a></li>
    <li><a href="special.html">What makes them special? </a></li>
    </ul>
    </li>
    <li><a href="access.html">Accessories</a>
    <ul>
    <li><a href="cuffs.html">Cufflinks</a></li>
    <li><a href="ties1.html">Ties</a></li>
    </ul>
    </li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>

    and the css / js provided by the HTML Dog team.
     
    Posted: Nov 7, 2007 By: leoludwig Member since: Oct 11, 2007
    #7
  8. uk-g

    uk-g UKBF Newcomer

    6 1
    This post has nothing to do with this section!
     
    Posted: Nov 7, 2007 By: uk-g Member since: Nov 7, 2007
    #8
    • Thanks Thanks x 1
Thread Status:
Not open for further replies.