3 Replies Latest reply on May 17, 2006 7:46 AM by Newsgroup_User

    CSS Alignment problem

    CEH1024 Level 1
      I am attempting to write my navigation without Javascript. With the code below I can get it all to work with the exception that the labels such as Home, About Us etc. will not center vertically. Otherwise it all seems to work the way I want.

      Any help would be much appreciated.

      Thanks,

      Chuck





      Style Sheet *********

      .Home {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      color: #000000;
      font-weight: bold;
      text-align: center;
      height: 30px;
      text-decoration: none;
      vertical-align: middle;
      white-space: nowrap;
      background-image: url(Images/Hometri.gif);
      display: block;
      }
      .Home:hover {
      background-position: 0 -30px;
      }
      **************************

      Code **************************

      <table width="800" border="0" cellpadding="0" cellspacing="0">
      <tr>
      <td height="110" colspan="7" background="Images/top1.gif"></td>
      </tr>
      <tr>
      <td width="67" height="30"><div><a class="Home" href="index.htm">Home</a></div></td>
      <td width="95" height="30"><div><a class="WebD" href="index.htm">Masterpiece</a></div></td>
      <td width="59" height="30"><div><a class="Logos" href="index.htm">Side Board</a></div></td>
      <td width="85" height="30"><div><a class="BussT" href="index.htm">Buss Tools</a></div></td>
      <td width="110" height="30"><div><a class="CustD" href="index.htm">Cust Design</a></div></td>
      <td width="74" height="30"><div><a class="About" href="index.htm">About Us</a></div></td>
      <td width="310" background="Images/R2Right.gif"><div align="center" class="Email">Email: info@firststop.us </div></td>
      </tr>
      </table>
        • 1. Re: CSS Alignment problem
          Level 7
          CEH1024 wrote:

          > I am attempting to write my navigation without Javascript. With the code below
          > I can get it all to work with the exception that the labels such as Home, About
          > Us etc. will not center vertically. Otherwise it all seems to work the way I
          > want.
          >
          > Any help would be much appreciated.
          >
          > Thanks,
          >

          Add this to your .Home css

          line-height: 30px;


          You do realise that this method is not cross browser compatible?

          There is no menu system available that can work on css alone cross brower.

          • 2. Re: CSS Alignment problem
            CEH1024 Level 1
            Worked like a charm. thanks

            In answer to your question, No, I did not know that CSS was not now totally cross browser compatable. My intention was to move more toward CSS for many reasons but the compatability issue may force me to go back to Javascript.

            Thanks again
            • 3. Re: CSS Alignment problem
              Level 7
              The general compatibility issues are minor compared to the benefits. Don't
              think twice and plunge ahead.

              Your problem is that you have chosen a method that relies on something not
              supported by IE....

              Using javascript to solve this is no problem, particularly if your menu
              continues to be useful even when js is disabled.

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.dreamweavermx-templates.com - Template Triage!
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
              ==================


              "CEH1024" <webforumsuser@macromedia.com> wrote in message
              news:e4fbd6$7fh$1@forums.macromedia.com...
              > Worked like a charm. thanks
              >
              > In answer to your question, No, I did not know that CSS was not now
              > totally
              > cross browser compatable. My intention was to move more toward CSS for
              > many
              > reasons but the compatability issue may force me to go back to Javascript.
              >
              > Thanks again
              >