I've managed the build the button in css but when I repeat the same method for the second button the margin doesnt seem to work right, so there is NO gap.

To view what I mean look here: http://www.mattbuk.com/test/scruples/product_boss.htm

The code on the page for the 2 buttons are

<div id="buttonArea">

<div id="boarder"
onMouseOver="this.style.border='3px double #CCCCCC'; this.style.color='#CCCCCC';"
onMouseOut="this.style.border='3px double #FFFFFF'; this.style.color='#FFFFFF';">
Home
</div>

<br />


<div id="boarder"
onMouseOver="this.style.border='3px double #CCCCCC'; this.style.color='#CCCCCC';"
onMouseOut="this.style.border='3px double #FFFFFF'; this.style.color='#FFFFFF';">
Home
</div>

</div>





and the styles for the id's are

#buttonArea{
left:21px;
top: 216px;
position:absolute;
}

#boarder{
width:114px;
height:20px;
position:absolute;
border: 3px double #FFFFFF;
margin:2px;
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
font-weight:bold;
padding-top:1px;
text-align:center;
cursorointer
}


Any help would be great

you cannot have two elements with the same ID

So should I change the #boarder to .boarder and id="boarder" to class="boarder"?

Tried that mate and put style="padding-bottom:20px" on the div after the class but still doesnt make a gap just expands the boarder

yep, and remove the <br> as it will put an extra line break (and therefore a gap) between the <div>s

Dont have any gap now

http://www.mattbuk.com/test/scruples/product_boss.htm

use margins to control the gap AND GET RID OF THE ABSOLUTE POSITIONING otherwise they will sit on top of each other!!!!

Doh I forgot about the position....Padding was a general mistake but its now WORKING - Thanks for the help pal

Ok.. enlighten me. You went to the trouble of defining the button with CSS .. so WHY are you using javascript for the mouseOver effect ?? Totally unnecessary, the WHOLE thing, including the hover state, can be done in CSS.