Hello all.  I am new here and brand spanking new to web design, but I'm trying to help a family friend set up a more professional looking website for his Hapkido school and I'm writing completely raw HTML (with which I am mostly familiar) and doing some copy/paste CSS (which I am completely new to using).  I was given a design by the grand master of the school, because someone else was supposed to have done the website for them months ago and then disappeared.  So, the website is, more or less, supposed to look like this:

http://img839.imageshack.us/img839/5232/image001hq.jpg

Currently, it looks like this:

http://www.americanhapkidoct.com/indextest.htm

The problem being, the navigation bar is way too far to the left and the spacing is too close together.  You may notice, also, a couple of things.  One being that there is no "schedule" or "contact us" on my current navigation bar, like there is in the original design.  This is because when I put all of the ones I needed to be there, the "schedule" drop down box was off and the "contact us" drop down box wrapped all the way back around to fall under "HOME."  You might or might not (depending on your computer, I think?) notice that until you hover "HOME" there's a tiny one or two pixel wide anomoly that stretches from the very left of the page to just past the "t" in "ABOUT US."  So, that said, I have a few questions.

1.) How do I get rid of the anomoly?  It's annoying both myself and the grand master of the school, whose opinion is kind of the only one that matters, in the end.
2.) How do I center the navigation bar?
3.) How do I space the navigation bar so that the SECTIONS are not all so close together?

My CSS coding is as follows:

Code: [Select].mynavbar {
position: relative;
  width: 98%;
  height: 23px; /* corresponds to 'line-height' of a.navbartitle below */
  margin: 0; border: 0; padding: 0;
  background-color: #587BD7;
}


a.navbartitle {
  display: block;
  float: left;
  color: white;
  background-color:  #587BD7;
  font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  margin: 0; border: 0; padding: 0;
  line-height: 23px; /* corresponds to 'top' value of .submenu below */
  text-align: center;
  text-decoration:none;
}
a.navbartitle:hover {
  background-color: #3B54A6;
}
/* menu title widths */
#t1 { width: 104px; }
#t2 { width: 100px; }
#t3 { width: 150px; }
#t4 { width: 200px; }

.submenu {
position:absolute;
  z-index: 2;
  top: 23px; /* corresponds to line-height of a.navbartitle above */
  padding: 0; margin: 0;
width:166px; /* If ADJUST this, then adjust width of .submenu below a too */
color: white;
background-color:  #587BD7;
border: 1px solid #587BD7; /* box around entire sub-menu */
  font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
font-size: 11px;
}

#home_submenu {  left: 0px; visibility: hidden;  }
#aboutus_submenu {  left: 104px; visibility: hidden;  }
#martialarts_submenu {  left: 204px; visibility: hidden; }
#fitnesskickboxing_submenu {  left: 354px; visibility: hidden; }

.submenu a
{
  display: block;
  color: #eee;
  background-color: #587BD7;
  width: 146px;
  padding: 5px 0px 4px 20px;
  text-decoration: none;
  background-color: #587BD7;
  border-bottom: #587BD7 dotted 1px;
  border-top: 0; border-left: 0; border-right: 0;
}


ul { position: relative; display: block; }
li { position: relative; display: block; }

.submenubox {
  margin: 0; padding: 0; border: 0;
}
.submenubox ul
{
  margin: 0; padding: 0; border: 0;
  list-style-type: none;
}

.submenubox ul li {
  margin: 0; padding: 0; border: 0;
}

.submenubox ul li a:link { }
.submenubox ul li a:visited { }
.submenubox ul li a:hover
{
  color: #FFFFFF;
  background-color: #587BD7;
  border-bottom: #587BD7 dotted 1px;
}

I literally got that code from here and just tweaked the colors and a little bit of the spacing, but I'm totally unfamiliar with CSS (until now, I have never even touched it save a direct copy & paste onto LJ and/or IJ style sheets).  So, if there's a simple fix, I would have no idea where to even begin.

My HTML code is as follows (for just the navigation bar):

Code: [Select]<!-- ############### #### Navigation Bar #### ############### -->

<!-- Link to styles used for our Navigation Bar -->
<link href="SimpleNavBarStyles.css" rel="stylesheet" type="text/css">

<!-- Link to a file with couple simple JavaScript functions used for our Navigation Bar -->
<script src="SimpleNavBarScripts.js" language="JavaScript" type="text/javascript"></script>


<!-- main nav bar titles -->
<!-- Note how the the closing angle bracket of each </a> tag runs up against the next <a> tag,
      to avoid leaving a gap between each menu title and the next one. -->
     

