On 7/30/05, Rich Points <[EMAIL PROTECTED]> 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 :-(
<snip/> > I have this working in FireFox but the trick is to get it working IE. > > This one has the banner off <body> > http://gatewaygourmet.com/Test/index.htm > > Thia one has the banner on <body id="banner_top"> > http://gatewaygourmet.com/Test/seafood.htm Hi, Rich, 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[1], and (2) if properties conflict, the rule with more id selectors win[2]. So instead of: #banner_top_container{...} #banner_top>#container{...} #banner_top>#container>#header{...} #banner_top>#container>#header>#banner_top_container{...} You can remove the !important keywords and simplify this to #banner_top_container{...} #banner_top #container{...} #banner_top #header{...} #banner_top #banner_top_container{...} 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. HTH, Michael [1] http://www.w3.org/TR/CSS21/visuren.html#display-prop [2] http://www.w3.org/TR/CSS21/cascade.html#specificity ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
