Date: 09/18/05 (Web Development)    Keywords: css, html, web

I'm having some more difficulties with this client's website: http://www.mylbags.com/client_area/armetta/

I'm noticing something very troubling in FireFox. The menu buttons appear at the top of the screen partially covered by the top portion. The menu buttons for the portfolio also appear at the top and behind the top portion. Go here to see what I mean: http://www.mylbags.com/client_area/armetta/portfolio/work1.html Both of these sets of menu buttons are laid out in their own table. Is that part of the problem?

Please help me! Relevant CSS code is cut below.

body
  {
  margin: 0;
  padding: 0;
  background-color: white;
  }

p.top
  {
  background-color: black;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 1px;
  width: 100%;
  height: 324px;
  }
  
p.main  
  {
  background-color: white;
  text-align: center;
  position: absolute;
  left: 0px;
  top: 324px;
  width: 100%;
  height: 50%;
  z-index:1;
  }

p.description
  {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: white;
  font-size: 10pt;
  font-weight: bold;
  line-height: 16pt;
  position: absolute;
  left: 450px;
  top: 50px;
  width: 500px;
  }
  
p.navigation
  {
  position: absolute;
  text-align: center;
  top: 382px;
  width: 100%;
  margin: 0;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  left: 1px;
  z-index: 10;
  }

Source: http://www.livejournal.com/community/webdev/244770.html