How to omit or over ride a span element

[samvb]

I have a round [ all corners] with the following CSS code which i downloaded from the inet:

div#container {    
            color: black; display:block;
            background: #fff url(sifakaptl.gif) top left no-repeat;
 
        }
 
        div#container  span {
            display: block; /* sets all spans inside p to block, so only need this once */
            background: url(sifakaptr.gif) top right no-repeat;
        }
 
        div#container  span span {
            background: url(sifakapbr.gif) bottom right no-repeat;
        }
 
        div#container  span span span {
            padding: 1em;
            height: 0; /* fixes a padding bug in IE */
            background: url(sifakapbl.gif) bottom left no-repeat;
        }
 
        div#container  span span > span {
            height: auto; /* sets the height back to auto for all other browsers */
        }
 
 

It works fine with the following html code, the div is entirely rounded in four corners:

<div id="container">
<span><span><span>
web page content goes here
</span></span></span>
</div>
 

Now, the problem is if a span element is found in the Content page, the css code defined for the round element takes effect. I hope i am clear [i am not native english speaker] but i hope you get the idea. how do i solve this issue?

[drhowarddrfine]

You don't show anything for the Content page so it's a guess. I was just reading how the > selector can sometimes be interpreted to affect nearby elements but I don't recall what it was.

Does this happen in all browsers? You could just use border-radius for the rounded corners and problem solved but it only works in modern browsers and not IE.

[samvb]

Yes, it happens in all browsers. is there anyway i can give the span a unique id so that the css styles wouldn't affect any other CSS. and i even removed the line with > selector but nothing changed.

[drhowarddrfine]

<span id="your_id">

Then, in your css:

#your_id{
your css
}