Removal of border of AnyLink drop down menu

**kyu** · 08-23-2005, 09:32 AM

Script: DD AnyLink drop down menu
http://dynamicdrive.com/dynamicindex1/dropmenuindex.htm

Umm, hey guys. I've tried to look everywhere for this similar thread but is unable to do so. Please forgive me if there is such a thread existing somewhere in this forum

Anyway this is the problem I have encountered:
http://img376.imageshack.us/img376/8190/border7tr.jpg

Is there anyway I can remove the border around the item? Because I am using table and the border turn my whole page into a mess

Sorry for the trouble

**jscheuer1** · 08-23-2005, 02:19 PM

If it is the menu that is causing it, here is where to do it:

Code:

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}

</style>

Just removing the red parts should take care of it. If it is something in your code for the table or other parts of your page that is causing it, I'd need to see that code, preferably a demo page.

PLEASE: Include the URL to your problematic webpage that you want help with.

**kyu** · 08-27-2005, 09:56 AM

I still can't remove the border

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0317)http://64.4.22.250/cgi-bin/getmsg/te...429b16febc4f80 -->
<HTML><HEAD><TITLE>| Moonlight Rhapsody &gt;&gt; An anime graphics site</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
BODY {
	BACKGROUND-IMAGE: none; MARGIN: 0px; BACKGROUND-COLOR: #CC52CB
}
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
</STYLE>

<META content="MSHTML 6.00.2900.2722" name=GENERATOR></HEAD>
<style type="text/css">

#dropmenudiv{
position:absolute;
border:0;
border-bottom-width: 1;
font:normal 12px Verdana;
color:#FFFFFF;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
color:#FFFFFF;
border-bottom: 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #E3A4EA;
}

</style>


<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="history.php">History</a>'
menu1[1]='<a href="credits.php">Credits</a>'
menu1[2]='<a href="http://flyne.net/staff" target="_blank">Staffs</a>'
menu1[3]='<a href="layout.php">Layout</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="graphics.php">Sort by names</a>'

		
var menuwidth='165px' //default menu width
var menubgcolor='#D378D8'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

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=-500
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>
<BODY>
<DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 width=200 border=0>
  <TBODY>
  <TR>
    <TD colSpan=5><IMG height=255 src="banner3.jpg" width=800 align=top border=0></TD>
  </TR>
  <TR>
    <TD><img src="home.jpg" width="124" height="61"><a href="default.htm"onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '126px')" onMouseout="delayhidemenu()"><img src="site.jpg" width="127" height="61"></a><img src="graphics.jpg" width="185" height="61"><img src="exits.jpg" width="152" height="61"><img src="updates.jpg" width="212" height="61"></TD>

  </TR></TBODY></TABLE>
<TABLE height=583 cellSpacing=0 cellPadding=0 width=800 border=0>
  <TBODY>
  <TR>
    <TD width=800 background="background.jpg" height=563>      <table height=501 width=765 align=center border=0>
      <tbody>
        <tr>
          <td valign=top width=510 height=497>
            <p align=justify class=style1> Welcome to Moonlight Rhapsody. A graphics site owned by Evelyn, Felicia, Hannah, Chiisana, Suuki and Vuvu. Anything related to graphics (from wallpapers to avatars) will be featured here. Feel free to look around, but please do take a look at the <a 
            href="rules.html">rules and regulations </a>before taking anything from here! Navigations are above. 
                <p align=justify class=style1><strong>SITE CURRENTLY UNDER CONSTRUCTION. </strong><br>
                      The first few pages of the graphics section is ready for viewing, but the others are relatively not ready yet. -_- 
                <p align=center class=style1>Moonlight Rhapsody is part of <a 
            href="www.flyne.net">flyne.net </a> </p></td>
			    <td valign=top width="32">&nbsp;</td>
          <td valign=top width="210">            <div align="justify"></div></td>
		  </tr>

<tr>


	<TD ROWSPAN="2" COLSPAN="1" WIDTH="517">&nbsp;</TD>
</tr>

          <td width=32>&nbsp;</td>
          <td 
width=210>&nbsp; </td>
        </tr>
      
    </table>
      <img src="bottom.jpg" topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 width="800" height="58" ></TD>
  </TR></TBODY></TABLE></DIV></BODY></HTML>
</div></pre>
</div>

the screencap of the layout

Thanks for all the help

**jscheuer1** · 08-27-2005, 11:58 AM

Simple, you need to declare a zero border for images that are also links, otherwise they will have the default link outline:

Code:

<img border="0" src="site.jpg" width="127" height="61">

Oh, and depending upon how you want the the drop downs to look, you may want to restore the borders in the style section for them.

Thread: Removal of border of AnyLink drop down menu

Thread Tools

Search Thread

Removal of border of AnyLink drop down menu

Bookmarks

Bookmarks

Posting Permissions