No replies
buzzard724
buzzard724's picture
Offline
newbie
Last seen: 11 years 3 days ago
Joined: 2010-11-29
Posts: 1
Points: 2

Please see the attached files - and run in FF and IE7. In FF it works except that I would like the drop down to move to the left immediately under "Reports". In IE the drop down menu is positioned in the same place as FF - but it is impossible (well nearly - you can get lucky!) to select an item from the menu. My guess is that this is a problem with the positioning of all the divs used to create a flexible 3 column layout - or perhaps it is just a naive assumption in the css about how the ul and li will show up? I am very thankful for any thoughts - and any learning about what I am missing in the layout.

CSS

.error{
    color:#FF0000;
}
body{
font-family: Trebuchet MS, Arial;
font-size: 80%;
}
p {
    font-family: Trebuchet MS, Ariel;
    font-size: 12px;
    line-height: 12px;
    color: #006666;
    text-align: left;
}
p + p {
    margin-bottom: 1em;
}
pspace {
    font-size: 2px;
    line-height: 2px;
}
p.headerright {
    font-family: Trebuchet MS, Ariel;
    font-size: 12px;
    line-height: 12px;
    color: #006666;
    text-align: right;
}
/* Copyright 2004 - 2006 - All Rights Reserved - Thierry Koblentz - <a href="http://www.TJKDesign.com" rel="nofollow">www.TJKDesign.com</a> */
#outer_wrapper {
/* because "min-width" is not supported by IE, these pages use a script from PVII */
min-width:740px;
/* this is to "minimize" an IE bug related to background painting, but because it creates a gap below the footer, the same declaration is also added to #footer */
width:100%;
/* faux-column technique, this is the left one */
background:#fff url(left.gif) repeat-y left
}
#wrapper {
/* faux-column technique, this is the right one */
background:#fff url(right.gif) repeat-y right
}
#header {
border:4px solid #394A1A;
color:#FFBC3D;
background:#394A1A;
/* this is to "give layout" to the element and fix some peek-a-boo bug in  IE (v6 sp2) */
width:100%;
/* the above declaration creates an horizontal scroll bar in IE, this is to get rid of it */
margin:0 -1px
}
#container {
float:left;
width:75%;
/* IE doubles the margins on floats, this takes care of the problem */
display:inline;
/* this is where Ryan Brill (author of the ALA's article) and I go in "opposite directions" */
margin-left:-200px
}
#left {
float:left;
width:350px;
/* IE doubles the margins on floats, this takes care of the problem */
display:inline;
margin-left:200px
}
#leftwide {
float:left;
width:700px;
/* IE doubles the margins on floats, this takes care of the problem */
display:inline;
margin-left:200px
}
#leftreallywide {
float:left;
width:1000px;
/* IE doubles the margins on floats, this takes care of the problem */
display:inline;
margin-left:200px
}
#main {
/* the width from #left (150px) + the negative margin from #container (200px) */
margin-left:550px;
background:#FFFFFF;
}
/* good to know: if #sidebar is to be shorter than #main, then there is no need for this rule */
#sidebarnarrow {
float:right;
width:200px;
/* IE doubles the margins on floats, this takes care of the problem */
display:inline;
margin-left:100px
}
#sidebar {
/* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
padding-left:75%;
/* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
margin-left:-200px
}
#sidebar p {
/* this is to make sure IE (v6 sp2) *displays* this element (same problem as #header, but using a different fix) */
position:relative
}
#sidebar2 {
/* this is to keep the content of #sidebar2 to the right of #main even if the content of "main is shorter */
padding-left:50%;
/* this is to "bring back" the #sidebar2 that has been moved out of the viewport because of the padding value */
margin-left:-200px
}
#sidebar2 p {
/* this is to make sure IE (v6 sp2) *displays* this element (same problem as #header, but using a different fix) */
position:relative
}
#footer {
/* see #outer_wrapper  */
text-align: center;
width:100%;
/* this is to clear #container */
clear:both;
border-top:1px solid #394A1A;
border-bottom:1px solid #394A1A;
background:#394A1A}
a.footer:hover{text-decoration:underline !important;}
a.header:hover{text-decoration:underline !important;}
a.footer, a.header, a.footer:active, a.header:visited:active, a.footer:visited:active, a.footer:hover, a.header:hover, a.header:active, #footer .selected, #header .selected {
    color:#FFBC3D;
    font-family: Trebuchet MS, Ariel;
    font-size: 110%;
}
a.headercenter {
    color:#FFBC3D;
    font-family: Trebuchet MS, Ariel;
    font-size: 110%;
    text-align: center
}
/* this is the class that is applied to 2 structural hacks in the markup. The first "meaningless" element is used to clear #left in NN6 and the last one is used to clear #container in NN4 */
.clearing {height:0;clear:both}
.button {
    border: 1px solid #FFBC3D;
    background: #394A1A;
    color: #FFBC3D;
}
.button:hover {
    border: 1px solid #FFBC3D;
    background: #394A1A;
    color: #FFBC3D;
}
.rbutton {
    border: 1px solid #394A1A;
    background: #FFBC3D;
    color: #394A1A;
}
.rbutton:hover {
    border: 1px solid #394A1A;
    background: #FFBC3D;
    color: #394A1A;
}
label {
    display: block;
    width: 100px;
    float: left;
    margin: 2px 4px 6px 4px;
    text-align: left;
}
label2 {
    display: inline;
    width: 120px;
    float: left;
    margin: 2px 4px 6px 4px;
    text-align: left;
}
.required input.txt, input.txt, textarea, select, select.txt, form .required select{
    border-left:2px solid #394A1A;
    border-top:1px solid #394A1A;
    border-right:1px solid #394A1A;
    border-bottom:1px solid #394A1A;
}
textarea {
    background: #FFFFFF;
    border-left:2px solid #394A1A;
    border-top:1px solid #394A1A;
    border-right:1px solid #394A1A;
    border-bottom:1px solid #394A1A;
}
.required label{
    font-weight:bold;
    text-align: left;
}
acronym {
    color: #FF0000;
}
.lighttr {
    background: #F0E68C/*#FFB6C1 #FFE3B3*/;
    font-family: Trebuchet MS, Ariel;
    font-size: 12px;
    white-space: nowrap;
    height: 17px;
}
.darktr {
    background: #B0C4DE/*#87CEFA #BED890*/;
    font-family: Trebuchet MS, Ariel;
    font-size: 12px;
    white-space: nowrap;
    height: 17px;
}
.txt {
    border: 0.5px solid #394A1A;
    background: #fff;
    font-family: Trebuchet MS, Ariel;
    font-size: 12px;
    /*white-space: nowrap;*/
    height: 19px;
}
.txt2 {
    border: 0.5px solid #394A1A;
    background: #fff;
    font-family: Trebuchet MS, Ariel;
}
.txt3 {
    border: 0.5px solid #394A1A;
    background: #fff;
    font-family: Trebuchet MS, Ariel;
    font-size: 39px;
    white-space: nowrap;
    height: 55px;
}
.testsmall {
    border: 0px solid #394A1A;
    background: #fff;
    font-family: Trebuchet MS, Ariel;
    font-size: 9px;
        /*white-space: nowrap;
height: 17px;*/
}
.bwlighttr {
    background: #FFFFFF;
}
.bwdarktr {
    background: #E2E2E2;
}
a.chooser:hover{text-decoration:underline !important;}
.chooser{
    color:#000000;
    font-family: Trebuchet MS, Ariel;
    font-size: 11px;
}
.chooser .selected, a.chooser:active, a.chooser:visited:active, a.chooser:hover, #chooser .selected{
    color:#000000;
    font-family: Trebuchet MS, Ariel;
    font-size: 11px;
}
a.chooserred:hover{text-decoration:underline !important;}
.chooserred{
    color:#FF0000;
    font-family: Trebuchet MS, Ariel;
    font-size: 11px;
}
.chooserred .selected, a.chooserred:active, a.chooserred:visited:active, a.chooserred:hover, #chooserred .selected{
    color:#FF0000;
    font-family: Trebuchet MS, Ariel;
    font-size: 11px;
}
.login {
text-align: center;
 }
