Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation FF & IE Compatibility Help, PLEASE@

    Hey guys, so I am having some trouble with my drop down menu working in IE and FF, I am trying to repeat that three time throughout the page, and the drop down menu only works on one of the 3 times I'm trying to use it. Please help. Thanks! Below is the html and the css

    <div class="chromestyle" id="chromemenu">
    <ul>
    <li><a href="#" rel="dropmenu1">What We Have to Offer</a></li>
    <li><a href="#" rel="dropmenu2">About L.H.S.</a></li>
    <li><a href="#">Coaches</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Upcoming Events</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>


    <!--1st drop down menu -->
    <div id="dropmenu1" class="dropmenudiv">
    <a href="parents.html">Parents</a>
    <a href="coachesteams.html">Coaches/Teams</a>
    <a href="athletes.html">Athletes</a>
    <a href="signup.html">Signup</a>
    </div>


    <!--2nd drop down menu -->
    <div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
    <a href="phil.html">Philosophy</a>
    <a href="aim.html">Aim</a>
    <a href="programdesign.html">Program Design</a>
    <a href="signup.html">Sign-Up</a>
    </div>

    <!--3rd drop down menu -->
    <div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
    <a href="#">Post Play</a>
    <a href="#">Put Back</a>
    <a href="#">Mikan Drill</a>
    <a href="#">Resistance Training</a>
    <a href="#">Plyometrics</a>
    <a href="#">Verticle Jump</a>
    <a href="#">Strength and Agility Training</a>
    <a href="#">Endurance</a>
    </div>



    <script type="text/javascript">

    cssdropdown.startchrome("chromemenu")

    </script>






    .chromestyle{
    width: 99%;
    font-weight: bold;
    }

    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .chromestyle ul{
    width: 100%;

    padding: 4px 0;
    margin: 0;
    text-align: center; /*set value to "left", "center", or "right"*/
    }

    .chromestyle ul li{
    display: inline;
    }

    .chromestyle ul li a{
    color: #FFFFFF;
    padding: 4px 7px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    }

    .chromestyle ul li a:hover{

    }

    .chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
    content: " v";
    /*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
    }


    /* ######### Style for Drop Down Menu ######### */

    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #BBB; /*THEME CHANGE HERE*/
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    filter: progidXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
    }

    .dropmenudiv2{
    position:absolute;
    top: 0;
    border: 1px solid #BBB; /*THEME CHANGE HERE*/
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    filter: progidXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
    }


    .dropmenudiv a{
    width: auto;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }

    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }

    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-color: #F0F0F0;
    }

  • #2
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Hi,

    First, your code needs to be wrapped in code tags, its annoying and hard to read without them.

    Code:
    <div class="chromestyle" id="chromemenu">
    Your declaring all your divs as both a class and id...

    Your calling div id's (and classes) when your CSS is full of only classes....

    Use ID's for things that will be used once in a page, classes for multiple use (in a nutshell).

    I think it would be best if you read up on some basic CSS tutorials, start here: http://www.w3schools.com/css/default.asp

    For now, it will be a lot easier to give us a link to your site to help you so we can see everything.

    Regards,

    Drew

  • #3
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    The ID's, are just to link the main link name and the drop down menus. Is there another way to do it? The link is: http://osbournwebdesign.com/lhs/

    I've never done a drop down menu before....

  • #4
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation forgot ot mention

    Forgot to mention, the whole things works perfectly in FF, but ONLY the first row works in IE

  • #5
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    The ID's, are just to link the main link name and the drop down menus.
    Sorry, I missed the javascript in your code so I assumed something else.

    First, your page needs a proper doctype: http://www.w3.org/QA/2002/04/valid-dtd-list.html

    Second, these need to be fixed:http://validator.w3.org/check?verbos...n.com%2Flhs%2F

    thirdly, your CSS: http://jigsaw.w3.org/css-validator/v...n.com%2Flhs%2F

    Fix your errors, and then take it from there

    Drew


  •  

    Posting Permissions

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