Ok I'm trying really hard now to completely wean myself from using tables for layout - the buttons for this site actually looked pretty decent when they were in table cells but I wanted to try putting them in DIVs.

Unfortunately it looks like they're not sitting next to each other. Can someone tell me what I'm doing wrong? Here's the site. Here's some of the code. Thanks much!

<divclass="menupane">
<spanclass="level1">
<ahref="http://www.kellstarpainting.com"onmouseover="document.images['home'].src='<%= SkinPath %>/images/homeon.gif';"onmouseout="document.images['home'].src='<%= SkinPath %>/images/homeoff.gif';">
<imgsrc="<%= SkinPath %>/images/homeoff.gif"id="home"border="0"alt="">
</a>
<ahref="http://www.kellstarpainting.com/tabid/913/Default.aspx"onmouseover="document.images['services'].src='<%= SkinPath %>/images/serviceson.gif';"onmouseout="document.images['services'].src='<%= SkinPath %>/images/servicesoff.gif';">
<imgsrc="<%= SkinPath %>/images/servicesoff.gif"id="services"border="0"alt="">
</a>
<ahref="http://www.kellstarpainting.com"onmouseover="document.images['testimonials'].src='<%= SkinPath %>/images/testimonialson.gif';"onmouseout="document.images['testimonials'].src='<%= SkinPath %>/images/testimonialsoff.gif';">
<imgsrc="<%= SkinPath %>/images/testimonialsoff.gif"id="testimonials"border="0"alt="">
</a>
</span>
<divclass="level2">
<ahref="http://www.kellstarpainting.com"onmouseover="document.images['contactus'].src='<%= SkinPath %>/images/contactuson.gif';"onmouseout="document.images['contactus'].src='<%= SkinPath %>/images/contactusoff.gif';">
<imgsrc="<%= SkinPath %>/images/contactusoff.gif"id="contactus"border="0"alt="">
</a>
<ahref="http://www.kellstarpainting.com"onmouseover="document.images['ralph'].src='<%= SkinPath %>/images/ralphon.gif';"onmouseout="document.images['ralph'].src='<%= SkinPath %>/images/ralphoff.gif';">
<imgsrc="<%= SkinPath %>/images/ralphoff.gif"id="ralph"border="0"alt="">
</a>
<ahref="http://www.kellstarpainting.com"onmouseover="document.images['aboutus'].src='<%= SkinPath %>/images/aboutuson.gif';"onmouseout="document.images['aboutus'].src='<%= SkinPath %>/images/aboutusoff.gif';">
<imgsrc="<%= SkinPath %>/images/aboutusoff.gif"id="aboutus"border="0"alt="">
</a>
</div>
<divclass="level3">
<imgsrc="<%= SkinPath %>/images/bottombar.gif"alt="New England Painter"/>
</div>
</div>

And some of my CSS:

.menupane {width: 720px;
  height: 150px;
  margin: 0 auto;
  top: 0px;
}
.level1  {width: 720px;
  height: 45px;
  margin: 0 auto;
  top: 0px;
}
.level2  {width: 720px;
  height: 45px;
  margin: 0 auto;
  top: 0px;
}
.level3  {width: 720px;
  height: 55px;
  margin: 0 auto;
  top: 0px;
}

Put your buttons into an unordered list <UL> and then set the <li> to display:inline.

You can either set the buttons as backgrounds for the <a>'s and use REAL text for the link, or just put the images into the <li>'s.

Thanks LadyNRed, I would have never thought to use those - Starting to recode it now, just have to play with the code a bit.

Sheesh--I thought I could figure this out on my own but the buttons are still breaking instead of showing up inline. I checked w3schools and can't see anything that I'm doing wrong. Anything else stick out?

<divclass="level1">
<ul>
<li><ahref="http://www.kellstarpainting.com"onmouseover="document.images['home'].src='<%= SkinPath %>/images/homeon.gif';"onmouseout="document.images['home'].src='<%= SkinPath %>/images/homeoff.gif';">
<imgsrc="<%= SkinPath %>/images/homeoff.gif"id="home"border="0"alt="">
</a>
<ahref="http://www.kellstarpainting.com/tabid/913/Default.aspx"onmouseover="document.images['services'].src='<%= SkinPath %>/images/serviceson.gif';"onmouseout="document.images['services'].src='<%= SkinPath %>/images/servicesoff.gif';">
<imgsrc="<%= SkinPath %>/images/servicesoff.gif"id="services"border="0"alt="">
</a>
<ahref="http://www.kellstarpainting.com"onmouseover="document.images['testimonials'].src='<%= SkinPath %>/images/testimonialson.gif';"onmouseout="document.images['testimonials'].src='<%= SkinPath %>/images/testimonialsoff.gif';">
<imgsrc="<%= SkinPath %>/images/testimonialsoff.gif"id="testimonials"border="0"alt="">
</a></li>
</ul>
</div>

level1{  width: 720px;
  height: 45px;
  margin: 0 auto;
  top: 0px;
}
level2{  width: 720px;
  height: 45px;
  margin: 0 auto;
  top: 0px;
}
.level3  {width: 720px;
  height: 55px;
  margin: 0 auto;
  top: 0px;
}
ul {list-style-type: none;}
li {display: inline;}

It's not working because you can't do this:

<li class="display: inline;">

The HTML has to be:

<div class="level2">
<ul class="level2">
<li><a href="#">link 1</a></li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 1</a></li>
</ul>
</div>

The CSS should be more like
ul{
margin: 0;
padding:0;
list-style: none;
}
ul li{
display: inline;
}

You might want to read this excellent tutorial on all things lists:
http://css.maxdesign.com.au/listutorial/index.htm

Thanks again LadyNRed - you know what though, I think it's the mouse rollover effects that are screwing me up.

I tried removing the A tags and just kept the img tags inside each LI, the came across inline. When I put them back, they broke up again.

Thanks for that tutorial though, I did see something in that site about using a rollover list, I'll have to see if that offers any insight.

I'd try preloading the images. Looks fine here, not sure what the problem is?
And it would probably be better if you used an image background and did text links.

Thanks MJM, it looks good now because I flipped it back to tables for the time being. It probably would be better to use text links intead of images but I'll be keeping that as a last resort--I won't be able to match the font and shadowing effect.