#info {
text-align: center;
 }
.print{
font-family: Trebuchet MS, Arial;
font-size: 13px;
}
.formfloatleft {
        float: left
}
.formfloatright {
        float: right
}
.left {
    text-align: left
}
/* Now the stuff for drop down menu*/
/* 
    LEVEL ONE
*/
ul.dropdown                    { position: relative; display: inline; width: 150px;} /*positions the menu*/
ul.dropdown li                    { list-style:none; display: inline; float: left; background: #394A1A; /* green for the reports menu item at the top*/}
ul.dropdown a:hover         { background: #FFBC3D; /*yellow orange*/  color:#394A1A; /*green*/  }
ul.dropdown a:active          { color: #FFBC3D; /*yellow orange*/}/*has no impact but has to be here in front of pseudo class hover otherwise hover doesn't work*/
ul.dropdown li a                { display: block; color: #C6B5E5; /*purple*/ font-weight: bold;} /*sets the colour of the reports menu item text*/
ul.dropdown li:last-child a         { border-right: none;} /* Doesn't work in IE  and affects the reports menu item not the drop down list*/
ul.dropdown li.hover,
ul.dropdown li:hover            { position: relative;} /* places the submenu at bottom right of reports menu item*/
ul.dropdown li.hover a        { font-weight: normal; background: #394A1A; /*green*/ color: #FFBC3D; /*yellow orange*/ } /* text on submenu when hoverd - depends on jquery.dropdownplain.js*/
 
ul.submenu li a                {font-weight: normal; text-decoration: none; color:#394A1A;} /*text on submenu*/
/*other submenu css inheritied from dropdown class*/
 
/* 
    LEVEL TWO
*/
ul.dropdown ul                         { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li                     { font-weight: normal; background: #E4E6E0;/*silver*/ border-bottom: 1px solid #717d5a;/*sage*/ float: none; }
 
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                    { border-right: none; width: 100%; display: inline-block; } 
 
/* 
    LEVEL THREE
*/
ul.dropdown ul ul                     { left: 100%; top: 0; }
ul.dropdown li:hover > ul             { visibility: visible; }
 
 
 

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">-->
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>contact</title>
    <link rel="stylesheet" href="ssf.css?126" type="text/css" media="screen, projection"/>
    <script type="text/javascript" src="ts_picker.js">
        //Script by Denis Gritcyuk: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%74%73%70%69%63%6b%65%72%40%79%61%68%6f%6f%2e%63%6f%6d%22%3e%74%73%70%69%63%6b%65%72%40%79%61%68%6f%6f%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p>
        //Submitted to JavaScript Kit (<a href="http://javascriptkit.com" rel="nofollow">http://javascriptkit.com</a>)
        //Visit <a href="http://javascriptkit.com" rel="nofollow">http://javascriptkit.com</a> for this script
    </script>
    <script type="text/javascript" src="jquery1.4.3min.js" ></script>
    <script type="text/javascript"  src="jquery.dropdownPlain.js"></script>
</head>
<body>
            <div id="header">
                <ul class="dropdown"><li><a href="#">Reports</a><ul class="submenu"><li><a href="printreportformenu.php?reports_id=9">Breeding Cows</a></li><li><a href="printreportformenu.php?reports_id=8">Breeding Stock Ages</a></li><li><a href="printreportformenu.php?reports_id=25">Customer most recent orders for each product</a></li><li><a href="printreportformenu.php?reports_id=23">Customer order summary complete</a></li><li><a href="printreportformenu.php?reports_id=19">Customers with NO home phone</a></li><li><a href="printreportformenu.php?reports_id=32">Fat Stock by eartag sequential</a></li><li><a href="printreportformenu.php?reports_id=31">Fat Stock by Gender and Age</a></li><li><a href="printreportformenu.php?reports_id=13">Fat Stock Details</a></li><li><a href="printreportformenu.php?reports_id=14">Fat Stock to butcher</a></li><li><a href="printreportformenu.php?reports_id=28">InvoiceForOrderSQL</a></li><li><a href="printreportformenu.php?reports_id=21">Movement records</a></li><li><a href="printreportformenu.php?reports_id=26">Muck Spreading Records</a></li><li><a href="printreportformenu.php?reports_id=7">reports</a></li><li><a href="printreportformenu.php?reports_id=29">Sales per Beef Animal - Detail</a></li><li><a href="printreportformenu.php?reports_id=30">Sales per Beef Animal - summary</a></li><li><a href="printreportformenu.php?reports_id=20">Silage Bales 2010</a></li><li><a href="printreportformenu.php?reports_id=17">Unpaid Orders</a></li><li><a href="printreportformenu.php?reports_id=2">Users</a></li><li><a href="printreportformenu.php?reports_id=27">Veterinary</a></li></ul></li></ul>
    <a class="header" href="index.php">Home</a>&nbsp;|&nbsp;
    <a class="header" href="choosecust.php">Customers</a>&nbsp;|&nbsp;
    <a class="header" href="order.php">New order</a>&nbsp;|&nbsp;
    <a class="header" href="editcontact.php">New contact</a>&nbsp;|&nbsp;
    <a class="header" href="addcust.php">New customer</a>&nbsp;|&nbsp;
    <a class="header" href="addprod.php">New product</a>&nbsp;|&nbsp;
    <a class="header" href="chooseorder.php">Orders</a>&nbsp;|&nbsp;
    <a class="header" href="chooseordersnotbanked.php">Open Orders</a>&nbsp;|&nbsp;
    <a class="header" href="chooseprod.php">Products</a>&nbsp;|&nbsp;
    <a class="header" href="choosecontact.php">Contacts</a>&nbsp;|&nbsp;
    <a class="header" href="chooseoldcust.php">Old Customers</a>&nbsp;|&nbsp;
    <a class="header" href="choosefarmevent.php">Farm Events</a>&nbsp;|&nbsp;
    <a class="header" href="report.php">Create New Report</a>&nbsp;|&nbsp;
    <a class="header" href="chooseuser.php">Users</a>&nbsp;|&nbsp;
    <a class="header" href="adduser.php">Add a new user</a>&nbsp;|&nbsp;<a class="header" href="logout.php">Logout</a>            </div><!-- /header -->
    <div id="outer_wrapper">
        <div id="wrapper">
 
 
 
            <div id="container">
                <div id="left">
                </div><!-- /left -->
                <div id="main">
                <p></p>
                <p class="right note"><acronym>*</acronym> required field</p>
        <form id="frm_chk" name="frm_chk" method="post" action="updatecontact.php">
                                <p class="required">
                <label>Choose customer<acronym title="Required field">*</acronym></label>
                <select id="cust_id" type="text" class="txt" name="cust_id" title="Select Customer &ndash; Required" >
                    <option value=""></option>
                                    <option value="10164" >? Tarffelin</option></select></p>
                                                    <p>&nbsp;</p>
                                                    <p class="required">
                        <label for="frm_chk_b_note">Note&nbsp;<acronym title="Required field">*</acronym></label>
                        <textarea id="note" name="note" title="Note" cols = "40" rows="6"></textarea>
                </p>
                <p>&nbsp;</p>            
                <p class="required">
                                                        <label for="frm_chk_b_datefornextcontact">Date of Next Contact&nbsp;<acronym title="Required field">*</acronym></label>
                    <input type="text" name="datefornextcontact" id="datefornextcontact" title="date next contact &ndash; Required" class="txt" value="24-11-2010"/>
                    <a href="javascript:show_calendar('document.frm_chk.datefornextcontact', document.frm_chk.datefornextcontact.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp"></a>
                </p>
                <p>&nbsp;</p>            
                                        <p class="required">
                        <label for="frm_chk_b_by">bywhom&nbsp;<acronym title="Required field">*</acronym></label>
                        <select id="bywhom" type="textarea" class="txt" name="bywhom" title="bywhom &ndash; Required" >
                            <option value=""></option>
                                <option value="Ad" >Ad</option></select>
                </p>
            </div><!-- /main -->
                            <!-- This is for NN6 -->
        <div class="clearing">&nbsp;</div>
        </div><!-- /container -->
            <div id="sidebar">
                                                </div><!-- /sidebar -->
                                <!-- This is for NN4 -->
                                <div class="clearing">&nbsp;</div>
            <div id="footer">
                    <a class="header" href="javascript:history.go(-1)">Back</a>
                    <input type="submit" value="Add contact" class="button"/>
            </div><!-- /footer -->
        </div><!-- /wrapper -->
    </div><!-- /outer_wrapper -->
</form>
</body>
</html>
 
 

JQUERY

/*with thanks to css-tricks.com*/
$(function(){
 
    $("ul.submenu li").hover(function(){
 
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
 
    }, function(){
 
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
 
    });
 
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");
 
});