CSS dropdown (Need Help)

Discussion in 'CSS' started by LivingWaters3, Oct 15, 2008.

  1. #1
    Hello everyone.

    Can someone assist me with this?

    Under the "Products" tab there's a drop down and the blue border is not stretching to 100%. It stops where the word ends.

    Here's the site...

    http://healingwatermachines.com/

    and here's a portion of the css from the home_header.php.

    THANKS!

    ---------------------------------------------------------

    <style type="text/css">



    #dropmenudiv{

    position:absolute;

    border:1px solid #354288;

    border-bottom-width: 2;

    font:normal 10px Tahoma;

    line-height: 2px;

    z-index: 100;

    }



    #dropmenudiv a{

    width: 160;

    display:table;

    text-indent: 0px;

    border-bottom: 1px solid #354288;

    padding: 5px 5px;

    text-decoration: none;

    }



    #dropmenudiv a:hover{ /*hover background color*/

    background-color: #354288;

    }



    </style>
     
    LivingWaters3, Oct 15, 2008 IP
  2. LivingWaters3

    LivingWaters3 Banned

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    anyone in here to help?
     
    LivingWaters3, Oct 15, 2008 IP
  3. emzdesign

    emzdesign Peon

    Messages:
    538
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    First of all add px at the end of "border-bottom-width: 2"

    Secondly, can you give us the code for the menu rather than just the CSS? Thanks.
     
    emzdesign, Oct 16, 2008 IP
  4. LivingWaters3

    LivingWaters3 Banned

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    ok...it's rather lengthy...sorry for that!

    anyways...here it is...hope this helps.... i've excluded the metas


    -----------------------------------------------------------

    <script type="text/javascript" src="/js/util-functions.js"></script>

    <script type="text/javascript" src="/js/clear-default-text.js"></script>

    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

    <link href="text.css" rel="stylesheet" type="text/css" />



    <style type="text/css">

    html, body {

    height: 100%;

    margin: 0px;

    border: 0px;

    padding: 0px;

    color: white;

    background-color: #ffffff;

    }

    .movie {

    width: 650;

    height: 250;

    border-color:#000066;

    border:thin;
    z-index:-1;

    }
    </style>



    <style type="text/css">



    #dropmenudiv{

    position:absolute;

    border:1px solid #354288;

    border-bottom-width: 2;

    font:normal 10px Tahoma;

    line-height: 20px;

    z-index: 100;

    }



    #dropmenudiv a{

    width: 140;

    display:table;

    text-indent: 0px;

    border-bottom: 1px solid #354288;

    padding: 5px 5px;

    text-decoration: none;

    }



    #dropmenudiv a:hover{ /*hover background color*/

    background-color: #EEEEEE;

    }



    </style>



    <script type="text/javascript">

    var menu1=new Array()

    menu1[0]='<a href="/products/compare_water_ionizers_and_water_filter_models.php" class="biggerdarkermaintext">Ionizers</a>'

    menu1[1]='<a href="/products/whole_house_water_filter_and_softener_system_salt_free_water_softener.php#WholeHouseWaterFilter" class="biggerdarkermaintext">Whole House Water Filters</a>'

    menu1[2]='<a href="/products/whole_house_water_filter_and_softener_system_salt_free_water_softener.php" class="biggerdarkermaintext">Salt Free Water Softners</a>'

    menu1[3]='<a href="/products/health_products.php" class="biggerdarkermaintext">Health Products</a>'

    menu1[4]='<a href="/products/water_testing_supplies.php" class="biggerdarkermaintext">Water Testing Supplies</a>'

    menu1[5]='<a href="/products/accessories.php" class="biggerdarkermaintext">Accessories</a>'

    menu1[6]='<a href="/products/shower_and_bath_filters.php" class="biggerdarkermaintext">Shower and Bath Filters</a>'

    menu1[7]='<a href="/products/drinking_water_pre_filters.php" class="biggerdarkermaintext">Pre-Filters</a>'

    menu1[8]='<a href="/products/jupiter_biostone_replacement_fiters.php" class="biggerdarkermaintext">Replacement Filters</a>'

    menu1[9]='<a href="" class="biggerdarkermaintext">Reverse Osmosis Water Filters</a>'



    var menu2=new Array()

    menu2[0]='<a href="/information/doctor_testimonials_about_ionized_water.php" class="biggerdarkermaintext">Doctor Testimonials</a>'

    menu2[1]='<a href="/information/customer_raves.php" class="biggerdarkermaintext">Customer Satisfaction</a>'

    menu2[2]='<a href="/articles/how_ionized_water_changed_my_life.php" class="biggerdarkermaintext">Ionized Water Changed My Life</a>'

    menu2[3]='<a href="/articles/chronic_progressive_ms.php" class="biggerdarkermaintext">Chronic Progressive MS</a>'

    menu2[4]='<a href="/articles/chronic_eczema.php" class="biggerdarkermaintext">Chronic Eczema</a>'

    menu2[5]='<a href="/articles/chronic_fatigue_syndrome.php" class="biggerdarkermaintext">Chronic fatigue Syndrome</a>'

    menu2[6]='<a href="/information/water_is_working.php" class="biggerdarkermaintext">The water is Working</a>'

    menu2[7]='<a href="/information/testimonials.php" class="biggerdarkermaintext">Customer Results</a>'




    var menu3=new Array()

    menu3[0]='<a href="/affiliate/affiliates.php" class="biggerdarkermaintext">Affiliate Information</a>'

    menu3[1]='<a href="/affiliate/affiliates.php" class="biggerdarkermaintext">Affiliate Login</a>'


    var menu4=new Array()

    menu4[0]='<a href="/information/prefilter_recommendation.php" class="biggerdarkermaintext">Pre-filter Recomendations</a>'


    var menuwidth='950px' //default menu width

    var menubgcolor='#FFFFFF' //menu bgcolor

    var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)

    var hidemenu_onclick="no" //hide menu when user clicks within menu?





    var ie4=document.all

    var ns6=document.getElementById&&!document.all



    if (ie4||ns6)

    document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')



    function getposOffset(what, offsettype){

    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

    var parentEl=what.offsetParent;

    while (parentEl!=null){

    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

    parentEl=parentEl.offsetParent;

    }

    return totaloffset;

    }





    function showhide(obj, e, visible, hidden, menuwidth){

    if (ie4||ns6)

    dropmenuobj.style.left=dropmenuobj.style.top="-500px"

    if (menuwidth!=""){

    dropmenuobj.widthobj=dropmenuobj.style

    dropmenuobj.widthobj.width=menuwidth

    }

    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")

    obj.visibility=visible

    else if (e.type=="click")

    obj.visibility=hidden

    }



    function iecompattest(){

    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

    }



    function clearbrowseredge(obj, whichedge){

    var edgeoffset=0

    if (whichedge=="rightedge"){

    var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15

    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)

    edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth

    }

    else{

    var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset

    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?

    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight

    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?

    edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge

    }

    }

    return edgeoffset

    }



    function populatemenu(what){

    if (ie4||ns6)

    dropmenuobj.innerHTML=what.join("")

    }





    function dropdownmenu(obj, e, menucontents, menuwidth){

    if (window.event) event.cancelBubble=true

    else if (e.stopPropagation) e.stopPropagation()

    clearhidemenu()

    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv

    populatemenu(menucontents)



    if (ie4||ns6){

    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)



    dropmenuobj.x=getposOffset(obj, "left")

    dropmenuobj.y=getposOffset(obj, "top")

    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"

    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

    }



    return clickreturnvalue()

    }



    function clickreturnvalue(){

    if (ie4||ns6) return false

    else return true

    }



    function contains_ns6(a, b) {

    while (b.parentNode)

    if ((b = b.parentNode) == a)

    return true;

    return false;

    }



    function dynamichide(e){

    if (ie4&&!dropmenuobj.contains(e.toElement))

    delayhidemenu()

    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

    delayhidemenu()

    }



    function hidemenu(e){

    if (typeof dropmenuobj!="undefined"){

    if (ie4||ns6)

    dropmenuobj.style.visibility="hidden"

    }

    }



    function delayhidemenu(){

    if (ie4||ns6)

    delayhide=setTimeout("hidemenu()",disappeardelay)

    }



    function clearhidemenu(){

    if (typeof delayhide!="undefined")

    clearTimeout(delayhide)

    }



    if (hidemenu_onclick=="yes")

    document.onclick=hidemenu



    </script>





    </head>

    <body >

    <table width="950" border="0" cellspacing="0" cellpadding="0" align="center">

    <tr>

    <td valign="bottom" background="images/hwmheader.gif" height="149" width="950" style="background-repeat:no-repeat; background-position:top center" /><table width="100%" border="0" cellspacing="2" cellpadding="2">

    <tr>

    <td width="119" align="center" class="topmenu"><a href="http://www.healingwatermachines.com/" class="topmenu">HOME</a></td>

    <td width="119" align="center"><a href="http://www.healingwatermachines.com/products/water_ionizers_water_filters_salt_free_water_softeners_health_products.php" class="topmenu" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">PRODUCTS</a></td>

    <td width="119" align="center" class="topmenu"><a href="http://www.healingwatermachines.com/information/ionizer_reviews.php" class="topmenu" onMouseOver="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()">IONIZER REVIEWS</a></td>

    <td width="118" align="center" class="topmenu"><a href="http://www.healingwatermachines.com/articles/" class="topmenu">ARTICLES</a></td>

    <td width="118" align="center" class="topmenu"><a href="http://www.healingwatermachines.com/information/watch_video.php" class="topmenu">VIDEOS</a></td>

    <td width="119" align="center"><a href="http://www.healingwatermachines.com/information/testimonials.php" class="topmenu" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">TESTIMONIALS</a></td>

    <td width="119" align="center" class="topmenu"><a href="http://www.healingwatermachines.com/information/frequently_asked_questions.php" class="topmenu">FAQS</a></td>

    <td width="119" align="center"><a href="http://www.healingwatermachines.com/affiliate/affiliates.php" class="topmenu" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()">AFFILIATES</a></td>



    </tr>

    </table>

    </td>

    </tr>

    <tr>

    <td bgcolor="#aaaaaa"><img src="images/spacer.gif" border="0" height="1"></td>

    </tr>

    </tr>

    <td bgcolor="#bbbbbb"><img src="images/spacer.gif" border="0" height="1"></td>

    </tr>

    </tr>

    <td bgcolor="#cccccc"><img src="images/spacer.gif" border="0" height="1"></td>

    </tr>

    </tr>

    <td bgcolor="#dddddd"><img src="images/spacer.gif" border="0" height="1"></td>

    </tr>

    </tr>

    <td bgcolor="#eeeeee"><img src="images/spacer.gif" border="0" height="1"></td>

    </tr>

    </table>

    <!-- Begin Welcome Box -->





    <!-- Begin Body & Side Nav -->

    <table width="950" border="0" cellspacing="0" cellpadding="0" align="center" style="border-left-style: solid; border-right-style: solid; border-color:#D6DEE6; border-width:1px">

    <tr>

    <td width="275" valign="top"><?php include "nav/sidenavs/home.php"; ?></td>

    <td width="675" valign="top"><table width="100%" border="0" cellspacing="2" cellpadding="2">

    <tr><td width="950" height="228" valign="top" background="images/home_box_small.gif" style="background-repeat:no-repeat; background-position:top; border-width:1px;"><table width="97%" border="0" cellspacing="2" cellpadding="2" align="center">

    <tr>

    <td width="2%" height="46">&nbsp;</td>

    <td width="94%" valign="bottom"><p class="h1">Live Better, Drink Better with Alkaline Water</h1></td>

    <td width="4%">&nbsp;</td>

    </tr>

    <tr>

    <td height="28">&nbsp;</td>

    <td class="maintext">Do you know what your current drinking water is doing to your health? Studies show that drinking purified or distilled water can lead to mineral deficiencies in your body&hellip;your tap water contains measurable particles of drugs and pharmaceutical and most waters are too acidic for your body&rsquo;s pH! For optimal well-being you need alkaline water, a &ldquo;living,&rdquo; electrically-charged water that easily passes through your tissues and allows your body to absorb essential alkalizing minerals.</td>

    <td>&nbsp;</td>

    </tr>

    <tr>

    <td height="25">&nbsp;</td>

    <td valign="bottom"><p class="h2">Alkaline Water Machines - The Impact on your Health is Simply Amazing</h2></td>

    <td>&nbsp;</td>

    </tr>

    <tr>

    <td >&nbsp;</td>

    <td class="maintext" valign="bottom">After over 25 years of use in Asia as medical devices, <a href="homepage.php#alkalinewatermachines" class="links">alkaline water machines</a> have been proven to provide major benefits for a wide range of diseases and ailments. Alkaline water machines, also known as <a href="information/ionizer_reviews.php" class="links">alkaline water ionizers</a>, can allow you to enjoy improved disease prevention and mental clarity, increased energy and fat burning, and much more. <a href="homepage.php" class="links">Read More</a></td>

    <td>&nbsp;</td>

    </tr>

    <tr>

    <td height="38" >&nbsp;</td>

    <td class="links" valign="bottom" align="right"><img src="images/bullet.gif" border="0"/>&nbsp;<a href="products/compare_water_ionizers_and_water_filter_models.php" class="links">View Alkaline Water Ionizers</a>&nbsp;&nbsp;&nbsp;

    <img src="images/bullet.gif" border="0" />&nbsp;<a href="information/ionizer_reviews.php" class="links">Ionizers Review</a></td>

    <td>&nbsp;</td>

    </tr>

    </table></td>

    </tr>

    <!-- End Welcome Box -->

    <tr>

    <td align="center" ><!-- IE (et. al) Object

    <object

    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="650" height="250" class="movie" id="Carousel__ie">

    <param name="movie" value="Carousel.swf" />

    <param name="flashvars" value="xmlfile=icons.xml" />

    <param name="quality" value="high" />

    <param name="bgcolor" value="#666666" />

    <param name="width" value="650" />

    <param name="height" value="250" />

    <!--[if !IE]>-->



    <!-- Firefox (et. al) Object

    <object class="movie" id="Carousel__ff" type="application/x-shockwave-flash" data="Carousel.swf">

    <param name="movie" value="Carousel.swf" />

    <param name="flashvars" value="xmlfile=icons.xml" />

    <param name="quality" value="high" />

    <param name="bgcolor" value="#666666" />

    <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer"/>

    <param name="width" value="650" />

    <param name="height" value="250" />



    <!-- No plugin

    <p>This page require <a href="http://www.adobe.com/">Adobe Flash 9.0</a> (or higher) plug in.</p>



    </object>



    </object>--></td>

    </tr>

    <tr>

    <td align="center">

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="640" height="200" name="if-header" id="if-header" align="middle">
    <param name="movie" value="scroller.swf">
    <param name="quality" value="high">
    <param name="play" value="true">
    <param name="wmode" value="opaque">
    <embed height="200" name="if-header" pluginspage="http://www.macromedia.com/go/getflashplayer" src="scroller.swf" type="application/x-shockwave-flash" width="640" quality="high" wmode="opaque" play="true" />
    </object>


    </td>

    </tr>
    <tr>

    <td><img src="images/spacer.gif" height="10" /></td>

    </tr>
    <tr>

    <td align="center">
    <table class="maintext">
    <tr>
    <td background="images/wuu_bckg.gif" style="background-repeat:no-repeat" height="165" width="630"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <font color="#35438c" size="+1">Why Use Us...</font>
    <font color="#666666" size="+1">6 Brands, 11 Models, Best Prices, No Lies</font></p>

    <span class="style1"><font color="#c62323">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;We are an independent and unbiased company: </font> <font color="#666666">Our information and recommendations are based on
    <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;facts, not manufacturer loyalty or profit margins.</font>
    <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#c62323">Highest Quality:</font> <font color="#666666">We only offer the most trustworthy water ionizers and water filtration and salt free water <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;softeners on the market.</font>
    <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#c62323">Low Price Guarantee:</font> <font color="#666666">If you happen to find one of our products at a lower price, just call, we'll meet it or<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beat it.</font></span><br />


    </td>
    </tr>
    <tr>
    <td style="background-image:url(images/freeshipping_bckg.gif); background-repeat:no-repeat" height="82"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#35438c" size="+1">Free Shipping</font><br />
    <br />
    <span class="style1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#666666">On Selected Products Shipped within the US, or<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Up to $100 off International Shipping</font></span></p>
    </td>
    </tr></table></td>

    </tr>
    <tr>

    <td><img src="images/spacer.gif" height="10" /></td>

    </tr>

    <tr>

    <td><table width="650" border="0" cellspacing="0" cellpadding="0" align="center" class="maintext">

    <tr>
    <td width="50%" style="background:URL(images/home_pelican.gif); background-repeat:no-repeat; background-position:center">
    <table align="center" width="230" class="biggerdarkermaintext" height="275">
    <tr><td height="140">&nbsp;</td></tr>
    <tr><td valign="top"><a href="http://healingwatermachines.com/products/whole_house_water_filter_and_softener_system_salt_free_water_softener.php" class="biggerdarkermaintext" style="text-decoration:none">
    <p><font color="#4866a2" size="+1">PELICAN PRODUCTS</font></p>
    <p><span class="style1">Proud Distributes and Installers for:</span><br />
    <font color="#317623" size="+1">Whole House Water Filters
    and Salt Free Water Softeners</font></p></a>

    </td></tr></table>

    </td>

    <td width="*">&nbsp;</td>

    <td width="50%" align="left" style="background:URL(images/home_health.gif); background-repeat:no-repeat; background-position:center">
    <table align="center" width="230" class="biggerdarkermaintext" height="275">
    <tr><td height="140">&nbsp;</td></tr>
    <tr><td valign="top"><a href="http://healingwatermachines.com/products/health_products.php" class="biggerdarkermaintext" style="text-decoration:none">
    <p><font color="#317623" size="+1">HEALTH PRODUCTS</font></p>
    <p class="style1">We offer a wide range of health products
    for both adults and children.</p>
    <p class="style1">Visit our Health Product section for specific products and more information</p></a>
    </td></tr></table>
    </td>

    </tr>

    </table>

    </td>

    </tr>

    </table>

    </td>



    </tr>



    </table>

    </table></td>

    </tr>

    </table>

    <table width="950" border="0" cellspacing="0" cellpadding="0" bgcolor="ffffff" align="center">

    <tr><td><?php include "nav/footers/home_footer.php"; ?></td></tr></table>
     
    LivingWaters3, Oct 16, 2008 IP