Turns out (as it so often does) that although that's what you're
*trying*, it's not really your *goal*.
[...]
For any more detail, please post a URL to your example. It's
impractical to debug partial fragments.
Please find sample code at
http://dario.dreamhosters.com/
you see a list with events:
Ah! "A list with events." So mark it up like that. Something like:
<ul>
<li>Event One</li>
<li>Event Two</li>
I want to hide the vote span and show the
indicator id span when the users votes (A or V).
But you can't validly have more than one occurrance of an id on a page.
To make sure that the
row soesn't change size I have made a span (vote_section) that
contains the vote and indicator. Gicing it a min-width makes sure the
row width doesn't collapse when I hide the vote span.
How about markup like this:
<ul>
<li id="event1">
<span class="indicator">show indicator</span>
<span class="vote">A V</span>Title of event 1
</li>
<li id="event2">
<span class="indicator">show indicator</span>
<span class="vote">A V</span>Title of event 2
</li>
<li id="event3">
<span class="indicator">show indicator</span>
<span class="vote">A V</span>Title of event 3
</li>
</ul>
with CSS like this:
body {color:black; background-color:white;}
ul { list-style:none; margin-left:0; padding-left:0; }
..indicator { display:inline; background-color:yellow; }
..vote { margin-left:.5em; margin-right:1em; }
#event2 .indicator { visibility:hidden; }
You won't want to keep the yellow, and you will want to adjust the
margins for the .vote class to simulate your 150px. Be sure to check my
code for valisity and test in multiple browsers (I'm in FF).
Notice that instead of the display property, I used Visibility:
http://www.w3.org/TR/CSS21/visufx.html#visibility
I don't know what to recommend about your
background-image:images/ajax.gif because I don't know what its effect is
supposed to be.
HTH.