Making a CSS button

fine in Firefox, but of course no in IE

[waldemar]

Hello,

I am trying to make a button - purely rendered through CSS - with a speciality: it must have TWO borders.

So the idea is to have two DIVisions wrapping an <a> link.

The problem: It must be an INLINE button (span), but that confuses the internet explorer extremly. Firefox works fine, and using BLOCK divisions also works in IE.
Has anybody an idea how to train the Internet Explorer to display the two borders inline? Any ideas greatly appreciated.

.cssbutton1{ position:relative; top:1px; border: 1px solid #000000; background-color:#ffffff; display:inline; padding:1px; padding-top:4px;}
.cssbutton2{ position:relative; top:-2px; background-color:#555555; padding-top:1px; padding-bottom:2px; padding-left:6px; padding-right:6px; display:inline; }
.cssbutton2 a { font-family: Verdana; font-size:10px; font-weight:bold; color:#ffffff}

<span class="cssbutton1"><span class="cssbutton2">Button</a></span></span>

[saucey]

I could be missing exactly what it is you have to accomplish with the 'inline' stuff, but it seems that you are making this more complicated than it needs to be. Does this work for what you need to do?

.cssbutton1 { 
position: relative; 
top: 1px; 
border: 1px solid #000000; 
background-color: #ffffff; 
padding: 1px; 
line-height:10px; 
float:left; 
display:block; 
} 
.cssbutton1 a { 
padding:2px 4px; 
font-family: Verdana; 
background-color: #555555; 
display:block; 
font-size: 10px; 
font-weight: bold; 
color: #ffffff 
} 
<span class="cssbutton1"><a href="#">Button</a></span> 

I just removed your second span and moved its formatting inside the A tag. I know that to do this I had to set display to block, but could you not float your spans to accomplish what you are trying to do?

I'm suffering from sleepiness brought on by a huge biz lunch and I'm probably going in a direction that's not helpful... hopefully that's not the case. :)