On 7/30/05, Rich Points [EMAIL-REMOVED]> wrote:
> Thanks Jim,
> Your solution didn't work because of my absolutely positioned header.
> When I tried class="hideit" it hid the banner as you would expect but
> leaves an unwanted 140px gap at the top of the page. This is why I'm
> using the child selectors so I can 1) hide or show the banner and 2)
> position the elements accordingly. It would be easy if I was using
> relatively positioned elements :-(
> I have this working in FireFox but the trick is to get it working IE.
> This one has the banner off <body>
> Thia one has the banner on <body id="banner_top">
You may be working too hard on this. The primary reason I see for
using child selectors is if there might be other elements with the
same simple selector that would accidentally pick up the styles. For
example, in a nested-list dropdown navigation system, "#navigation>ul"
would define the styles for the tabs, while "#navigation ul" would
both the list for the tabs and the lists for the dropdowns.
In your situation, every item you are aiming for is uniquely
identified. It also appears that you are not depending upon exactly
where the id'ed elements are, merely that they are within one another.
Therefore, you should be able to replace the child selectors with
descendant selectors -- spaces -- and it should work the same in both
Firefox and IE.
You may want to simplify your CSS a bit as well and take advantage of
the fact that (1) a container whose display is set to none will not
show any of its contents, and (2) if properties conflict, the rule
with more id selectors win. So instead of:
You can remove the !important keywords and simplify this to
The fact that the last three rules are the only ones containing 2 id's
instead of one means that they will override any conflicting
properties. The !important keywords add a layer of complexity that is
not required here.
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/