CSS - How Do I Get This <ul> To Stack The Buttons?

I'm having some trouble adding css code to my div well it works but when i try to copy the div and paste it right under it, it works (pic1) but ones i add the css code (pic2) they both stack on top of each other i used a site that convert psd's to css code thats how i got the code i have 0% css knowledge so i dont even know what my problem is called or else i would Google it so if any one can help or point me in the right direction would be highly appreciated thanks in advanced

of course change $ for links to work

htt$://i47.tinypic.com/2nuspe9.gif : div_preview_no_css
htt$://i47.tinypic.com/28cdr2b.gif : div_preview_with_css

htt$://ww$.megaupload.com/?d=LDKDTSHJ : div_code
htt$://ww$.megaupload.com/?d=DGTIWKNX : css_code

DIV CODE:
PHP Code:
<div id="tabs">   <div id="albumcoverimg">     <img src="{album_cover_url}" alt="albumcover" />   </div>   <div id="titletext">     <p><h2>{artist_name}-{album_name}</h2></p>   </div>   <div id="descriptiontext">     <p><h3>{short_description}.</h3></p>   </div>   <ul id="infomenu">     <li>{album_price}</li>     <li>Genres:<a href="http://#"><span style="color:#298CDA;">Hip Hop/Rap,</a><a href="http://#"><span style="color:#298CDA;"> Music,</a><a href="http://#"><span style="color:#298CDA;"> Latino</span></a></li>       <li>Released: {month day, year}</li>       <li><span>&#8471;</span> {year : record_label}</li>       </ul>       <ul id="previewmenu">         <li><a href="http://#">{track_name}</a></li>         <li><a href="http://#">{track_name}</a></li>         <li><a href="http://#">{track_name}</a></li>       </ul>       <ul id="forummenu">         <li style="width:99.75%;"><a href="{forum_article_url}">Discuss in the Community</a></li>       </ul>       <div>         <img src="/images/tabss/toprowimg.gif" alt="toprow" />       </div>       <div>         <img src="/images/tabss/btmrowimg.gif" alt="btmrow" />       </div>       </div> 






CSS CODE:
PHP Code:
#infomenu li a, #previewmenu li a  {    padding-left: 0px;    padding-right: 0px;    text-decoration: none;    width: 100%;    display: block; }  #previewmenu li, #infomenu li  {    width: 100%;    display: block;    margin: 0px; }  #btmrowimg, #toprowimg  {    visibility: visible;    position: absolute;    left: 6px;    z-index: 1;    width: 540px;    height: 23px; }  #descriptiontext p  {    font: 12px/14px Verdana;    margin: 0px;    text-align: left; }  #previewmenu li a  {    color: #000000; }  #descriptiontext  {    visibility: visible;    position: absolute;    left: 212px;    top: 96px;    z-index: 1;    width: 321px; }  #forummenu li a  {    text-decoration: none;    color: #000000;    height: 100%;    display: block; }  #albumcoverimg  {    visibility: visible;    position: absolute;    left: 14px;    top: 16px;    z-index: 1;    width: 189px;    height: 189px; }  #infomenu li a  {    color: #858989; }  #forummenu li  {    height: 100%;    display: block;    float: left;    margin: 0px; }  #previewmenu  {    font: 14px/17px Verdana;    margin: 0px;    padding: 0px;    list-style: none;    text-align: left;    position: absolute;    left: 256px;    top: 217px;    z-index: 1;    width: 284px; }  #titletext p  {    font: 22px/26px Verdana;    margin: 0px;    text-align: left; }  #titletext  {    visibility: visible;    position: absolute;    left: 212px;    top: 21px;    z-index: 1;    width: 329px; }  #toprowimg  {    top: 323px; }  #forummenu  {    font: 12px/13px Verdana;    height: 13px;    text-align: center;    margin: 0px;    padding: 0px;    list-style: none;    position: absolute;    left: 338px;    top: 321px;    z-index: 2;    width: 202px; }  #btmrowimg  {    top: 373px; }  #infomenu  {    font: 12px/14px "Lucida Sans Typewriter";    margin: 0px;    padding: 0px;    list-style: none;    text-align: left;    color: #858989;    position: absolute;    left: 22px;    top: 219px;    z-index: 2;    width: 190px; }  #tabs  {    margin: 0px auto 0px 0px;    width: 547px; } 

My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons.

If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons.

Here is the site:
http:// bradleyrose . net / WaterStreetRestaurant

I want to get buttons like these with my CSS: http://members.cox.net/npalmi188/test.jpg
how do I do this? (don't worry about the color codes)
everytime I try to get something near it I get this gay gray extra bevel to my button, anybody know how to fix that? here's the code I was using that had the gray bevel:
Code:

input.button 
     { 
       font-family: MS Sans Serif;
       font-weight: none;
       font-size: 10px;
       color: #ffffff;
       background: #4C5844;
     }

I've created navigation buttons in Photoshop by making an 818px wide document, spacing out the words, then slicing them up. My navigation division is 818px wide but when I insert the buttons I created, they don't fit. I do not have any borders around them that I can tell.

Why would this happen?


http://www.oharenoise.org/new/2009_news_releases.htm

Hi,

Im trying to style the button tags, mainly to obtain rounded corners, using images. I can't use '<a>' links to style, which would be simpler, as the button is being used for a program written specifically to use button tags.

I have the button working in IE 5, 8 and 9 and firefox but other incarnations do not.

body { behavior:url( hover.htc ); }

Code:

/* REQUIRED BUTTON STYLES: */                   
button {
            position: relative;
            color:#000000;
            border: 0;
            padding: 0;
            cursor: pointer;
            overflow: visible; /* removes extra side padding in IE */
            outline: 0;
 
}
 
button::-moz-focus-inner {
            border: none;  /* overrides extra padding in Firefox */
}
 
button span {
            position: relative;
            display: block;
            white-space: nowrap;    
}
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
            /* Safari and Google Chrome only - fix margins */
            button span {
                        margin-top: -1px;
            }
}
 
 
/* OPTIONAL BUTTON STYLES for applying custom look and feel: */                 
button.submitBtn {
            padding: 0 15px 0 0;
            margin-right:5px;
            font: normal 12px Tahoma;
            color:#000000;
            text-align: center;
            background: transparent url(btn_sprite2.gif) no-repeat right -140px;
}
           
button.submitBtn span {
            padding: 3px 0 7px 15px;
            height:15px;
            background: transparent url(btn_sprite2.gif) no-repeat left top;
            color:#000;
           
}
           
button.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
            background-position: right -210px;
}
           
button.submitBtn:hover span, button.submitBtnHover span {
            background-position: 0 -70px;
}
 
button.submitBtn:active, button.submitBtnActive { /* the redundant class is used to apply the hover state with a script */
            background-position: right -140px;
}
           
button.submitBtn:active span, button.submitBtnActive span {
            background-position: left top;
}

Code:

<button value="submit" class="submitBtn"><span>Submit</span>

The above is the method i have used so far. Does anyone know how i could improve on this, or another method that maybe beneficial?

Any help will be appreciated.

Cheers.