Span Element

You want to hide the span from every browser besides IE?

IE doesn't support the attribute selector. You could, of course, use the id selector.

#myid {display: none; }

I want to hide out a span element that shows up in the html like this
:

<span id="form1:dataTable1:outputText1">Rows Shown: </span>

I tried using the id , but that doesnt work.Btw I am using IE/Win.

how about doing this;

<span id="form1:dataTable1:outputText1" style="display:none; ">Rows Shown: </span> 

I cant do that,coz I am hiding this out ionly for a printer friendly version of the page and not when the page is rendered to the screen.

"Printer Friendly" pages are silly (yes I know there are a whole lot of them out there but they are still silly). You just do two style sheets for the same page, one for screens and one for print media. If you've designed your page semanticly it is quite easy to do.

To put it another way, with proper design *every* page can be "printer friendly", at least within reason.

oh, ok if you have a 'print' css, cant you just assign a class to this span then? I'm guessing you allready have this defined for print, so

<style type="text/css" media="print">

.hide {display:none;}

</style>

while your normal css is media="screen". maybe that works? So, the class you give this span, wont affect your screen, only your printing.

Simbala when you ask a question it really helps to present all the criteria involved in the problem such as "for print" it will greatly speed up responses and help to solve the problem.

As jabberwocky says you can use the media attribute to feed different rules for print only, you could though possibly do away with the class declaration and style on descendent selectors if the spans are within specific elements you could also apply the print rules through the @media property from within the existing stylesheet:

 
@media print { 
  #ancestor #parent  p span { 
   display:none; 
  } 
} 

Hugo.

I apologize for the insufficient data provided.The last approach looks good, bu twhat if I have to hied out only one among several span elements that come under a single parent element.That is the scenario I am facing.I tried using the id fro the span element, but that wudnt work either.

It should do ? It's what I would have suggested trying to do. How did you construct the rules selectors compared to the markup nesting?

Hugo.

Below is the piece of markup from which I ahev to hide out the span element that encloses the text "Rows Shown". It is apparent that there are more then one span elements in side the table parent element.I want to hide out only one span element and let the others be displayed.As I have told you earlier,I tried using the id with the span element like this:

table thead tr th span[id="form1:dataTable1:outputText1"] {display:none;}

      <TABLE id=form1:dataTable1 title=Samples width=auto>
        <THEAD>
        <TR>
          <TH class=list-header scope=colgroup colSpan=9><SPAN 
            id=form1:dataTable1:groupPanel10 style="DISPLAY: block"><SPAN 
            class=nothing id=form1:dataTable1:groupPanel12><SPAN 
            id=form1:dataTable1:aPanel 
            style="CLEAR: left; DISPLAY: block; FLOAT: left">Samples (1 - 10 of 
            8460)</SPAN><SPAN id=form1:dataTable1:groupPanel11 
            style="DISPLAY: block; TEXT-ALIGN: right"><INPUT type=hidden 
            name=com_sun_rave_web_ui_appbase_renderer_CommandLinkRendererer><A 
            id=form1:dataTable1:linkAction1 
            onclick="document.forms['form1']['com_sun_rave_web_ui_appbase_renderer_CommandLinkRendererer'].value='form1:dataTable1:linkAction1';document.forms['form1'].submit(); return false;" 
            href="http://localhost:28080/EasyLink/#"><SPAN 
            id=form1:dataTable1:linkAction1Text1>View selected 
            item(s).</SPAN></A></SPAN></SPAN><SPAN 
            id=form1:dataTable1:groupPanel1 
            style="DISPLAY: block; LEFT: 5px; POSITION: absolute"><SPAN 
            id=form1:dataTable1:outputText1>Rows Shown: </SPAN>

Please let me know if my approach is wrong.

/edit, duplicate post deleted. [ code ] tags inserted. Its good to take a quick look at your post after posting to make sure it turns out right, or use the preview button. ... Chris..S

But that is the approach that you originally tried :? have you tried the other suggestions, maybe just using a plain id selector

table thead tr th span#form1:dataTable1:outputText1 {display:none;}

While you're about it you should quote your IDs and try and keep everything lower-case.

Hugo.

I tried that as well.Evn that doesnt work.I though I was missing the hierarchy and checked on that as well. I guess I can get around this problem enclosing the span element in a div, but then that will not be a good approach.Is there any other alternative.

Do you have control over the ID syntax? can you as an experiment change the ID to plain letters no colons and see if that works as Chris on another post dealing with class/ID syntax has queried whether in actual fact ':' colons are the problem in reference to the trouble you are having.

Hugo.

Quick question...in the even tof the id working..i dont have to span through the parents and get to the actual element to work with it ...right?....in other words...can just use :<id>{display:none;}

The id's for the span elements and infact the entire html is rendered automatically.I dont have any control on that.If you would like to have a look at the orignal JSP page,I can upload that as well.

Not really, I just thought having been given a clue as to the problem i.e "it's probably the colon in the string of the id that's the problem" you might have tested it for yourself to see if that was indeed the case!! instead I have confirmed it for you! that approach will fail the colon is not accepted in CSS so you will have to find another method to use , the @media display:none is still valid as the way to deal with print styles but you will need to find a different hook.

Hugo.