6 replies [Last post]
brewthatistrue
Offline
newbie
Last seen: 16 years 17 weeks ago
Timezone: GMT-8
Joined: 2004-08-04
Posts: 4
Points: 0

Hi,

I'm trying to display a child element of a hidden parent element.

Basically, I have 3 icons encapsulated in a parent element.
2 of them I don't want to display, 1 I do.
i've hidden the parent element and am trying to unhide only one of the child elements.
This is an attempt to to hide one parent, and unhide one child, rather than hide 2 children and unhide 1 child.

here is some simplified code (only one icon, instead of 3).

<html>
<head>
<title>css display test</title>
<style>
.dontshow {display: none;}
.showme { display: inline;}
</style>
</head>
<body>
   <div class="dontshow">
         <span class="showme"><img src="http://www.csscreator.com/css-forum/images/smiles/icon_lol.gif" /></span>
   </div>
</body>
</html>
I tried googling but wasn't really able to find anything on this topic.
http://www.quirksmode.org/css/display.html
http://www.zvon.org/xxl/css1Reference/Output/property_display.html
http://www.w3.org/TR/CSS1#display

Why do the specs say that the display is not inherited?
It seems inherited to me, and it seems that inheritance is more powerful than the lower-level styles (doesn't this violate the "cascading" concept?).

I also tried searching the forums.
The hidden elements topic was unhelpful except to get me thinking about visibility (css2) rather than display:none (css1), and this post looked interesting, but the point it made was not discussed further.

I tried the css2 variation with no impact.

<style>
.dontshow {visibility: visible;}
.showme {display: hidden;}
</style>
can anyone shed some light here?

thanks,

brew

j-ra
Offline
Regular
Topeka, KS
Last seen: 16 years 17 weeks ago
Topeka, KS
Joined: 2004-08-02
Posts: 14
Points: 0

displaying a child element of a hidden parent

Why are you going through all that trouble?

If your going to dynamically show one icon, why not NOT show two icons?

i.e.

<div class="doesntmatter"> 
<span class="showme"><img src="icon_lol.gif" /></span> 
<span class="dontshow"><img src="icon_lol.gif" /></span> 
<span class="dontshow"><img src="icon_lol.gif" /></span> 
</div>

I guess I don't quiet understand what you're going after.

brewthatistrue
Offline
newbie
Last seen: 16 years 17 weeks ago
Timezone: GMT-8
Joined: 2004-08-04
Posts: 4
Points: 0

displaying a child element of a hidden parent

j-ra wrote:
Why are you going through all that trouble?
it's actually done by element, not with the span/class combo in the simplified code
(Partially simplified for me, since i'm a css newbie and dont' yet know all the fundamentals of css syntax/DOM hierarchy. Partially simplified in an effort to more efficiently communicate my request without a deluge of code).

i have three stylesheets.
in two, the parent div is displayed.
in one, the parent div is hidden, but i want a single subelement to show.

i could just rewrite the html so that i can use your method (which bypasses the parent business altogether since no encapsulating element is used).

even if i were to do that, i am still curious about this inheritance business though.
i thought that a more specific child overrode parent settings (e.g. green body is overridden by red paragraph).
the css specs as i understand them, say that display is not inherited. am i misreading them? if not, then why can't i get this to work?

also, if it is possible to override a parent-level setting, then i only have to edit one stylesheet instead of editing the html and all stylesheets.

j-ra wrote:
If your going to dynamically show one icon, why not NOT show two icons?
hmm, what do you mean dynamic? it is a dynamic site, but my question persists even if it's static html with alternate stylesheets.
j-ra wrote:
I guess I don't quiet understand what you're going after.
please let me know if i'm still unclear. ask targeted questions and i will do my best to answer them.

j-ra
Offline
Regular
Topeka, KS
Last seen: 16 years 17 weeks ago
Topeka, KS
Joined: 2004-08-02
Posts: 14
Points: 0

displaying a child element of a hidden parent

From my understanding (which is limited) you cannot show a child of something if it's parent isn't visible. The box model has already ignored the hidden div and therefore can't show any of it's children.

I apologize if you considered my post an attack. I was simply attempting to come up with an alternate way to accomplish what you were seeking.

brewthatistrue
Offline
newbie
Last seen: 16 years 17 weeks ago
Timezone: GMT-8
Joined: 2004-08-04
Posts: 4
Points: 0

displaying a child element of a hidden parent

j-ra wrote:
From my understanding (which is limited) you cannot show a child of something if it's parent isn't visible. The box model has already ignored the hidden div and therefore can't show any of it's children.
hmm, that seems to be the case.
it doesn't make sense though.
why do the specs say that display is not inherited then?
anyone?

j-ra wrote:
I apologize if you considered my post an attack. I was simply attempting to come up with an alternate way to accomplish what you were seeking.
not at all. thanks for your replies.
i'm here to learn, and i'm learning.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 45 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

displaying a child element of a hidden parent

Can't be done using display:none; display:inline; but can be done using visibility:invisible; and visibility:visible;

<html>
<head>
<title>css display test</title>
<style>
.dontshow {visibility:hidden;}
.showme {visibility:visible;}
</style>
</head>
<body>
   <div class="dontshow">
    <img class="showme" src="http://www.csscreator.com/css-forum/images/smiles/icon_lol.gif" />
	<img src="http://www.csscreator.com/css-forum/images/smiles/icon_lol.gif" />
	<img src="http://www.csscreator.com/css-forum/images/smiles/icon_lol.gif" />
   </div>
</body>
</html>

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

brewthatistrue
Offline
newbie
Last seen: 16 years 17 weeks ago
Timezone: GMT-8
Joined: 2004-08-04
Posts: 4
Points: 0

Re: displaying a child element of a hidden parent

brewthatistrue wrote:
<style>
.dontshow {visibility: visible;}
.showme {display: hidden;}
</style>
somehow i made an obvious mistake here.

Stu wrote:
Can't be done using display:none; display:inline; but can be done using visibility:invisible; and visibility:visible;
was i reading the specs wrong when they say display is not inherited?

perhaps i just don't understand the mox model properly? in which case, i've gotten great answers.

in any case, thanks guys.