<!-- REPLACE each "placeholder.html" URL below with the specific page you want the user
      to go to when the given menu title is clicked. For example, the first link below
      is for the "Home" menu title, so you'd probably replace the first URL with index.html. -->

<div class="mynavbar">

<a class="navbartitle" id="t1" href="index.htm"
      onMouseOut="HideItem('home_submenu');"
      onMouseOver="ShowItem('home_submenu');"
    >HOME</a
><a class="navbartitle" id="t2" href="index.htm"
      onMouseOut="HideItem('aboutus_submenu');"
      onMouseOver="ShowItem('aboutus_submenu');"
    >ABOUT US</a
><a class="navbartitle" id="t3" href="index.htm"
      onMouseOut="HideItem('martialarts_submenu');"
      onMouseOver="ShowItem('martialarts_submenu');"
    >MARTIAL ARTS</a
><a class="navbartitle" id="t4" href="index.htm"
      onMouseOut="HideItem('fitnesskickboxing_submenu');"
      onMouseOver="ShowItem('fitnesskickboxing_submenu');"
    >FITNESS/KICKBOXING</a>


<!-- REPLACE each "placeholder.html" URL below with the specific page you want
      the user to go to when the given submenu ITEM is clicked.  -->

<!-- Home sub-menu, shown as needed  -->
<div class="submenu" id="products_submenu"
    onMouseOver="ShowItem('products_submenu');"
    onMouseOut="HideItem('products_submenu');">

  <div class="submenubox">
    <ul>
      </ul>
  </div>
</div>

<!-- About Us sub-menu, shown as needed  -->
<div class="submenu" id="aboutus_submenu"
    onMouseOver="ShowItem('aboutus_submenu');"
    onMouseOut="HideItem('aboutus_submenu');">
  <div class="submenubox">
    <ul>
      <li><a href="placeholder.html" class="submenlink">History</a></li>
      <li><a href="charlie-frequently asked questions.htm" class="submenlink">Frequently Asked Questions</a></li>

      <li><a href="INSTRUCTOR MAINPAGE.htm" class="submenlink">Instructors</a></li>
      <li><a href="testimonial page.htm" class="submenlink">Testimonials</a></li>
  </div>
</div>

<!-- Martial Arts sub-menu, shown as needed  -->
<div class="submenu" id="martialarts_submenu"
    onMouseOver="ShowItem('martialarts_submenu');"
    onMouseOut="HideItem('martialarts_submenu');">
  <div class="submenubox">
    <ul>
      <li><a href="tigerspage.htm" class="submenlink">Tigers</a></li>

      <li><a href="kidspage.htm" class="submenlink">Kids</a></li>
      <li><a href="adultpage.htm" class="submenlink">Adult</a></li>
    </ul>
  </div>
</div>

<!-- Fitness/Kickboxing sub-menu, shown as needed  -->
<div class="submenu" id="fitnesskickboxing_submenu"
    onMouseOver="ShowItem('fitnesskickboxing_submenu');"
    onMouseOut="HideItem('fitnesskickboxing_submenu');">
  <div class="submenubox">
    <ul>

      <li><a href="fitnesspage.htm" class="submenlink">Fitness Kickboxing</a></li>
      <li><a href="fitnesspage.htm" class="submenlink">Power Bands</a></li>
      <li><a href="http://kickboxers.com/index.html" class="submenlink">KUT</a></li>
     </ul>

  </div>
</div><!-- end of sub-meus -->

</div>

<!-- ################## end of Navigation Bar ################### -->
While I'm familiar with a lot of HTML, I'm still only intermediate so this is well out of my comfort zone.  So, again, this is literally copied and pasted then tweaked with the proper URLs (where available) and list items. 

So, in short: I need to center and better space my navigation bar and I have no idea what to do to CORRECT it because every time I've tried, I've only made it more squished together or made the drop down boxes wrap around to the incorrect parts of the navigation bar, rendering it completely flipping useless.  Also, I need to get rid of the random extra colored pixel that has attached itself to the navigation bar only to disappear if hovered over.  What am I doing wrong??

...and slightly off-topic (as well as completely curiosity but not a big deal at all), if you scroll to the bottom of my test page, you'll see that there's nearly no space at the bottom of it, whereas, at the top, there's a decent chunk.  I'd kind of like to get the chunk of space back, but I've tried <_P> codes as well as <_br /> codes (obviously, minus the underscores) and neither seem to want to work.  Just curious if anyone knew of a quick fix for that.  The grand master of the school is disinterested in whether or not I fix it, but it kinda bugs me, since I'm kind of OCD about symmetry lolUPDATE:

