Page 1 of 1

CSS expanding menus works but then overloads at 3 items

Posted: Sun Jul 09, 2006 8:03 pm
by mparker1113
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Hi,

I am setting up a WYSWIG editor of sorts for a site. I have a button which is in the menu and then I have a dynamic amount of collapsing menu buttons off from that. This works great when I have two items to be shown in the collapsing part of the menu. But when I have 3, IE shows the <td> tag where i have the menu buttons to be much more in height than I want ( i use height and z-index to try to control this. And Mozilla 6 really shows the buttons out of whack -- that is not under each other, but next to each other and out of sorts. the site is seen here: [url]http://www.greenmts.com/home.php[/url]

Here is the pertinent code:

MENU BAR:

Code: Select all

<td  onMouseOver="showMenus('btn1');" id="td_menu1" onMouseOut="hideMenus('btn1');" class="td1_side_closed" valign="top" width="33%">
<button id="btn1"  onClick="showMenus('btn1');" class="btn_1">PROPERTIES</button> 

<?  // because of the td td1_side_closed class, anything put next to the PROPERTIES BUTTON is displayed with a carriage return
 

$result_props = mysql_query("select * from load_Index order by ipageID ASC");
  if(mysql_num_rows($result_props) > 0)
{ 
      for($a=0; $a<mysql_num_rows($result_props); $a++)
     {
           echo("<button id='btn".($a+2)."' class='btn_".($a + 2)."_hide' onClick='btn_to_displayPhotos(\"".mysql_result($result_props,$a,"ipageID")."\");'>".mysql_result($result_props,($a),"name")."</button>");
     }

}else echo("<button id='btn2' class='btn_2_hide'>No Properties Stored</button>");

Code: Select all

 .td1_side_closed{display: block;  height:15px;  width:85px;  z-index:1; border-top: 2px solid #336699;  
text-align:center; position:absolute; left:46.3%;}

 .td1_side_expanded{height:15px; width:85px;  border-style:none; z-index:3; text-align:center;  }
.show{display:block;}

.btn_1 { position: relative; top: 0px; left: 0px; background:#cccce1; color:#336699; font-weight: bold; border-style: grove; border-color:#ccccdd; width:110px; height:21px; margin:0;}
.btn_2_view { visibility: visible; position: relative; top:0px; left: 23px; background:#cccce1; color:#336699;  border-style: outset; border-color:#ccccdd; width:110px;}
.btn_3_view { visibility:visible; position: relative; top: 0px; left: 23px; background:#cccce1; color:#336699;  border-style: outset; border-color:#ccccdd;width:110px;}
.btn_4_view { visibility:visible; position: relative; top: 0px; left: 23px;background:#cccce1; color:#336699;  border-style: outset; border-color:#ccccdd;width:110px; }

.btn_2_hide {  visibility: hidden; position: relative; top: -10px; left: 0px; z-index:-3;}
.btn_3_hide {  visibility: hidden; position: relative; top: -10px; left: 0px; z-index:-3;}
.btn_4_hide{  visibility: hidden; position: relative; top: -10px; left: 0px; z-index:-3;}

Code: Select all

function showMenus(btn_Activated)
{
  //UwNyb7Uj
     if (btn_Activated = "btn1")
     {
          btn2.className="btn_2_view";
          btn3.className="btn_3_view";
          btn4.className="btn_4_view";
         td_menu1.className="td1_side_expanded";
          return true;
     }

}

function hideMenus(btn_Activated)
{
     if (btn_Activated = "btn1")
     {
          btn2.className="btn_2_hide";
          btn3.className="btn_3_hide";
          btn4.className="btn_4_hide";
         td_menu1.className="td1_side_closed";
          return true;
     }    
Help is much appreciated.

[/url]


feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]