http://www.perlmonks.org?node_id=145882


in reply to PerlMonks CSS Examples

/* For use with the Dark Theme */

body
{
        margin: 0px;
        font-family: sans-serif;
}

/* Fix iframe size/position */
iframe
{
        width: 472px;
        height: 64px;
        vertical-align: top;
}

pre, tt
{
        font-family: monospace;
}

a
{
        text-decoration: none;
}


a:hover, a:hover font[color]
{
        color: #333;
}

a:hover, a:hover img
{
        background-color: #0ff;
}

pre tt
/* pre > tt */
{
        display: block;
        color: #8f0;
        background-color: #333;
        border-left: solid #888 5px;
        padding: 10px 10px 10px 15px;
        font-size: 85%;
        width: 93%;
        margin-right: 0px;
        margin-left: auto;
}

input[type="submit"],
        input[type="reset"],
        input[type="button"],
        input[type="text"],
        input[type="password"],
        input[type="checkbox"],
        input[type="radio"],
        select,
        textarea
{
        border: solid #333 1px;
}

input[type="submit"],
        input[type="reset"],
        input[type="button"],
        input[type="text"],
        input[type="password"],
        textarea
{
        margin: 3px;
        padding: 3px;
}

input:hover, textarea:hover, select:hover
{
        color: #ccc;
        background-color: #888;
}

input:focus, textarea:focus, select:focus
{
        color: #333;
        background-color: #ffa;
}

[download]

1 March 2002 update: made code more readable by making the font face yellower

5 April update: since I can now use this CSS in my on-site CSS without problems (no more bracket bug), I removed a comment indicating that I had this in an external stylesheet.

Replies are listed 'Best First'.
Re: Re: PerlMonks CSS Examples
by demerphq (Chancellor) on Apr 04, 2002 at 12:34 UTC
    This is really cool.

    But im curious, is it my browser that makes it ignore whitspace in pre blocks? All the code blocks are unindented. Im using Ie5.5... (Oh, just checked under ie6 as well, and it does the same thing too...)

    Yves / DeMerphq
    ---
    Writing a good benchmark isnt as easy as it might look.

[reply]
      I don't have any problems with whitespace with the above stylesheet (I use it every day, so I'd probably notice). You might try adding something like: 
      pre {
        white-space: pre;
}

      [download]
      I'm not sure whether that will fix things, but I don't see how it could hurt.
[reply]
[d/l]
        Unfortunately it didnt work, thanks though. Turns out it was the width setting. Once I commented it out everything returns to normal.

        Yves / DeMerphq
        ---
        Writing a good benchmark isnt as easy as it might look.

[reply]

In Section Code Catacombs