Jump to content

CSS Nav bug in IE 7

chaskell

By chaskell
in CSS Help

 Share

Recommended Posts

chaskell Newbie

chaskell

Posted
Posted

Can anyone see what's wrong with my CSS on this page? It looks perfect in Firefox, but in IE7 the flyout menus move down a little more as you go down the page.

 

The page is at: http://www.flower-mound.com/redesign/home_video.php

 

The css is at: http://www.flower-mound.com/redesign/vertical.css

 

Thanks in advance.

 

Cyrus

cyrus@cyrushaskell.com

Link to comment
Share on other sites
chaskell Newbie

chaskell

Posted
  • Author
Posted

Here is the code for this page:

<!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=iso-8859-1" />
<title>The Town of Flower Mound, Texas</title>
<link href="fm_stylesnew.css" rel="stylesheet" type="text/css" />
<style type="text/css">

body {
background-image: url(bgrnd_tile.gif);
margin-left: 5px;
margin-top: 5px;
}
#Layer1 {
position:absolute;
left:14px;
top:115px;
width:175px;
height:482px;
z-index:1000;
overflow: visible;
}
#Layer2 {
position:absolute;
left:0px;
top:0px;
width:200px;
height:115px;
z-index:2;
}
#Layer3 {
position:absolute;
left:199px;
top:115px;
width:461px;
height:230;
z-index:3;
}
#Layer4 {
position:absolute;
left:0px;
top:0px;
width:599px;
height:134px;
z-index:4;
}
#Layer5 {
position:absolute;
left:0px;
top:0px;
width:664px;
height:115px;
z-index:5;
}
#Layer6 {
position:absolute;
left:671px;
top:115px;
width:250px;
height:200px;
z-index:6;
background-color: #FFFFFF;
}
</style>
<link href="weather.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#Layer7 {
position:absolute;
left:670px;
top:330px;
width:246px;
height:318px;
z-index:7;
overflow: auto;
}
-->
</style>
<link href="vertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#Layer8 {
position:absolute;
left:26px;
top:492px;
width:150px;
height:100;
z-index:5000;
}
#Layer9 {
position:absolute;
left:18px;
top:251px;
width:159px;
height:224px;
z-index:1001;
overflow: visible;
}
#Layer10 {
position:absolute;
left:11px;
top:312px;
width:175px;
height:120px;
z-index:1001;
overflow: visible;
}
#Layer11 {
position:absolute;
left:17px;
top:117px;
width:175px;
height:62px;
z-index:50000;
}
#Layer12 {
position:absolute;
left:764px;
top:95px;
width:163px;
height:15px;
z-index:1002;
}
#Layer13 {
position:absolute;
left:199px;
top:356px;
width:160px;
height:290px;
z-index:501;
overflow: auto;
}
#Layer14 {
position:absolute;
left:375px;
top:486px;
width:276px;
height:122px;
z-index:500;
overflow: auto;
padding-top: 4px;
visibility: visible;
}
#Layer15 {
position:absolute;
left:375px;
top:356px;
width:276px;
height:122px;
z-index:505;
overflow: auto;
}
#Layer16 {
position:absolute;
left:21px;
top:299px;
width:158px;
height:169px;
z-index:50001;
}
.style5 {color: #333333}
#Layer17 {
position:absolute;
left:375px;
top:489px;
width:276px;
height:157px;
z-index:50002;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_CheckFlashVersion(reqVerStr,msg){
  with(navigator){
    var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
    if (!isIE || !isWin){  
      var flashVer = -1;
      if (plugins && plugins.length > 0){
        var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
        desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
        if (desc == "") flashVer = -1;
        else{
          var descArr = desc.split(" ");
          var tempArrMajor = descArr[2].split(".");
          var verMajor = tempArrMajor[0];
          var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
          var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
          flashVer =  parseFloat(verMajor + "." + verMinor);
        }
      }
      // WebTV has Flash Player 4 or lower -- too low for video
      else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

      var verArr = reqVerStr.split(",");
      var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
  
      if (flashVer < reqVer){
        if (confirm(msg))
          window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
      }
    }
  } 
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>

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

<body onload="MM_CheckFlashVersion('8,0,0,0','Content on this page requires a newer version of Macromedia Flash Player. Do you want to download it now?');">

<div class="frame_nopadding" id="Layer13">
  <span class="largeheadercenter">Calendar</span><br />
  <table width="143" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td class="calendar_date">March 1, 2007 </td>

    </tr>
    <tr>
      <td class="calendar_row">Some event </td>
    </tr>
    <tr>
      <td class="calendar_rowalternate">some other event </td>
    </tr>
    <tr>

      <td class="calendar_date">March 2, 2007 </td>
    </tr>
    <tr>
      <td class="calendar_row">some event </td>
    </tr>
    <tr>
      <td class="calendar_rowalternate">some event </td>

    </tr>
    <tr>
      <td class="calendar_row">some event </td>
    </tr>
    <tr>
      <td class="calendar_date">March 3, 2007 </td>
    </tr>
    <tr>

      <td class="calendar_row">some event </td>
    </tr>
    <tr>
      <td class="calendar_rowalternate">some event </td>
    </tr>
    <tr>
      <td class="calendar_row">some event </td>

    </tr>
    <tr>
      <td class="calendar_rowalternate">some event </td>
    </tr>
    
    <tr>
      <td class="calendar_date">March 4, 2007 </td>
    </tr>
    <tr>

      <td class="calendar_row">some event </td>
    </tr>
    <tr>
      <td class="calendar_rowalternate">some event </td>
    </tr>
    <tr>
      <td class="calendar_row">some event </td>

    </tr>
    <tr>
      <td class="calendar_date">March 5, 2007 </td>
    </tr>
    <tr>
      <td class="calendar_row">some event </td>
    </tr>
    <tr>

      <td class="calendar_rowalternate">some event </td>
    </tr>
    <tr>
      <td class="calendar_row">some event </td>
    </tr>
    <tr>
      <td class="calendar_rowalternate">some event </td>

    </tr>
  </table>
  <br />
</div>
<div class="genericframe" id="Layer15"><span class="largeheadercenter">Weather and Traffic <br />

<!--end gather feed information-->
<style type="text/css">
<!--
.style5 {color: #333333}
-->
</style>



<table height="76" border="0" cellpadding="0" cellspacing="0">

  

  <tr>
    <td width="83" height="76" align="center" valign="top" class="weatherleftcolumn"><div align="center"><img src="http://www.weather.gov/weather/images/fcicons/skc.jpg" border="1" align="absmiddle" />
        <br />
        <span class="weather_stats"><a class="weather_stats">Currently</a></span><a class="weather_data"><br />
          </a>
    </div>
    <div class="temperature">40° F</div>	</td>

    <td width="238" valign="top" class="weatherbackground"><div class="weathermainstat">Fair</div>
<div class="weather_stats"><span class="weather_stats">Wind</span> From the South at 3 mph (190° at 3 knots)</div>
      
  <hr />
  <a href="http://dfwtraffic.dot.state.tx.us/#map.create(33.045767,-97.176281,10);setTimeout(function(){map.showIncidentIcons(tmcs['DalTrans']);map.showLaneClosureIcons(tmcs['DalTrans']);map.showCameraIcons(tmcs['DalTrans']);map.showDmsIcons(tmcs['DalTrans']);map.showDetectionZones(tmcs['DalTrans']);map.showIncidentIcons(tmcs['TransVISION']);map.showLaneClosureIcons(tmcs['TransVISION']);map.showCameraIcons(tmcs['TransVISION']);map.showDmsIcons(tmcs['TransVISION']);},2000);" target="_blank"  class="bodycopyblue">Check your daily commute with DFW Traffic</a></td>
  </tr>

</table>
</span><span class="bodycopy"><br />
</span></div>
<div id="Layer16">
  
<form name="tfm_search" method="get" action="search_results.php">
  <div align="center"><span class="RSSLink">Search for phone numbers by service </span><br />
  </div>
  <table cellpadding=0 cellspacing=0>
    <tr>
      <td><input name="search" type="text" class="depsearch_field" size="25" />      </td></tr><tr><td valign="top"><input name="submit" type="submit" class="btn" value="Search" /> <select name="anyallexact">

        <option value="all" selected="selected">All words</option>
        <option value="any">Any words</option>
        <option value="exact">Exact phrase</option>
      </select>      </td>
    </tr>
  </table>
  <br />

  <span class="subinfo">(e.g. trash, fire, permit, animal) For service requests, concerns or questions, please contact 972.539.SERV or e-mail <a href="mailto:townhall@flower-mound.com">townhall@flower-mound.com</a>. After hours, please call 972.539.0525</span>
</form>
</div>
<div class="genericframe" id="Layer17"><span class="largeheadercenter">About Flower Mound </span><br />
  <span class="bodycopy">Rich in history and tradition, the Town of Flower Mound is   continually evolving. For more information about Flower Mound, please see the links below.</span>
  <table width="98%" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td width="50%" align="left" valign="middle" class="bodycopyblue"><p><a href="http://www.flower-mound.com/history/history.php" target="_blank" class="bodycopyblue">Flower Mound History</a></p></td>

      <td width="50%" align="left" valign="middle" class="bodycopyblue"><a href="http://www.flower-mound.com/econdev/demographics.html" target="_blank" class="bodycopyblue">Demographics</a></td>
    </tr>
    <tr>
      <td width="50%" align="left" valign="middle" class="bodycopyblue"><a href="http://www.flower-mound.com/econdev/guide.pdf" target="_blank" class="bodycopyblue">Shopping  Guide</a></td>
      <td align="left" valign="middle" class="bodycopyblue"><a href="http://www.flower-mound.com/comm_info/brochure.php" target="_blank" class="bodycopyblue">The Flower Mound</a></td>
    </tr>
    <tr>

      <td width="50%" height="15" align="left" valign="middle" class="bodycopyblue"><a href="http://www.flower-mound.com/econdev/" class="bodycopyblue">Economic Development</a></td>
      <td align="left" valign="middle" class="bodycopyblue"><a href="http://www.flower-mound.com/gallery/gallery.php" class="bodycopyblue">Image Gallery</a></td>
    </tr>
  </table>
</div>
<script type="text/javascript" src="menu.js"></script>

<div class="navcolumn" id="Layer1">
  <ul class="vertical" id="menu-v" name="menu-v">

    <li><a href="quicklinks.php" name="quick links" title="Quick Links" id="Quick Links">FM Features </a>
        <ul>
          <li><a href="http://www.flower-mound.com/parks/acitivity-programs-guide.pdf" title="Activity & Programs Guide">Activity & Programs Guide</a></li>
          <li><a href="http://www.flower-mound.com/animals/pets.php" title="Adopt A Pet Today">Adopt A Pet Today</a></li>
          <li><a href="http://www.flower-mound.com/boards/boards.php" title="Boards & Commissions">Boards & Commissions</a></li>
	  <li><a href="http://www.flower-mound.com/charter/index.php" title="Charter Review Commission">Charter Review Commission</a></li>

	  <li><a href="http://www.flower-mound.com/code/code.php" title="Code of Ordinances">Code of Ordinances</a></li>
	  <li><a href="http://cdx.xceligent.com/privatebrandingcode/ListingSearchCriteria.asp?BranchID=22547" title="Commercial Property Search">Commercial Property Search</a></li>
	  <li><a href="http://www.flower-mound.com/cac" title="Community Activity Center">Community Activity Center</a></li>
	  <li><a href="http://www.flower-mound.com/customer/customer_main.php" title="Customer Relations">Customer Relations</a></li>
	  <li><a href="http://www.dentoncountywater.com/" title="Denton County Water">Denton County Water</a></li>
	  <li><a href="http://www.flower-mound.com/1171-Information/" title="FM1171 Information">FM1171 Information</a></li>

	  <li><a href="http://www.flower-mound.com/2499_information/2499.php" title="FM2499 Information">FM2499 Information</a></li>
	  <li><a href="http://www.flower-mound.com/seniors" title="Seniors in Motion">Seniors in Motion</a></li>
        </ul>
    </li>
    <li><a href="for_residents.php" title="Information for residents of the Town of Flower Mound">For Residents</a>
        <ul>
          <li><a href="http://www.brothercake.com/site/portfolio/sites/" title="Websites I've built or been involved with recently">Websites</a></li>

          <li><a href="http://www.brothercake.com/site/portfolio/projects/" title="Other projects I've been involved with recently">Projects</a></li>
          <li><a href="http://www.brothercake.com/site/portfolio/testimonials/" title="Quotes from clients and collaborators">Testimonials</a></li>
        </ul>
    </li>
    <li><a href="for_businesses.php" title="Information for companies and individuals doing business in the Town of Flower Mound">For Businesses</a>
        <ul>
          <li><a href="http://www.brothercake.com/site/products/development/" title="Quality accessible web development, from single-page templates to large dynamic sites">Website development</a></li>

          <li><a href="http://www.brothercake.com/site/products/programming/" title="Custom javascript and DHTML programming">DHTML programming</a></li>
          <li><a href="http://www.brothercake.com/site/products/menu/" title="UDM is the world's first fully-featured and accessible website menu">Ultimate Drop Down Menu</a></li>
        </ul>
    </li>
    <li><a href="online_services.php" title="Online services, forms and applications">Online Services</a></li>
<li><a href="webhelp" title="Web Help">Web Help</a>
        <ul>

          <li><a href="http://www.brothercake.com/site/products/development/" title="Quality accessible web development, from single-page templates to large dynamic sites">Website development</a></li>
          <li><a href="http://www.brothercake.com/site/products/programming/" title="Custom javascript and DHTML programming">DHTML programming</a></li>
          <li><a href="http://www.brothercake.com/site/products/menu/" title="UDM is the world's first fully-featured and accessible website menu">Ultimate Drop Down Menu</a></li>
        </ul>
    </li>
    
        </ul>
  </ul>

  <!--Departmental Search-->
  
</div>

<div id="Layer2"></div>
<div class="highlightsbox_front" id="Layer3">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="174" height="236" rowspan="2" align="left" valign="top" class="photorotator"><img src="rotator/rotator001.jpg" alt="random image" width="174" height="230" class="centerframe" /></td>
        <td align="center" valign="top" class="bottomrule"><div align="left"><br />
          <br />

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

<div class="frame_nopadding" id="Layer6"><a href="http://www.flower-mound.com/cac"></a>
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','250','height','200','title','FMTV Live Player','src','video/fmtv_player','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','video/fmtv_player' ); //end AC code
</script>
<noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="250" height="200" title="FMTV Live Player">
    <param name="movie" value="video/fmtv_player.swf" />
    <param name="quality" value="high" />
    <embed src="video/fmtv_player.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="250" height="200"></embed>
  </object>

</noscript></div>
<div class="frame_nopadding" id="Layer7">
  <span align="center" class="largeheadercenter">Announcements</span>
  <div align="center"><a href="http://www.flower-mound.com/news/news.php#appraisalreform" class="announcements">Legislative Update - Texas Task Force on Appraisal Reform </a><br />
      <img src="http://www.flower-mound.com/line.gif" alt="divider line" border="0" height="5" hspace="2" vspace="4" width="207" /><br />
      <a href="http://www.flower-mound.com/news/news.php#ebooks" class="announcements">Library Offers Downloadable eAudiobooks </a><br />
      <img src="http://www.flower-mound.com/line.gif" alt="divider line" border="0" height="5" hspace="2" vspace="4" width="207" /><br />
      <a href="http://www.flower-mound.com/news/news.php#safetygrant" class="announcements">Town Receives Public Safety Grant </a><br />

      <img src="http://www.flower-mound.com/line.gif" alt="divider line" border="0" height="5" hspace="2" vspace="4" width="207" /><br />
      <a href="http://www.flower-mound.com/news/news.php#crackdown" class="announcements">Juvenile Curfew Violation Crackdown </a><br />
      <img src="http://www.flower-mound.com/line.gif" alt="divider line" border="0" height="5" hspace="2" vspace="4" width="207" /><br />
      <a href="http://www.flower-mound.com/news/news.php#revenuecommittee" class="announcements">Town Council Appoints Revenue Options Committee </a><br />
      <img src="http://www.flower-mound.com/line.gif" alt="divider line" border="0" height="5" hspace="2" vspace="4" width="207" /><br />
      <a href="http://www.flower-mound.com/news/news.php#teamup" class="announcements">Town and Chamber Team Up </a><br />
      <img src="http://www.flower-mound.com/line.gif" alt="divider line" border="0" height="5" hspace="2" vspace="4" width="207" /><br />

      <span class="announcements"><a href="http://www.flower-mound.com/news/news.php#cac" class="announcements">Town Launches Community Activity Center Webpage</a><a href="http://www.flower-mound.com/news/news.php#cac"></a></span><br />
      <img src="http://www.flower-mound.com/line.gif" alt="divider line" border="0" height="5" hspace="2" vspace="4" width="207" /><br />
      <span class="announcements"><a href="http://www.flower-mound.com/news/news.php#compost" class="announcements">Keep Flower Mound Beautiful offers Master Composter class </a><br />
      <img src="http://www.flower-mound.com/line.gif" alt="divider line" border="0" height="5" hspace="2" vspace="4" width="207" /><br />
      <a href="http://www.flower-mound.com/news/news.php#etown" class="announcements">Sign up for New E-Town Bulletins </a><br />
      <img src="http://www.flower-mound.com/line.gif" alt="divider line" border="0" height="5" hspace="2" vspace="4" width="207" /><br />
      <a href="http://www.flower-mound.com/news/news.php#libraryvirtual" class="announcements">Library Offers Virtual Research Workshops </a><br />

      <img src="http://www.flower-mound.com/line.gif" alt="divider line" border="0" height="5" hspace="2" vspace="4" width="207" /><br />
      <a href="http://www.flower-mound.com/news/news.php#springacademy" class="announcements">FMPD to Offer Spring Citizen Police Academy </a><br />
      <img src="http://www.flower-mound.com/line.gif" alt="divider line" border="0" height="5" hspace="2" vspace="4" width="207" /><br />
      <a href="http://www.flower-mound.com/news/news.php#suburb" class="announcements">Flower Mound  		        Named Top 25 Suburb</a><br />
      <img src="http://www.flower-mound.com/line.gif" alt="divider line" border="0" height="5" hspace="2" vspace="4" width="207" /><br />
    <a href="http://www.flower-mound.com/news/news.php#alert" class="announcements">Residents  			      Encouraged to Sign up for Emergency Alert Bulletin</a></span> </div>
</div>

<div id="Layer8"><img src="images/FMLogo_glow.jpg" alt="Flower Mound Logo" width="150" height="95" /></div>
<div id="Layer11"> 
  <div align="center" class="rollover"><span class="RSSLink">E-Government</span><span class="text1"><br />
        <select name="select" size="1" class="egov" onchange="MM_jumpMenu('parent',this,0)">
            <option selected="selected">Click here to select... </option>
            <option value="http://www.flower-mound.com/2TurnItOn/index.php">Activate
              Utilities </option>
            <option value="http://www.flower-mound.com/town_sec/town_sec_agenda_item_comments.php">Agenda
              Item Comments </option>
            <option value="http://www.flower-mound.com/comm_info/request_form.php">Online
              Public Information Request </option>

            <option value="http://www.flower-mound.com/courts/juror_exempt.php">Online
              Juror Exemption Application </option>
            <option value="http://www.flower-mound.com/parks/park_improve.php">Online
              Request for Park Improvements </option>
            <option value="http://www.flower-mound.com/customer/customer_street_lights.php">Online
              Street Light Repair Request </option>
            <option value="http://www.flower-mound.com/hr/online_app.php">Online
              Job Application </option>
            <option value="http://library.flower-mound.com/How_Lib_Card.htm">Online
              Library Card Application </option>
            <option value="http://www.flower-mound.com/police/police_traffic.php">Submit
              a Traffic Complaint </option>

            <option value="http://www.flower-mound.com/agenda/agenda.php">View
              Agendas & Minutes </option>
            <option value="http://www.flower-mound.com/public/newsletters.php">View
              Inside FM Newsletter </option>
            <option value="http://www.flower-mound.com/code/code.php">View
              Code of Ordinances </option>
            <option value="http://www.flower-mound.com/bldginsp/bldg_stat.php">View
              Building Statistical Information </option>
            <option value="http://www.flower-mound.com/planning/case_log.pdf">View
              Planning Case Log </option>

            <option value="http://www.flower-mound.com/customer/Flower Mound Water Report.pdf">View
              Water Quality Report </option>
            <option value="http://www.flower-mound.com/form/choose.php">Looking
              for a Form or a Report?</option>
        </select>
  </span></div>
</div>
<div id="Layer12">
  <div align="right"><a href="http://www.flower-mound.com/news.xml"><span class="RSSLink">RSS Feed | </span><img src="xml.gif" alt="RSS Feed" width="36" height="14" border="0" /></a></div>
</div>
<div class="body_frame" id="body">

  <style type="text/css">
<!--
#SearchEngineLayer {
position:absolute;
left:561px;
top:36px;
width:248px;
height:73px;
z-index:1;
overflow: visible;
}
-->
</style>
<div id="SearchEngineLayer"><!--begin search form-->
<form method="get" action="http://www.flower-mound.com/cgi-bin/perlfect/search/search.pl">
              <div align="center">
                <p>
                  <input type="hidden" name="p" value="1" />
                  <input type="hidden" name="lang" value="en" />
                  <input type="hidden" name="include" value="" />
                  <input type="hidden" name="exclude" value="" />

                  <input type="hidden" name="penalty" value="0" />
                  <input type="hidden" name="mode">
                  <input name="hidden" type="hidden" value="all" />
                  <input name="hidden" type="hidden" value="any" />
                 
                  <span class="elementhead">Search Flower-Mound.com</span><br />
                  <input name="q" type="text" class="text1" size="25" />
                  <input name="Submit" type="submit" class="btn" value="Search" />
                  <input name="hidden" type="hidden" value="Search" />

                </p>
            </div>
</form>

<!--end search form--></div>
<img src="fm_header.jpg" alt="Flower Mound Header" width="925" height="108" />  <div class="guts">
</div>


<div class="footer">
  <div align="center">
    <p><a href="javascript:void(0)" class="white_navbar_text" onclick="MM_openBrWindow('disclaimer.html','disclaimer','width=400,height=300')">Site                      Disclaimer & Recommendations</a></p>

    </div>
</div>
</div>
</body>
</html>

 

Here is the CSS:

/* tame the lists */
ul.vertical, ul.vertical li {
margin:0;
padding:0;
list-style-type:none;
font-size:100%; /* fix for win/ie's "non-linear text scaling" bug */
}


/* navbar list */
ul.vertical {
position:absolute;
cursor:default;

/* navbar width */
width:175px;
/* navbar left and top position 
   this DOES NOT already include 1px compensation 
   on TOP, for list-item border collapse 
   (1px defaults to around 0.05em) */

left:1px;
top:75px;
}

/* navbar list-items */
ul.vertical li {
position:relative;
text-align:left;
cursor:pointer;
cursor:hand;

/* duplicate navbar width */
width:175px;

/* shift list-items to collapse borders vertically */
margin:-1px 0 0 0;
}


/* menu lists */
ul.vertical ul {
cursor:default;
position:absolute;

/* menu width */
width:175px;

/* menu offset, which already includes 1px compensation 
   on TOP, for list-item border collapse */
margin:0px 0 0 173px;
/* overlapping the menus improves usability */

/* 
position menus off the screen to hide 
because using display, visibility, overflow or clip,  
would hide them from browser-based screenreaders as well 
*/
top:-100em;

/* shift menus to collapse navbar->menu borders */
left:-1px;

/* compensate for list-item border collapse */
padding:1px 0 0 0;
}

/* menu list-items */
ul.vertical ul li {
/* duplicate menu width */
width:175 px;
}


/* further child-menu offset */
ul.vertical ul ul {
/* this already includes 1px compensation 
   for list-item border collapse */
margin:0 0 0 173px;
/* overlapping the menus improves usability */
}


/* menu triggers -- position menus back on the screen to show 
   hide these from safari < 1.2 because of it's "sticky hover" bug 
   that would make it difficult or impossible to close the menus 
   we're hiding it using the "@media with Media Type in Mixed Case" hack
   http://www.dithered.com/css_filters/css_only/media_mixed_case.html */
@media Screen, Projection { 
ul.vertical li:hover > ul { top:0; }
}


/* links */
ul.vertical a, ul.vertical a:visited {
display:block;
cursor:pointer;
cursor:hand;
color:#120B3F;
text-decoration:none;
letter-spacing:1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 900;
font-variant: normal;
background-color: #340065;
width: 151px;
padding-top: 2px;
padding-right: 7px;
padding-bottom: 2px;
padding-left: 7px;
background-image: url(images/button_bground.jpg);
background-repeat: repeat-x;
height: auto;
vertical-align: middle;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 8px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #140D41;
border-right-color: #140D41;
border-bottom-color: #140D41;
border-left-color: #140D41;
}

/* rollover pseudo-classes, and scriptable persistence class */
ul.vertical a:hover, ul.vertical a:focus, ul.vertical a.rollover, ul.vertical a.rollover:visited {
color:#FFFFFF;
background-color: #160F43;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 8px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
background-image: none;
}



/* hacks for win/ie to cure 'excess hidden margins' bug */
@media screen, projection {
* html ul.vertical li {
	/* for ie5.0 */
	display:inline; 
	/* for ie5.5+ */
	f\loat:left; 
	/* this cures 'events fall through the menu' bug in ie6 */
	background:#ffffff; 
	}
}

/* use different comparative positioning for ie, 
   to avoid problems with virtual z-ordering */
* html ul.vertical li { position:static; }
* html ul.vertical a {
position:relative;
z-index:120000;
}

/* hide menus from konqueror < 3.2 */
ul[class^="vertical"] ul { display:none; }
ul[class^="vertical"] ul { displa\y:block; }

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.