css based button

[Dragos]

hi guys,

I found somewhere this css and I adapted so it will render a round corners button by using a div, an anchor and a span element.
in order to get the 3d look, the anchor uses "bgbutton.gif" as a background image, tiled horizontally.


html code:
<div class="button">
<a href="#"><span>caption</span></a>
</div>

css:
div.button{
float:left;
}
div.button a {
display:block;
position:relative;
border-width:1px 0;
border-color:#ccc;
border-style:solid;
color:#555;
text-decoration:none;
margin:4px 1px;
background-image: url(bgbutton.gif);
background-repeat: repeat-x;
background-position: left center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
letter-spacing:0px;
}

div.button a span {
display:block;
position:relative;
margin:0 -1px;
border-width:0 1px;
border-color:#ccc;
border-style:solid;
padding:3px 8px;
}

div.button a:hover {
border-color:#aaa;
color:#333;
}

div.button a:hover span {
border-color:#aaa;
}

image file:
http://www.webfixtech.com/repository/cssbutton/bgbutton.gif

it should look like this: http://www.webfixtech.com/repository/cssbutton/

enjoy and good luck!

[keltoid]

This is great - I love it.

However, I'm having trouble getting the layout to look the same in IE, FF and Safari.

FF - looks great
IE - they appear to be taking up the entire <td> space...?
Safari - one button insists on lining up next to another despite having <p>s and <br>s etc... tried adding <style="display:inline"> to the divs -- I am wondering if it has to do with the float properties...

Does anyone have any answers? I'm about to leave for day and will come back with more details if anyone needs them Thanks!

[keltoid]

page code:


<tr>
<td colspan="2"><br /><br /><br /><div align="right">
<asp: asp stuff here />
</div>
<div id="buttontable" align="right">
<table><tr><td>
<P></P>
<div class="button">
<p><a href="#"><span> Add To Bag</span></a></p>

</div><br/><br/>
<div class="button">
<a href="#"><span> CONTINUE SHOPPING </span></a>
</div>
<P>&nbsp;</P><br/>
<div class="button">
<a href="#"><span>Add To Wish List</span></a>
</div></td></tr></table>

</td>
</tr>



in the css:


div.button{
float:right;
}
div.button a {
display:block;
position:relative;
border-width:2px 0;
border-color:#ccc;
border-style:solid;
color:#990033;
text-decoration:none;
margin:11px 4px;
background-image: url(site_images/bgbutton.gif);
background-repeat: repeat-x;
background-position: left center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:100;
letter-spacing:0px;
text-align:center;

}

div.button a span {
display:block;
position:relative;
margin:0 -1px;
border-width:0 2px;
border-color:#aaa;
border-style:solid;
padding:4px 16px;
}

div.button a:hover {
border-color:#A57C8A;
color:#333;
}

div.button a:hover span {
border-color:#A57C8A;
}


/*table I added to hopefully align correctly but doesn't */
#buttontable td {
width:250px;
font-family: Verdana,Sans-Serif,Arial;
vertical-align: top;
font-size: 12px;
height: 16px;
align: right;

}

--------

in IE - either all the buttons are the same length and don't align right (Mac) or - the CONTINUE SHOPPING button aligns left of the other two and actually wraps the two words so is a taller button (PC). Ugh! HELP

Thanks in advance if you can help me here. :)

[keltoid]

is it the < span > element causing probs in IE??