css:
* {
margin:0;
padding:0;
}
.blue-button
{
width:auto;
display:inline-block;
}
.blue-button:before
{
/*background-image:url('blue-button.gif');*/
background:red;
width:5px;
height:21px;
display:block;
content:"\00a0";";
float:left;
}
.blue-button span
{
background:#00AEEF;
display:block;
height:100%;
text-align:center;
margin-left:5px;
padding:3px;
padding-left:8px;
padding-right:8px;
color:white;
}
body:
<div class="blue-button"><span>abcdef</span></div>
This code snippet features a styled "blue-button" with a prepended red-filled div using CSS. The issue arises when trying to have the inside span resize according to the text, which works in Chrome but not IE/FF as the blue div is rendered on a new row instead of alongside the red div. How can this be corrected?