TedPride has asked for the wisdom of the Perl Monks concerning the following question:

Disclaimer: The following is not a Perl-specific question. I'd post it on an off-topic board if there was one.

How does one hide the contents of a DIV from incompatible browsers? I''m trying to do the usual pulldown menu sort of thing, but on browsers that don't support CSS, the menu chunks end up all over the bottom of the page instead of being invisible. I imagine I could use stylesheet includes to solve the problem, but I'm not a big fan of browser-side includes, since if the secondary file(s) happen to be outside of the x number of files the browser can load at once, or if the server lags on the request, the entire page has to wait to load.

Basically, I'd like either a way to comment out the contents of the DIV for imcompatible browsers, or suggestions on the best way to go about including or not including the DIV using server-side methods.

  • Comment on (OT) How to hide DIV contents from incompatible browsers?

Replies are listed 'Best First'.
Re: (OT) How to hide DIV contents from incompatible browsers?
by jhourcle (Prior) on May 05, 2005 at 21:22 UTC

    I'd suggest looking for best practices from a more web-design focused website.

    As an alternative to being invisible, you might take a look at having them be displayed as a list, so non-css aware browsers can still make use of them.

    I highly suggest A List Apart to look for good ways to find how to do various web design tricks. If you can deal with the amount of mail, you might also try the mailing list css-discuss

Re: (OT) How to hide DIV contents from incompatible browsers?
by shemp (Deacon) on May 05, 2005 at 22:33 UTC
    Well, on the server side, you'd detect what browser is being used, and decide whether or not to display the div, yes?
    If you dont want to use style sheets at all for this, and you know there are no comment tags within the DIV, you could comment around the DIV in your cgi, such as:
    <!-- <DIV> whatever is in here </DIV> -->
    Alternately, you could directly put into the DIV
    <DIV STYLe='display: none;'>

      If the browser doesn't support CSS, then it's going to ignore the order not to display, and it's going to show up.

      If you're going to go to the trouble of doing server-side browser detection (which I _really_ _really_ don't recommend, it's better to degrade gracefully than to intentionally give them lower quality because of some string that they send you), then you could just not send the block, rather than embedding it in a comment.

      And as odd as this sounds -- if a browser correctly parses SGML comments, then <!-- <!-- blah --> --> will not show anything through to the user. (as when there's a '--' within a comment declaration, it's not supposed to end when it sees the close. It's only supposed to close if there's a even number of '--' pairs. (unfortunately, most people don't know this rule, and do things like use 'i--' in javascript), so browsers tend to incorrectly parse SGML comments intentionally.)