Results 1 to 8 of 8

Thread: chromestyle nav/highlight active page IE problem

  1. #1
    Join Date
    Dec 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Red face chromestyle nav/highlight active page IE problem

    Hi all!

    Thank you for your time!

    http://www.capoeiracanal.co.uk/capoe...hool-links.php

    If you look at the nav bar in (IE6) you will see the active page nav-link highlighted in white (slightly off to the right).

    In (FF) you can see the active nav-link again, but the the background white is inside the link how I would like it to be.

    You notice that, when hover style, the change of color only covers say 90% of the link, it lines up with the drop down menu. If I were able to stop this rule the highlight would no longer overlap to the left in IE?!

    This problem has been posted @ http://www.webforumz.com/css-forum/6...rrent-page.htm

    We tried many style changes and IE hacks with no success so far.

    So I hand it over to the people that created Chromestyle nav bar.

    Thanks
    Last edited by Oak; 02-03-2008 at 02:59 PM.

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    okay.. a few things.. first IE6 CSS is horrible, and trying to code for it is improbable at best. IE6 doesn't parse the :hover class.

    Second you are calling ID's and classes that don't exist in your stylesheet. class "end" and "chromemenu" for example aren't in the CSS yet you use them in the HTML...

    split your CSS rules for ul and li only put display: inline on the li portion. Your 90% hover problem is because you have adaptive menus (meaning the hit area stretches to fit the text inside) and you have the whole ul set to 100%.

    If I get some time today I will try to clean up your CSS and get it to work for you, but you can work on that while I am busy

    In the end you don't need CSS hacks for IE, and using them is silly, as it will cause headaches later when new rules are patched into it and your hacks cease to work. Make it work got gen 4 browsers and make it degrade to the lower ones.

    I will see what I can do for you in a few hours.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    Dec 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey

    Thats very helpful! I am going threw the CSS & HTML and will correct what I can.

    Thank you for offering to tidy up my CSS!

  4. #4
    Join Date
    Dec 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well I had a look at the div id chromemenu, on the Dynamic Drive website, and as far as I can see my code it is how it should be, but I don't know much!

    THis is taken from DR free script.

    HTML Code:
    <div class="chromestyle" id="chromemenu">
    <ul>
    <li><a href="http://www.dynamicdrive.com">Home</a></li>
    <li><a href="#" rel="dropmenu1">Resources</a></li>
    <li><a href="#" rel="dropmenu2">News</a></li>
    </ul>
    </div>
    
    <!--1st drop down menu --> 
    <div id="dropmenu1" class="dropmenudiv">
    <a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
    <a href="http://www.cssdrive.com">CSS Drive</a>
    <a href="http://www.javascriptkit.com">JavaScript Kit</a>
    </div>
    
    
    <!--2nd drop down menu --> 
    <div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
    <a href="http://www.cnn.com/">CNN</a>
    <a href="http://www.msnbc.com">MSNBC</a>
    <a href="http://news.bbc.co.uk">BBC News</a>
    </div>
    
    <script type="text/javascript">
    cssdropdown.startchrome("chromemenu")
    </script>
    The list (<ul>) above makes up the menu bar itself, and should be assigned a unique ID (ie: "chromemenu"). This ID is then passed to the JavaScript function "startchrome()", at the end of the menu.
    http://www.dynamicdrive.com/dynamici...rome/index.htm
    Last edited by Oak; 02-04-2008 at 10:50 PM.

  5. #5
    Join Date
    Dec 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Your 90% hover problem is because you have adaptive menus (meaning the hit area stretches to fit the text inside) and you have the whole ul set to 100%.
    hmm, am I supposed to change the percent to 750px? or say give each li width in px ?

  6. #6
    Join Date
    Dec 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    split your CSS rules for ul and li only put display: inline on the li portion.
    Is this what you mean?

    Code:
    	}
    .chromestyle ul {
    }
    .chromestyle li{
    display: inline;
    }
    .chromestyle ul a{
    color: #fcfefe ;
    padding: 5px 18px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #8F9191 ; /*THEME CHANGE HERE*/
    }
    .chromestyle li a{
    color: #fcfefe ;
    padding: 5px 18px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #8F9191 ; /*THEME CHANGE HERE*/
    }
    .chromestyle li a:hover{
        background: #EAEAE8 url("button/button6_end.gif") center center repeat-x;
    }
    .chromestyle ul a:hover{
        background: #EAEAE8 url("button/button6_end.gif") center center repeat-x;
    	}
    .chromestyle ul a[rel]:after{ /*HTML to indicate drop down link*/
    content: "";
    /*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
    }
    .chromestyle li a[rel]:after{ /*HTML to indicate drop down link*/
    content: "";
    /*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/

  7. #7
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Close.

    Code:
    .chromestyle ul {
    }
    .chromestyle li{
    display: inline;
    }
    This part. the basic standard definitions of the UL and the LI. after that if they are going to share the same attributes you can leave them together (depending on the attributes/elements you can even drop li calls and just use UL, or vise versa).

    My apologies for not getting back to this, I will try to do so today.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  8. #8
    Join Date
    Dec 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Close.
    This part.
    Sorry, do you mean this
    HTML Code:
     	<!--//  
    .chromestyle ul {
    }
    .chromestyle li{
    display: inline;
    }
    //-->
    My apologies for not getting back to this, I will try to do so today.
    You are a gent!

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
  •