Hello all,
I have finished writing the css for my site and call it using the @import method. Now I've nearly finished writing a second stylesheet that older browsers will use which is called using the <link href= <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/etc">http://www.webdeveloper.com/forum/archive/index.php/etc</a><!-- m -->. method.
When I've done this before I've omitted things from the old browser stylesheet using dispaly:none; in a span class with no problems. However now I need to make an entire list disappear and I can't get NS4.7 to cooperate. I've tried putting the list I want to disappear inside a span class which does work, but of course is not valid.
The html is:
<div id="bodypos">
<ul>
<li class="misc">
<ul>
<li class="boxes">
<ul>
<li class="box1"></li>
<li class="box2"></li>
<li class="box3"></li>
<li class="box4"></li>
<li class="box5"></li>
<li class="box6"></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
It looks like a lot of unecessary lists here but I have a few more lists on the same level as 'boxes' and some other lists on the same level as 'misc'. Don't worry it all works and validates.
So I want to make 'boxes' disappear but I can't in NS4.7.
I would expect the following to work, but it doesn't:
#bodypos li.misc li.boxes {
display:none;
}
Anyone know a way around this?
RWhy do you want to hide content from legacy browsers? Just create one lot of styles and import them, then if the styles are not supported let the default rendering of elements be used to convey the content instead.
For (<!-- m --><a class="postlink" href="http://www.fsg-uk.com/rjsystems/">http://www.fsg-uk.com/rjsystems/</a><!-- m -->) example (<!-- m --><a class="postlink" href="http://www11.brinkster.com/hackus/">http://www11.brinkster.com/hackus/</a><!-- m -->).Why do you want to hide content from legacy browsers?
There are links inside 'box1', 'box2', 'box3' etc. These links change the stylesheet (theme switcher) when viewed through modern browsers, but become redundant when viewed in 'legacy' browsers because there is no theme to switch. This is because this stylesheet is (also) used as a text substitute to the usual graphical one (for accessibility purposes). This text substitute cannot change themes as there are no graphics to change. Therefore I don't need these links to be displayed.
In every other case I am letting the 'legacy' browsers render the content by their default methods, but in this instance I simply don't want content that is useless/links that don't work - not good web developing.
I would appreciate any suggestions around this.
RAh, I get you now.
The problem is, you're trying to hide links using CSS, from a browser that doesn't support CSS (at least it doesn't support it very well, as you're finding out).
Perhaps it would be best to just describe the links as "style-switcher links" and explain that CSS is needed for them to be of use. Then using CSS you could hide the explanation that CSS is needed by positioning it off screen or something (don't use display:none; as that would make the text inaccessible to screnn-readers).I understand that it doesn't work to well with CSS, but I have mananged to do it in the past to eliminate useless content. I did this with simple text lines by putting a span around it and assigning it dispaly:none;. I 'borrowed' this off professionally established websites. However now my problem goes a bit higher in order to hide block elements.
I appreciate you suggestion lavalamp, but I've thought about how to leave the content in, but now I've decided that it would be easier to remove it. 'Easier' in a way that I don't know proper CSS for NS4.7 and would just like someone to tell me how to do it or tell me it cannot be done.
Cheers,
RI just wrote this and tested it in Netscape 4.79 and it hid it OK, there must be something else in your styles causing a conflict, (obviously not in the imported styles though).<ol style="display:none;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>Yeah I'd thought about that, but always believed that inline styling overided global styling. Therefore the now invisible blocks would remain invisible in the graphical version no matter what I put in the imported stylesheets. I never use inline styling so I may be wrong.
Cheers,
RI always try not to use inline styles as well, that was just an example. All I was getting at is that it is possible to hide a list in NN 4.7 by using display;none;
If that isn't working in your linked styles then there must be something else in your linked styles that is conflicting with the display:none; and is over-ruling it. Can you give a link to your page or upload it or something?NS 4.7 only partly supports "display: none" in that it will make the object invisible but it still takes up space in the document. It also has occasional problems with inline styles. It is best to use a stylesheet.
Also, there is a known bug in NS 4 with lists. You must assign the styles to the UL or OL tag. It will only change the list-style-type in styles on LI tag.Originally posted by gil davis
NS 4.7 only partly supports "display: none" in that it will make the object invisible but it still takes up space in the document. It also has occasional problems with inline styles. It is best to use a stylesheet.4.79 doesn't seem to have that problem.You must assign the styles to the UL or OL tag.
Yeah that's the key. I had been assigning it to the li.boxes whereas now I've stuck it on the <ul> inside it.
That residual space is so irritating though. But I'll let that one go as it doesn't look too bad. Just a bit spaced out.
Cheers guys,
ROriginally posted by lavalamp
4.79 doesn't seem to have that problem.
My experience was in JavaScript where you change the display property to none from block.
I have confirmed that "display: none" in CSS only does indeed collapse out of the document flow.
I have finished writing the css for my site and call it using the @import method. Now I've nearly finished writing a second stylesheet that older browsers will use which is called using the <link href= <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/etc">http://www.webdeveloper.com/forum/archive/index.php/etc</a><!-- m -->. method.
When I've done this before I've omitted things from the old browser stylesheet using dispaly:none; in a span class with no problems. However now I need to make an entire list disappear and I can't get NS4.7 to cooperate. I've tried putting the list I want to disappear inside a span class which does work, but of course is not valid.
The html is:
<div id="bodypos">
<ul>
<li class="misc">
<ul>
<li class="boxes">
<ul>
<li class="box1"></li>
<li class="box2"></li>
<li class="box3"></li>
<li class="box4"></li>
<li class="box5"></li>
<li class="box6"></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
It looks like a lot of unecessary lists here but I have a few more lists on the same level as 'boxes' and some other lists on the same level as 'misc'. Don't worry it all works and validates.
So I want to make 'boxes' disappear but I can't in NS4.7.
I would expect the following to work, but it doesn't:
#bodypos li.misc li.boxes {
display:none;
}
Anyone know a way around this?
RWhy do you want to hide content from legacy browsers? Just create one lot of styles and import them, then if the styles are not supported let the default rendering of elements be used to convey the content instead.
For (<!-- m --><a class="postlink" href="http://www.fsg-uk.com/rjsystems/">http://www.fsg-uk.com/rjsystems/</a><!-- m -->) example (<!-- m --><a class="postlink" href="http://www11.brinkster.com/hackus/">http://www11.brinkster.com/hackus/</a><!-- m -->).Why do you want to hide content from legacy browsers?
There are links inside 'box1', 'box2', 'box3' etc. These links change the stylesheet (theme switcher) when viewed through modern browsers, but become redundant when viewed in 'legacy' browsers because there is no theme to switch. This is because this stylesheet is (also) used as a text substitute to the usual graphical one (for accessibility purposes). This text substitute cannot change themes as there are no graphics to change. Therefore I don't need these links to be displayed.
In every other case I am letting the 'legacy' browsers render the content by their default methods, but in this instance I simply don't want content that is useless/links that don't work - not good web developing.
I would appreciate any suggestions around this.
RAh, I get you now.
The problem is, you're trying to hide links using CSS, from a browser that doesn't support CSS (at least it doesn't support it very well, as you're finding out).
Perhaps it would be best to just describe the links as "style-switcher links" and explain that CSS is needed for them to be of use. Then using CSS you could hide the explanation that CSS is needed by positioning it off screen or something (don't use display:none; as that would make the text inaccessible to screnn-readers).I understand that it doesn't work to well with CSS, but I have mananged to do it in the past to eliminate useless content. I did this with simple text lines by putting a span around it and assigning it dispaly:none;. I 'borrowed' this off professionally established websites. However now my problem goes a bit higher in order to hide block elements.
I appreciate you suggestion lavalamp, but I've thought about how to leave the content in, but now I've decided that it would be easier to remove it. 'Easier' in a way that I don't know proper CSS for NS4.7 and would just like someone to tell me how to do it or tell me it cannot be done.
Cheers,
RI just wrote this and tested it in Netscape 4.79 and it hid it OK, there must be something else in your styles causing a conflict, (obviously not in the imported styles though).<ol style="display:none;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>Yeah I'd thought about that, but always believed that inline styling overided global styling. Therefore the now invisible blocks would remain invisible in the graphical version no matter what I put in the imported stylesheets. I never use inline styling so I may be wrong.
Cheers,
RI always try not to use inline styles as well, that was just an example. All I was getting at is that it is possible to hide a list in NN 4.7 by using display;none;
If that isn't working in your linked styles then there must be something else in your linked styles that is conflicting with the display:none; and is over-ruling it. Can you give a link to your page or upload it or something?NS 4.7 only partly supports "display: none" in that it will make the object invisible but it still takes up space in the document. It also has occasional problems with inline styles. It is best to use a stylesheet.
Also, there is a known bug in NS 4 with lists. You must assign the styles to the UL or OL tag. It will only change the list-style-type in styles on LI tag.Originally posted by gil davis
NS 4.7 only partly supports "display: none" in that it will make the object invisible but it still takes up space in the document. It also has occasional problems with inline styles. It is best to use a stylesheet.4.79 doesn't seem to have that problem.You must assign the styles to the UL or OL tag.
Yeah that's the key. I had been assigning it to the li.boxes whereas now I've stuck it on the <ul> inside it.
That residual space is so irritating though. But I'll let that one go as it doesn't look too bad. Just a bit spaced out.
Cheers guys,
ROriginally posted by lavalamp
4.79 doesn't seem to have that problem.
My experience was in JavaScript where you change the display property to none from block.
I have confirmed that "display: none" in CSS only does indeed collapse out of the document flow.