Forum Moderators: open
I have a simple page that is formatted using CSS, but it doesn't look the way it is supposed to in netscape 4. What I want to do is have separate html code for netscape 4 (using tables, not positioned divs) upon a browser detection and hide the css positioned divs that are to be used by capable browsers. Therefore, the page will still look nice in netscape 4, but will utilize css and validate in css browsers.
In order to validate, the netscape 4 specific code will need to be in an external document. Can I do this with a variable?
Here's what I tried:
<script type="text/javascript">
if (document.layers)
document.write('<div style="display:none;">');
</script>
<div id="container">content</div>
<script type="text/javascript">
if (document.layers)
document.write('</div>');
</script>
It hides it just fine, but doesn't un-hide it so the whole page is blank after the javascript.
Help! : )
Your best bet is to take a stroll over to the CSS forum [webmasterworld.com]. Those folks have simple techniques on how to present NN4 with it's own style sheet.
In particular, check DrDoc's Making Style Sheets Work in NN4 [webmasterworld.com].
I think a browser doesn't bother to interpret anything whose style is "display:none;". If that's true, the browser wouldn't bother to read your second piece of Javascript.
If this is true, it will ignore the hardcoded div also because it is included in the same style as the javascript. It still doesn't work, so I'm assuming that's why...
I spend a lot of time over there, trust me! ;)
The only solution to my Netscape problem is serving it up in a table. I've put a lot of effort into getting my design table-less and validating so I don't want to undo all my work. The CSS works in Netscape for the most part, but there are some spacing issues that just can't be fixed without a table.
Yes, NN4 does not render anything that is set to display none (hence, you can't switch to display:block and expect it to reappear).
An alternative solution is to make the div absolutely positioned (to remove it from the flow) and use visibility:hidden instead.
Yes, the hardcoded closing div should work. However, it will cause the page not to validate (if that's important to you). Also, the orphaned closing div can cause layout problems if nested inside other divs.
If this is true, it will ignore the hardcoded div also because it is included in the same style as the javascript.
No, it shouldn't.. Try the same thing with getElementById in a modern version of Netscape to see what I mean. It should still be keeping count of closing and opened tags, it just shouldn't try to do anything with them until it's out of the element whose display is none.
Anyway, sorry for the bum advice. Would it be possible to just redirect NN4 users, since you're writing seperate content for them already?
<edit>seashell: It worked? I tried it in NN4 (belatedly..) and it didn't work for me. But hey, if you're happy, I'm happy. :)</edit>
seashell: It worked? I tried it in NN4 (belatedly..) and it didn't work for me.
I looked at it again and I found two extra </div>s and not just one (I was right the first time). Does it work for you if you add another one?
This breaks the validation more than I expected. And since I came up with this scheme to allow me to keep my validating code it kind of defeats the purpose.
I can't redirect them to another page because I intend to duplicate this to all pages when I get it perfected. Having an alternate for every page on my site isn't an option.
I'm using the following code to create the same top banner for NN4 (only this time using tables):
<script type="text/javascript">
if (document.layers)
{document.write("NN4 code");
}
</script>
All I need to do is hide the code that uses CSS (floats with margins which NN4 butchers) from NN4 so the banner doesn't repeat.
P.S. I'm not very good at absolute positioning. I'll tinker with it :0)
<script type="text/javascript">
if (document.layers)
document.write('<div style="position:absolute;visibility:hidden;">');
</script>
<div id="container">content</div>
<script type="text/javascript">
if (document.layers)
document.write('</div>');
</script>
That should do exactly what you want... but without any of the downsides that come with using display:none
divs galore!
#container {
display: none;
/*/*/
display: block;
/* End */
}
<div id="container">content</div>
<head>
<script>
<!--
if (window.sidebar) document.write('<link rel="stylesheet" href="netstyle.css" type="text\/css">')
else
if ((document.all) && (!window.sidebar) && (!window.opera)) document.write('<link rel="stylesheet" href="msiestyle.css" type="text\/css">')
else
if (document.layers)
document.write('<link rel="stylesheet" href="nn4style.css" type="text\/css">')
// -->
</script>
</head>
#container {
display: none;
/*/*/
display: block;
/* End */
}
Works like a dream and validates too! You guys always come through for me!
Thanks!
