Question : How do I get these two menus to work on Firefox?

Hi,

I am an absolute novice at HTML but have managed to get my web site doing everything I need on Internet Explorer perfectly. The web site is going to be posted on my free web space which will only accommodate basic HTML. However when I run it on Firefox and Opera the menus don't display correctly. On Google and IE8 it works perfectly. There is supposed to be two layers to the menu. The top menu seems to form correctly on all but one of the four explorers but the sub menu only works two of the four.

I have isolated the menu HTML code and the parts of the StyleSheet that relate to the menus and attach them below.

Can anyone help me modify the code so that both menus will work on all explorers? It is important that it be basic HTML as my ISP doesn't support anything but on the plan I am on. NB I used Microsoft Visual Web Developer 2008 Express to help me develop the code but I tried to do as much as I could with raw HTML and basically only used Web Developer to help display the pages as I built them

HTML CODE

<!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>
  <title>Welcome</title>
  <meta name="description" content="Keep a watchful eye on your assets"/>
  <meta name="Keywords" content="Insite" />    
  <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- Top Menu -->
<div align="center">
  <table border="0"
    cellpadding="10"
    cellspacing="0"
    style="table-layout: fixed;
            vertical-align: top;
            text-align: justify;
            background-color: #FFFFFF;"
            width="925"
            align="center"
  >

    <!-- Define Top Row of table -->  
    <tr bgcolor="White">
      <td colspan="4"
          style="border-style: none;
                 padding: 0px;
                 margin: 0px;
                 background-color: #FFFFFF;
                 line-height: 0px;
                 vertical-align: middle;"  
          id="Td2"
          class="MenuCell"
      >

        <!-- Define Top Level Menu -->
        <ul id="Nav">
          <li class="head"> <a href="Index.htm" >Home</a> </li>
          <li class="head"> <a href="InsiteI2.htm">Insite i2</a></li>
          <li class="head"> <a href="ProductList.htm">Buy</a></li>
          <li class="head"> <a href="AboutUs.htm">About Us</a></li>
          <li class="head"> <a href="ContactUs.htm">Contact Us</a></li>
          <li class="head"> <a href="RelatedLinks.htm">Related Links</a></li>
        </ul>

        <ul id="Nav2">
          <li class="subhead"> <a href="InsiteI2.htm" ><br /><br />Overview</a> </li>
          <li class="subhead"> <a href="Monitoring.htm"><br /><br />Monitoring</a></li>
          <li class="subhead"> <a href="Automation.htm"><br />Home <br /><br /><br />Automation</a></li>
          <li class="subhead"> <a href="Remote_Control.htm"><br />Control and<br /><br /><br />Telemetry</a></li>
          <li class="subhead"> <a href="Temperature_Monitor.htm"><br />Temperature<br /><br /><br />Monitoring</a></li>
          <li class="subhead"> <a href="GPSTracking.htm"><br />GPS<br /><br /><br />Tracking</a></li>
          <li class="subhead"> <a href="Fleet.htm"><br /><br />InsiteFleet</a></li>
          <li class="subhead"> <a href="Downloads.htm"><br /><br />Downloads</a></li>
        </ul>
      </td>
    </tr>
  </table>
</div>
</body>
</html>



CSS File
body
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  background-color: #CFD2FD;
  line-height: 20px;
}

#nav
{height: 1px;}

  .head
{
  background-position: #FFFFFF;
  position: relative;
  left: 0%;
  float: left;
  border: 1px solid #CCCCCC;
  width: 15%;
  text-align: center;
  padding: 2px;
  background: #FFFFFF;
  top: 0px;
  height: 10px;
  vertical-align: bottom;
}
 
  ul li
{
  position: relative;
  font-size: medium;
  font-weight: bold;
  list-style-type: none;
}
 
 
li.head
{
  margin: 10px 0;
  font-size: medium;
  font-weight: bold;
  font-style: normal;
  padding-top: 10px;
}

#nav2
{height: 1px;}

  .subhead
{
  background-position: #FFFFFF;
  position: relative;
  left: 5%;
  float: left;
  border: 1px solid #CCCCCC;
  width: 10%;
  text-align: center;
  padding: 2px;
  background: #FFFFFF;
  top: 0px;
  height: 30px;
  vertical-align: bottom;
  font-size: small;
  color: #000000;
}


a:visited {
  color: blue ;
  background-color: transparent ;
  text-decoration: underline ;
}

Answer : How do I get these two menus to work on Firefox?

The issue is your line-height: 0px; setting on the td - which really doesn't make sense.

You should remove this.

You will then see everything will space out too much and you need to then correct the other issues.

For instance in li.head you can remove the padding-top and just give the cell a height:23px;
That will fix up the top row.

Now get rid of all the extra <br> tags in the <ul id="Nav2"> section and you will see it improve.
There will still be some more formatting issues but hopefully this will keep you going in the right direction.

Let me know if you need more help.




Random Solutions  
 
programming4us programming4us