span style

[ste.paoletti]

I have a problem with css
I have a this xhtml code:
<span>
<span>
<span/>
<input type="radio"/>
....
<span/>
<input type="button" onclick ="var s=document.createElement('span');
this.previousSibling.firstChild.appendChild(s); "/>
the first span is display:block
the second span is display:inline
the thirdth span is display:inline and have a background-image;

I want that when the button is pressed, the image appears without shift
left the radio button and the rest of elements(...).
I had tried by setting the width property of the second span but it
don't work. It should work in firefox and IE. Someone can help me
please?
thanks

[Spartanicus]

st**********@tiscali.it wrote:

I have a problem with css
I have a this xhtml code:
<span>
<span>
<span/>
<input type="radio"/>
....
<span/>

Invalid HTML, correct the errors.

--
Spartanicus

[ste.paoletti]

<span>
<span>
</span>
<input type="radio"/>
....
</span>

[Spartanicus]

st**********@tiscali.it wrote:

<span>
<span>
</span>
<input type="radio"/>
....
</span>

http://diveintomark.org/archives/200..._wont_help_you
http://www.spartanicus.utvinternet.i...s_help_you.htm

--
Spartanicus

[Adam Risser]

You cannont set the width of the second span because it is an inline
element. That's not valid.

Also, if the first span is block, then why not make it a div (which is
block automatically)?

Taking a guess at what you are trying to do... I would make the second
span a div (block element) and float it aside of what you want with a
set width.

Fix your code and post an example of your somewhere where everyone here
can look at it. Then we will be able to better help.

Adam

[ste.paoletti]

I'm sorry but I can't speeck and understand english very well.
All the xhtml code of my page came from an xml file with xsl
trasformation (<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="layout.xsl" type="text/xsl"?>.......).
I can obtain this xhtml code:
.....
<span>
<input type='radio' class='radio' />
<span>1</span> <!-- the number of choice-->
<span>some text</span> <!-- the content of choice-->
</span>
<input type='button' onclick='javascript code...;' />
.....
The radio-button, the number and the content should be in the same line
so I had set the display:inline property for theese elements.
when the button is clicked an arrow image( with click event for open a
new window with new content) should appears at the left of the
radio-button,in the same line, and the content of the line should not
move to the right when the image is visualized.
To do so it need to reserve a space for the image before the radio and
the rest of the line but I have some problems...

I tried in this way:
<span>
<span>
</span> <!--new span-->
<input type='radio' class='radio' />
<span>1</span> <!-- the number of choice-->
<span>some text</span> <!-- the content of choice-->
</span>
<input type='button' onclick='javascript code...;' />
when the button is pressed is created the onclick attribute for the new
span and is applied the background-image property (I can't use a anchor
tag with href attribute for js code because in this code I must have a
reference to the element that is clicked. With span and onclick
otherwise I can call a function in the way that follow:
"exampleFunction(this);".)
In this way the problem is that if the new span is display:inline the
content of the line(radio, number and content) move to the right when
the button is pressed( I can't use the width property), and if the new
span is display:block the conten of the line apperars in a new line.

How can I solve this prolem?
thanks