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

ste.paoletti@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

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

ste.paoletti@tiscali.it wrote:

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

http://diveintomark.org/archives/20...e_wont_help_you
http://www.spartanicus.utvinternet....us_help_you.htm

--
Spartanicus

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

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