Hi there Rain Lover,
it is not possible to directly get the dimensions of a background-image.
But this would give the same space between all images and the text...
<div>
<img style="margin-right:12px;vertical-align:middle" src="http://www.google.com/help/hc/images/sidewiki_157505_comment_bubble.gif" alt="">some text
</div>
But if you have your heart set on javascript, then here is one possible solution...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>get computed style</title>
<style type="text/css">
#foo {
background-image:url(http://www.google.com/help/hc/images/sidewiki_157505_comment_bubble.gif);
background-repeat:no-repeat;
background-position:left center;
}
.hide {
display:none;
}
</style>
<script type="text/javascript">
function init(){
var obj=document.getElementById('foo');
var obj1=document.getElementById('blah');
if(obj.currentStyle) {
image=obj.currentStyle.backgroundImage;
}
else{
compStyle=getComputedStyle(obj,'');
image=compStyle.getPropertyValue('background-image');
}
//obj1.src=image.slice(5,image.length-2); this does not work in Safari and Chrome
obj1.src=image.split('(')[1].split(')')[0];
obj.style.paddingLeft=obj1.offsetWidth+12+'px';
obj1.className='hide';
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
</head>
<body>
<div><img id="blah" src="#" alt=""></div>
<div id="foo">some text</div>
</body>
</html>
coothead