I got it to center  the navigation bar after all(at least on my computer's resolution, but if someone has 600x800 still, I would be very appreciative if someone could check it and see how it looks at that resolution; also, if anyone has Safari or Opera browsers, I don't have those to test the page on...just throwin' that out there).   Well, mostly.  It's right aligned and well-spaced for the most part.  It'll do, I guess.

That said, I've tested it on Google Chrome and Firefox successfully.  On Internet Explorer, however, everything looks good with the exception of the HOME part of the navigation bar which is in a different font color and size as well as it does not seem to link to anything the way it does on Firefox & Google Chrome.

My CSS is as follows:

Code: [Select]/* ####################   Navigation bar CSS styling   

################## */

.mynavbar {
position: relative;
  width: 98%;
  height: 25px; /* corresponds to 'line-height' of a.navbartitle

below */
  margin: 0; border: 0; padding: 0;
  background-color: #587bd7;
}


a.navbartitle {
  display: block;
  float: right;
  color: white;
  background-color:  #587bd7;
  font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  margin: 0; border: 0; padding: 0;
  line-height: 25px; /* corresponds to 'top' value of .submenu

below */
  text-align: center;
  text-decoration:none;
}
a.navbartitle:hover {
  background-color: #3b54A6;
}
/* menu title widths */
#t1 { width: 200px; }
#t2 { width: 200px; }
#t3 { width: 200px; }
#t4 { width: 200px; }
#t5 { width: 200px; }
#t6 { width: 200px; }


.submenu {
position:absolute;
  z-index: 2;
  top: 25px; /* corresponds to line-height of a.navbartitle above

*/
  padding: 0; margin: 0;
width:200px; /* If adjust this, then adjust width of

.submenu below a too */
color: white;
background-color:  #587bd7;
border: 0px solid #587bd7; /* box around entire sub-menu

*/
  font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
font-size: 11px;
}
/* Fix IE formatting quirks. */
* html .submenu { width: 200px; }
font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
font-size: 11px; /* IE needs narrower than width of

.submenu above */
/* End */

/* position of each sub menu */
/* We just eyeball the position of each submenu here -- can move

left or right as needed.
   If you adjust menu title text, you might want to adjust these

too. */
#home_submenu {  right: 1000px; visibility: hidden;  }
#aboutus_submenu {  right: 800px; visibility: hidden;  }
#fitnesskickboxing_submenu {  right: 600px; visibility: hidden; }
#martialarts_submenu {  right: 400px; visibility: hidden; }
#schedule_submenu { right: 200px; visibility: hidden; }
#contact_submenu { right: 0px; visibility: hidden; }

.submenu a
{
  display: block;
  color: #eee;
  background-color: #587bd7;
  width: 146px; /* This should be width of .submenu above minus

right-side padding on next line */
  padding: 5px 0px 4px 20px;
  text-decoration: none;
  background-color: #587bd7;
  border-bottom: #FFFFFF 1px;
  border-top: 0; border-left: 0; border-right: 0;
}


ul { position: relative; display: block; }
li { position: relative; display: block; }

.submenubox {
  margin: 0; padding: 0; border: 0;
}
.submenubox ul
{
  margin: 0; padding: 0; border: 0;
  list-style-type: none;
}

.submenubox ul li {
  margin: 0; padding: 0; border: 0;
}

.submenubox ul li a:link { }
.submenubox ul li a:visited { }
.submenubox ul li a:hover
{
  color: #FFFFFF; /* text color for submenu items */
  background-color: #3B54A6;width:180px;
  border-bottom: #FFFFFF 1px;
}

My HTML is as follows:

Code: [Select]<!-- ############### #### Navigation Bar #### ############### -->

<!-- Link to styles used for our Navigation Bar -->
<link href="SimpleNavBarStyles.css" rel="stylesheet" type="text/css">

<!-- Link to a file with couple simple JavaScript functions used for our Navigation

Bar -->
<script src="SimpleNavBarScripts.js" language="JavaScript"

type="text/javascript"></script>


<!-- main nav bar titles -->
<!-- Note how the the closing angle bracket of each </a> tag runs up against the

next <a> tag,
      to avoid leaving a gap between each menu title and the next one. -->
     

<!-- REPLACE each "placeholder.html" URL below with the specific page you want the

user
      to go to when the given menu title is clicked. For example, the first link

below
      is for the "Home" menu title, so you'd probably replace the first URL with

index.html. -->

<div class="mynavbar">

<a class="navbartitle" id="t6" href="index.htm"
      onMouseOut="HideItem('contact_submenu');"
      onMouseOver="ShowItem('contact_submenu');"
    >CONTACT</a
><a class="navbartitle" id="t5" href="index.htm"
      onMouseOut="HideItem('schedule_submenu');"
      onMouseOver="ShowItem('schedule_submenu');"
    >SCHEDULE</a
><a class="navbartitle" id="t3" href="index.htm"
      onMouseOut="HideItem('martialarts_submenu');"
      onMouseOver="ShowItem('martialarts_submenu');"
    >MARTIAL ARTS</a
><a class="navbartitle" id="t4" href="index.htm"
      onMouseOut="HideItem('fitnesskickboxing_submenu');"
      onMouseOver="ShowItem('fitnesskickboxing_submenu');"
    >FITNESS</a
><a class="navbartitle" id="t2" href="index.htm"
      onMouseOut="HideItem('aboutus_submenu');"
      onMouseOver="ShowItem('aboutus_submenu');"
    >ABOUT US</a
<a class="navbartitle" id="t1" href="index.htm"
      onMouseOut="HideItem('home_submenu');"
      onMouseOver="ShowItem('home_submenu');"
    >HOME</a>


<!-- REPLACE each "placeholder.html" URL below with the specific page you want
      the user to go to when the given submenu item is clicked.  -->

<!-- Home sub-menu, shown as needed  -->
<div class="submenu" id="products_submenu"
    onMouseOver="ShowItem('products_submenu');"
    onMouseOut="HideItem('products_submenu');">

  <div class="submenubox">
    <ul>
      </ul>
  </div>
</div>

<!-- About Us sub-menu, shown as needed  -->
<div class="submenu" id="aboutus_submenu"
    onMouseOver="ShowItem('aboutus_submenu');"
    onMouseOut="HideItem('aboutus_submenu');">
  <div class="submenubox">
    <ul>
      <li><a href="placeholder.html" class="submenlink">History</a></li>
      <li><a href="charlie-frequently asked questions.htm"

class="submenlink">F.A.Q.</a></li>

      <li><a href="INSTRUCTOR MAINPAGE.htm" class="submenlink">Instructors</a></li>
      <li><a href="testimonial page.htm" class="submenlink">Testimonials</a></li>
  </div>
</div>

<!-- Martial Arts sub-menu, shown as needed  -->
<div class="submenu" id="martialarts_submenu"
    onMouseOver="ShowItem('martialarts_submenu');"
    onMouseOut="HideItem('martialarts_submenu');">
  <div class="submenubox">
    <ul>
      <li><a href="tigerspage.htm" class="submenlink">Tigers</a></li>

      <li><a href="kidspage.htm" class="submenlink">Kids</a></li>
      <li><a href="adultpage.htm" class="submenlink">Adult</a></li>
    </ul>
  </div>
</div>

<!-- Fitness/Kickboxing sub-menu, shown as needed  -->
<div class="submenu" id="fitnesskickboxing_submenu"
    onMouseOver="ShowItem('fitnesskickboxing_submenu');"
    onMouseOut="HideItem('fitnesskickboxing_submenu');">
  <div class="submenubox">
    <ul>

      <li><a href="fitnesspage.htm" class="submenlink">Fitness Kickboxing</a></li>
      <li><a href="fitnesspage.htm" class="submenlink">Power Bands</a></li>
      <li><a href="http://kickboxers.com/index.html" class="submenlink">KUT</a></li>
     </ul>
  </div>
</div>

<!-- Schedule sub-menu, shown as needed  -->
<div class="submenu" id="schedule_submenu"
    onMouseOver="ShowItem('schedule_submenu');"
    onMouseOut="HideItem('schedule_submenu');">
  <div class="submenubox">
    <ul>

      <li><a href="placeholder.html" class="submenlink">Martial Arts

Schedules</a></li>
      <li><a href="placeholder.html" class="submenlink">Fitness Class

Schedules</a></li>
      <li><a href="placeholder.html" class="submenlink">Events CALENDAR</a></li>
     </ul>
  </div>
</div>

<!-- Contact sub-menu, shown as needed  -->
<div class="submenu" id="contact_submenu"
    onMouseOver="ShowItem('contact_submenu');"
    onMouseOut="HideItem('contact_submenu');">
  <div class="submenubox">
    <ul></ul>
  </div>
</div><!-- end of sub-meus -->

</div>

<!-- ################## end of Navigation Bar ################### -->
Does anybody know how I can get the HOME section of the navigation bar corrected in Internet Explorer?  Once I can get that corrected, it'll be all set, I think.