Button containing text and picture using DOM javascript

Question

I want to create button containing text and picture using DOM. In my code, I can get text and picture on the button. But the problem, on the button the picture apear in the top and the text after the picture not in the same line.

phone_btn.appendChild(picture)
phone_btn.appendChild( document.createTextNode(text) );

I use also CSS like this code but the picture didn't appear

    phone_btn.backgroundImage= 'url(http:...)';
    phone_btn.backgroundRepeat='no-repeat';
    phone_btn.paddingLef='30px';
    phone_btn.appendChild( document.createTextNode(text) );

What can I do to make the picture and text line up?

I use this link to resolve my problem http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients — mobileDeveloper, Jul 26 '12 at 07:22

score 1 · Answer 1 · answered Jul 24 '12 at 13:31

This sounds like purely a CSS issue and has nothing to do with javascript. I would suggest getting the CSS code right first, on its own, and then if you need to need to dynamically create or alter that element, do so after.

<a class="button">Text</a>

.button {
     padding: 0 10px;
     background-image: url(bg.jpg);
     display: block;
     height: 30px;
     line-height: 30px;
     text-align: center
}

In combination with display block, Setting the height and line-height equal will vertically center the text. This height should be equal to the height of your background image.

Button containing text and picture using DOM javascript

1 Answers1