16 replies [Last post]
simbala
Offline
Enthusiast
Last seen: 14 years 26 weeks ago
Timezone: GMT-5
Joined: 2006-04-20
Posts: 54
Points: 0

I am having difficulty accessing the span element in my CSS. I want to hide out a span element this way:

display span[id="<myid>"]{dispaly:none;}

Do you have any comments on this approach?

Thanks.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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; }

simbala
Offline
Enthusiast
Last seen: 14 years 26 weeks ago
Timezone: GMT-5
Joined: 2006-04-20
Posts: 54
Points: 0

Span Element

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.

jabberwocky
Offline
newbie
Last seen: 14 years 26 weeks ago
Joined: 2006-04-21
Posts: 8
Points: 0

Span Element

how about doing this;

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


simbala
Offline
Enthusiast
Last seen: 14 years 26 weeks ago
Timezone: GMT-5
Joined: 2006-04-20
Posts: 54
Points: 0

Span Element

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.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Span Element

simbala wrote:
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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

jabberwocky
Offline
newbie
Last seen: 14 years 26 weeks ago
Joined: 2006-04-21
Posts: 8
Points: 0

Span Element

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Span Element

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

simbala
Offline
Enthusiast
Last seen: 14 years 26 weeks ago
Timezone: GMT-5
Joined: 2006-04-20
Posts: 54
Points: 0

Span Element

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Span Element

Quote:
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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

simbala
Offline
Enthusiast
Last seen: 14 years 26 weeks ago
Timezone: GMT-5
Joined: 2006-04-20
Posts: 54
Points: 0

Span Element

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Span Element

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

simbala
Offline
Enthusiast
Last seen: 14 years 26 weeks ago
Timezone: GMT-5
Joined: 2006-04-20
Posts: 54
Points: 0

Span Element

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Span Element

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

simbala
Offline
Enthusiast
Last seen: 14 years 26 weeks ago
Timezone: GMT-5
Joined: 2006-04-20
Posts: 54
Points: 0

Span Element

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;}

simbala
Offline
Enthusiast
Last seen: 14 years 26 weeks ago
Timezone: GMT-5
Joined: 2006-04-20
Posts: 54
Points: 0

Span Element

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Span Element

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me