SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation CSS - Drop Down Menu not appearing in later versions of IE, Firefox, and Safari

    Hey,

    I spent a huge amount of time setting up css code to create drop-down menus in one version of IE (an older version) only to find out that it doesn't work in later versions like IE 8, Firefox and Safari. Here's the web link: http://www.kingedwardavenue.com/. The following is the code. Any suggestions? I have a launch date of this Thursday and there's a media release going out. I'm go to be up all night tomorrow night if I can't figure this out. Thx. (Marc)

    /* header menu */

    /*Positions the menu and provides font*/

    #header-content ul {
    position: absolute;
    right: -5px; top: 70px;
    font: bolder 1.3em 'Trebuchet MS', sans-serif;
    color: #FFF;
    list-style: none;
    margin: 0; padding: 0;
    }

    #header-content ul {
    float: left;
    }

    /*Makes the menu horizontal instead of vertical*/

    #header-content li {
    float: left;
    line-height: 1.3em;
    vertical-align: middle;
    zoom: 1;
    }

    /*Design of the boxes around each link*/

    #header-content li a {
    float: left;
    display: block;
    padding: 3px 12px;
    color: #fff;
    background-color: #333;
    text-decoration: none;
    border-right: 1px solid #272727;
    }

    #header-content li li a {
    width: inherit;
    }

    #header-content li a:hover {
    background: #65944A;
    color: #fff;
    padding: 3px 12px;
    border-right: 1px solid #65944A;
    }


    #header-content li a#current {
    background: #65944A;
    color: #fff;
    }

    #header-content li.hover,
    #header-content li:hover {
    position: relative;
    z-index: 599;
    cursor: default;
    }

    /*To make the drop downs disappear*/

    #header-content ul.sub1 {
    font: bolder 1em 'Trebuchet MS', sans-serif;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    }

    ul.sub1 ul li {
    float: none;
    padding: 20px 20px;
    }

    ul.sub1 ul ul {
    top: 1px;
    left: 99%;
    }

    /*Allows for the text to drop down under each tab*/

    #header-content li:hover > ul {
    visibility: visible;
    }

    ul.sub1 a {
    float: left;
    display: block;
    width: 160px;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, your HTML is invalid, for one thing, the only legal children of <ul>'s are <li> (though you can have other stuff in that) and 2, you nest the dropdown illegally.

    It's always best to code for good borwsers (FF/saffy) and then code for IE (if needed)
    Code:
    <!-- Menu Tabs -->
    
    			<ul>
    					<li><a href="index.htm" id="current">Home</a></li>
    					<li><a href="aboutus_e.htm">About&nbsp;Us</a></li>				
    						<ul class="sub1">
    							<li><a href="executive_e.htm" id="subs">Executive</a></li>
    							<li><a href="purpose_e.htm">Purpose</a></li>
    							<li><a href="achievements_e.htm">Achievements</a></li>
    							<li><a href="history_e.htm">History</a></li>
    						</ul>
    					<li><a href="meetings_e.htm">Meetings</a></li>
    That should look something like this
    Code:
    <!-- Menu Tabs -->
    
    			<ul>
    					<li><a href="index.htm" id="current">Home</a></li>
    					<li><a href="aboutus_e.htm">About&nbsp;Us</a>				
    						<ul class="sub1">
    							<li><a href="executive_e.htm" id="subs">Executive</a></li>
    							<li><a href="purpose_e.htm">Purpose</a></li>
    							<li><a href="achievements_e.htm">Achievements</a></li>
    							<li><a href="history_e.htm">History</a></li>
    						</ul>
    </li>
    					<li><a href="meetings_e.htm">Meetings</a></li>
    Notice how I renested the <ul> to be within that one <li> .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey!

    Thanks for the help on that. I thought I was going to be at it for weeks. Glad to see it was a simple fix and nothing to do with the CSS.

    I just have one other minor problem, now. The drop-down menu width is uneven in Firefox and later versions of IE. Any ideas about that?

    Marc

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Your sub li's are still floated, and floats shrink-wrap to their content width.

    You could probably most easily fix this by setting all the sub li's to whatever width you want. Normally i set them to 100%, but that's because I set a width on my submenus, but yours are already stretching across the page (you can't see them tho). So you won't want 100%.

    You have some CSS that's not doing anything. Be aware that if you set someone to position: absolute, then saying anything like float: left on them later is ignored. The element remains absolutely positioned until you undo it (by stating some other position like relative or static). So, anywhere you have someone both abso-positioned AND floated, know that everyone is ignoring the float.

  5. #5
    SitePoint Member
    Join Date
    May 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thanks to both Stommee Poes and RyanReese. I'm not a web designer myself, so it was a lot of work to throw this volunteer site together. You just volunteered some time towards my neighbourhood's cause. Thanks for your help - you saved me a whole lot of time.

    Marc

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    We are glad to help .
    Instead of setting a width on the submenu, I'd be inclined to just set float:none for the dropdown <li>'s that way they automatically expand 100&#37; of the <ul>s width (and that would be able to expand to the longest item)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The ul is 100% of the page tho.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Ah, well then nevermind . That's unusual.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hm, actually I'm not sure it it is... it's absolutely positioned and then top: 100% (so I guess that sends it off the bottom of the page). So, I think he could have set a width desired on the sub ul instead.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I just went to his page, every <li> is still floated of the menu (not unfloated) nor has he designated a width for the <li> (or <ul)

    He chose option C
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Nesting a document in a document? Yeah, that causes screwy things. The page needs to be chucked through the W3c validator and fixed. There's also a lot of CSS that, hm, I can't even read it.


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
  •