input styling

Hello,

I have an annoying styling issue on a webpage that I do not understand.

If you open this page (http://www.ludvigmedia.no/Order_Block_css/) and click on audio. Then you will see two line both starting with "Select again.." but you will also notice that their not completely aligned. The buttom line is moved slightly to the left. Why is this?

There are a few difference between the two line, one is plain html while the other is created using javascript but I dont see why that should make a difference. One is always displayed while the other is only shown a radio button in the first line is selected.

Tryed using firebug to compare the styling for both lines but have not been able to spot anything wrong.

Appreciate any help

It looks different because line breaks count as text nodes and generate a white space. In your hard coded HTML you have added line breaks for proper formatting but the stuff you’re adding dynamically is theoretically all added one after the other on a single line so there are no white spaces. You could add whitespaces with JS, too. I don’t know if adding a new line (\n) with JS also does the trick.

On another note: I hope that this is just a test case and eventually you’re going to use a proper form with proper labels for each input.