SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop Down Menu Positioning for IE

    Hello,
    I have been working on this for days, but I can't figure out how to have a nested unordered list position itself correctly underneath the parent list item.
    It displays on top of its parent in Firefox, Opera, and Safari while IE places it over to the right where it is totally unusable.

    Here is a link to my page:
    http://www.crosst.org/test/

    Any help would be appreciated!!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You just need to set a top position for the nested ul and tidy some errors up.

    Here is a quick revision:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Welcome to Cross Tabernacle</title>
    <script type="text/javascript" >
    // JavaScript Document
    
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    </script>
    <link href="ctstyles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    @charset "UTF-8";
    /* CSS Document */
    
    body  {
    font:normal 62.5&#37; Verdana, Arial, Helvetica, sans-serif;
    padding:0;
    margin:27px 0 0 0;
    background: #ffe66d url(http://www.crosst.org/test/images/bg.jpg) top repeat-x;
    text-align:center;
    }
    h1 {
    margin:0;
    padding:0;
    }
    .clear {
    clear:both;
    }
    
    #outerwrapper {
    width:100%;
    }
    
    #wrapper {
    margin:0 auto;
    width:1000px;
    padding:0;
    }
    
    div#bgleft {
        margin:0;
        float:left;
        width:90px;
        height:150px;
        background-image:url(http://www.crosst.org/test/images/header_left.jpg);
        background-repeat:no-repeat;
        background-position:top left;
    }
    
    div#bgright {
        margin:0;
        float:right;
        background-image:url(http://www.crosst.org/test/images/header_right.jpg);
        background-repeat:no-repeat;
        background-position:top right;
        width:90px;
        height:150px;
    
    }
    #header {
    height:150px;
    width:650px;
    background:url(http://www.crosst.org/test/images/header.jpg) top center no-repeat;
    margin:0;
    padding:0;
    }
    
    #content {
    width: 667px;
    padding:0;
    margin:0 auto;
    }
    /* start navigation */
    
    #center {
    width:647px;
    margin:0 auto;
    }
    #navcontain {
    width:492px;
    margin:0 auto;
    padding:94px 0 0 0;
    }
    #nav{
    width:492px;
    margin:0;
    padding:0;
    color:#FFF;
    list-style-type:none;
    }
    #nav li {
    position:relative;
    width:80px;
    float:left;
    margin:0 0 0 2px;
    display:inline;
    }
    #nav li a{
    font:bold 1.15em Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    width:80px;
    height:32px;
    display:block;
    padding:5px 0 0 0;
    text-decoration:none;
    }
    #nav li a:hover, ul#nav li a:active {
    color:#0000FF;
    z-index:600;
    background:url(http://www.crosst.org/test/images/over.jpg) no-repeat left top;
    }
    #nav li ul {
    width:77px;
    background:white;
    position:absolute;
    text-align:left;
    left:-999em;
    top:3.6em;
    padding:0;
    list-style:none;
    margin:0;
    z-index:999;
    border:1px solid #CC9900;
    }
    #nav li ul li {
    width:77px;
    margin:0;
    clear:left;
    }
    #nav li:hover ul, #nav li.sfhover ul {
    left:0px;
    }
    #nav li ul li a{
    width:75px;
    border-bottom:1px solid #CC9900;
    position:relative;
    padding:5px 0 5px 2px;
    height:auto;
    color:#0000FF;
    float:left;
    }
    .bodycopy p{
    text-align:left;
    text-indent: 10px;
    }
    .contentleft p {
    text-align:left;
    text-indent: 10px;
    }
    
    #contentright p {
    text-align:left;
    text-indent: 10px;
    }
    
    .contentright p {
    line-height:.3em;
    margin:0px;
    padding:0px;
    }
    
    
    #contentright {
    background:#ffffff url(http://www.crosst.org/test/images/rc_brcontent.png) bottom left no-repeat;
    height:auto;
    float:left;
    width: 130px;
    padding:10px 10px 10px 10px;
    margin:150px 0px 0px 0px;
    display:block;
    }
    
    .rightwrap {
    margin-top:1px;
    margin-left:20px;
    float:left;
    background: url(http://www.crosst.org/test/images/biblehead.jpg) top right no-repeat;
    width:180px;
    display:inline;
    
    }
    
    .contentleft {
    height:auto;
    background:#FFFFFF url(http://www.crosst.org/test/images/feather.jpg) bottom right no-repeat;
    float:left;
    width:445px;
    margin: 9px 0 0 20px;
    display:inline;
    text-align:left;
    
    }
    .contentleft p {
    text-align:left;
    text-indent:10px;
    }
    
    .contentleft_head {
    padding:0px;
    margin:0px;
    }
    
    .contentleft_head h1{
    text-align:left;
    padding:0px 0px 10px 0px;
    margin:0px;
    font: bold 1.7em Verdana, Arial, Helvetica, sans-serif;
    color:#4284c0;
    
    }
    
    .contentleft_head .subhead {
    padding:0px;
    font:1.4em bold "Times New Roman", Times, serif;
    text-align:left;
    }
    
    .contentleft_head h1 .hr_top {
    border-bottom:1px solid #000000;
    width: 200px;
    height:5px;
    margin-left:200px;
    text-align:right;
    
    }
    
    h2.titles {
    padding-top:5px;
    font:bold 1.5em Verdana, Arial, Helvetica, sans-serif;
    color:#4284c0;
    border-bottom:1px solid #ffe66d;
    text-align:left;
    width: 400px;
    }
    
    .roundedcornr_top div {
       background: url(http://www.crosst.org/test/images/roundedcornr_tl.png) no-repeat top left;
    }
    .roundedcornr_top {
       background: url(http://www.crosst.org/test/images/roundedcornr_tr.png) no-repeat top right;
    }
    .roundedcornr_bottom div {
       background: url(http://www.crosst.org/test/images/roundedcornr_bl.png) no-repeat bottom left;
    }
    .roundedcornr_bottom {
       background: url(http://www.crosst.org/test/images/roundedcornr_br.png) no-repeat bottom right;
    }
    
    .roundedcornr_top div, .roundedcornr_top, 
    .roundedcornr_bottom div, .roundedcornr_bottom {
       width: 100%;
       height: 12px;
       font-size: 1px;
    }
    .roundedcornr_content {
    margin: 0px 12px;
    float:left;
    display:inline;
     }
     
    .church {
    float:left;
    background:url(http://www.crosst.org/test/images/church.jpg) top left no-repeat;
    width:190px;
    height:137px;
    margin:0px 10px 0px 0px;
    
    }
    
    .br_corner {
    float:right;
    text-align:right;
    background:url(http://www.crosst.org/test/images/roundedcornr_br.png) bottom right no-repeat;
    height:12px;
    
    }
    
    .bl_corner {
    float:left;
    background:url(http://www.crosst.org/test/images/roundedcornr_bl.png) bottom left no-repeat;
    height:12px;
    }
    
    .tab_devotion {
    height:30px;
    width:130px;
    background:url(http://www.crosst.org/test/images/tab.png) top center no-repeat;
    font:1.6em "Times New Roman", Times, serif;
    color:#FFFFFF;
    margin:0px;
    padding:0px 0px 0px 0px;
    text-align:center;
    line-height:30px;
    }
    
    .tab_botm {
    height:160px;
    width:130px;
    background:url(http://www.crosst.org/test/images/botm.jpg) top center no-repeat;
    font:1.3em "Times New Roman", Times, serif;
    color:#FFFFFF;
    padding:0px 0px 10px 0px;
    text-align:center;
    line-height:30px;
    }
    
    div .tab_search {
    background:url(http://www.crosst.org/test/images/tab.png) top center no-repeat;
    font:1.6em "Times New Roman", Times, serif;
    color:#FFFFFF;
    text-align:center;
    line-height:30px;
    padding:0px 0px 0px 0px;
    margin-top:20px;
    
    }
    
    .tab_search p {
    line-height:0px;
    padding:0px 0px 0px 0px;
    margin-top:0px;
    }
    
    .tab_search input {
    padding-top:0px;
    margin-top:10px;
    }
    
    #content_top td {
    padding:5px 5px 5px 5px;
    }
    
    .style1 {font-size: 12px}
    -->
    </style>
    </head>
    <body>
    <div id="outerwrap">
        <div id="bgleft"><br class="clear" />
        </div>
        <div id="bgright"><br class="clear" />
        </div>
        <div id="center">
            <div id="header" align="center">
                <div id="navcontain">
                    <ul id="nav">
                        <li><a href="http://www.crosst.org">Home</a></li>
                        <li><a href="#">Ministry</a></li>
                        <li><a href="#">Media</a>
                            <ul>
                                <li><a href="live.html">Live</a></li>
                                <li><a href="archive.html">Archive</a></li>
                                <li><a href="photos.html">Photos</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Calendar</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Links</a></li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        <!--end center wrap for header-->
        <div id="content">
            <div class="contentleft">
                <div class="roundedcornr_top">
                    <div></div>
                </div>
                <div class="roundedcornr_content">
                    <div class="church"></div>
                    <div class="contentleft_head">
                        <h1>Welcome<br />
                            to the Body of Christ at Cross Tabernacle
                            <div class="hr_top"></div>
                        </h1>
                        <div class="subhead">Please look around and get aquainted with our site. Feel free to contact us if you have any questions or prayer requests.</div>
                    </div>
                    <h2 class="titles">Abandon Concert</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur 
                        adipisicing elit, sed do eiusmod tempor incididunt 
                        ut labore et dolore magna aliqua. Ut enim ad minim 
                        veniam, quis nostrud exercitation ullamco laboris 
                        nisi ut aliquip ex ea commodo consequat. Duis aute 
                        irure dolor in reprehenderit in voluptate velit esse 
                        cillum dolore eu fugiat nulla pariatur. Excepteur 
                        sint occaecat cupidatat non proident, sunt in culpa 
                        qui officia deserunt mollit anim id est laborum.</p>
                    <h2 class="titles">Ministry Needs</h2>
                    <p class="bodycopy">Vestibulum adipiscing pretium leo. Ut faucibus felis at erat molestie eleifend. In hac habitasse platea dictumst. Curabitur volutpat malesuada ante. Curabitur rutrum nibh ut sapien. Morbi aliquet erat nec libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
                    <p class="bodycopy">Lorem ipsum dolor sit amet, consectetur 
                        adipisicing elit, sed do eiusmod tempor incididunt 
                        ut labore et dolore magna aliqua. Ut enim ad minim 
                        veniam, quis nostrud exercitation ullamco laboris 
                        nisi ut aliquip ex ea commodo consequat. Duis aute 
                        irure dolor in reprehenderit in voluptate velit esse 
                        cillum dolore eu fugiat nulla pariatur. Excepteur 
                        sint occaecat cupidatat non proident, sunt in culpa 
                        qui officia deserunt mollit anim id est laborum.</p>
                    <h2 class="titles">Time With The Father</h2>
                    <p class="bodycopy">Lorem ipsum dolor sit amet, consectetur 
                        adipisicing elit, sed do eiusmod tempor incididunt 
                        ut labore et dolore magna aliqua. Ut enim ad minim 
                        veniam, quis nostrud exercitation ullamco laboris 
                        nisi ut aliquip ex ea commodo consequat. Duis aute 
                        irure dolor in reprehenderit in voluptate velit esse 
                        cillum dolore eu fugiat nulla pariatur. Excepteur 
                        sint occaecat cupidatat non proident, sunt in culpa 
                        qui officia deserunt mollit anim id est laborum.</p>
                    <p class="bodycopy">Lorem ipsum dolor sit amet, consectetur 
                        adipisicing elit, sed do eiusmod tempor incididunt 
                        ut labore et dolore magna aliqua. Ut enim ad minim 
                        veniam, quis nostrud exercitation ullamco laboris 
                        nisi ut aliquip ex ea commodo consequat. Duis aute 
                        irure dolor in reprehenderit in voluptate velit esse 
                        cillum dolore eu fugiat nulla pariatur. Excepteur 
                        sint occaecat cupidatat non proident, sunt in culpa 
                        qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <br class="clear" />
                <div class="roundedcornr_bottom">
                    <div></div>
                </div>
            </div>
            <div class="rightwrap">
                <div id="contentright">
                    <div style="font-size:10px;text-align:left; text-indent:10px; height:auto; font-weight:normal; color: #000000; margin-top:0px; margin-bottom:10px; overflow:hidden;">
                        <script type="text/javascript" src="http://www.verseoftheday.com/verse.js"></script>
                    </div>
                    <div class="tab_search"> Bible Search
                        <form method="post" action="http://bible.crosswalk.com/OnlineStudyBible/bible.cgi" target="_new">
                            <font face="Arial, Helvetica" size="1em">
                            <input type="text" name="word" size="15" />
                            <br />
                            <select name="version">
                                <option value="msg">MSG</option>
                                <option value="nas" >NAS </option>
                                <option value="asv" >ASV </option>
                                <option value="nkj" >NKJ </option>
                                <option value="kjv" >KJV </option>
                                <option value="tmb" >TMB </option>
                                <option value="nlt" >NLT </option>
                                <option value="nrs" >NRS </option>
                                <option value="rsv" >RSV </option>
                                <option value="tev" >TEV </option>
                                <option value="rhe" >RHE </option>
                                <option value="str" >STR </option>
                                <option value="nsn" >NSN </option>
                                <option value="ncv" >NCV </option>
                                <option value="gwd" >GWD </option>
                                <option value="web" >WEB </option>
                                <option value="bbe" >BBE </option>
                                <option value="dby" >DBY </option>
                                <option value="hnv" >HNV </option>
                                <option value="wbt" >WBT </option>
                                <option value="vul" >VUL </option>
                                <option value="ylt" >YLT </option>
                                <option value="csb" >CSB </option>
                                <option value="wnt" >WNT </option>
                            </select>
                            <input type="hidden" name="language" value="en" />
                            <input type="submit" name="submit" value="Find " />
                            </font>
                        </form>
                    </div>
                    <div class="tab_devotion">Devotional</div>
                    <p>Enjoy daily devotions to further your walk with the Lord. You can get started by selecting the month from the drop down menu.</p>
                    <div class="tab_botm">Book of The Month</div>
                </div>
                <div id="clear"></div>
            </div>
        </div>
        <!--end content-->
    </div>
    <!--end outer wrapper-->
    </body>
    </html>
    An element can't be floated and absolutely positioned as they are mutually exclusive. Absolute positioning will win out.

    The code is all in the head so you will have to copy it back to where it belongs etc (and tidy up the absolute address references).

    Hope it helps


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
  •