MXimize by Carlos Gallupa, thoughts about and experiments with coldfusion, css, sql, components and javascript

Simple Standard CSS

Just add to your stylesheet and enjoy the simple enhancements..

::selection {background:#c3effd;color:#000;} /* Safari & Opera */
::-moz-selection {background:#c3effd;color:#000;} /* Firefox */

input, textarea, select {-moz-border-radius:4px;-webkit-border-radius:4px;}

Furthermore, check davidwalsh.name for other things I just didn't use yet ;)

2211 viewed | Your opinion...  | del.icio.us | Digg it | Michiel @ 14:16 cet

Adding a print stylesheet to your website

I decided to add a nice print stylesheet to mximize.com so that if you would like to print a page you can without any hassle.. just click on the print button in your browser. To get this to work nicely I read the "going to print" article on A List Apart. Below is the result of the stylesheet. It will display only the article you are viewing and not all the stuff that isn't important, like the menu, images, form, ads etc etc... A quick and really simple way to make your webpage even more friendly for your viewers. To test you could click on the "print preview" button in your browser.


body,code {     font-family:verdana,arial,sans-serif;
    background: white;
    font-size: 12pt;
}
code {
    font-family:courier new;
    font-size:80%
}

#head,#menu,#google-line,.ad1,#extra,.details,form    {
    display:none
}

#content a:link:after, #content a:visited:after {
    content: " (" attr(href) ") ";
    font-size: 90%;
}

#content a[href^="/"]:after {
    content: " (http://www.mximize.com" attr(href) ") ";
}

To let the browser see the stylesheet just put the following code in your browser

<link rel="stylesheet" type="text/css" href="/print.css" media="print" />

9152 viewed | 2 opinion(s)  | del.icio.us | Digg it | Tjarko @ 16:10 cet

Loading your print stylesheet

Interesting article about loading stylesheets you are not using for the page displayed. For instance, loading print stylesheets.

I always wondered; when you set up your stylesheet in an orderly way, your print stylesheet doesn't have to be more than just setting some divs to

.not-used-in-print { display:none; }

Am I right?

4834 viewed | 4 opinion(s)  | del.icio.us | Digg it | Michiel @ 8:27 cet

PNG transparancy images in IE with CSS

Yes.. it can be done!! and so simple.... it's hard to believe that it works. Look at the code below to show your tranparant PNG also in Internet Explorer.

.pngholder{
                width:100px;
                height:100px;
                filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagelocation');
}

.pngalpha {
                filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
                background:url(imagelocation) no-repeat;
                width:100px;
                height:100px;
}

<!--- And this is your code to implement the image --->
<div class="pngholder"><div class="pngalpha"></div></div>

A PNG image is much nicer with transparancy then a GIF image. I needed this on a site for an advertising company that had a really nice logo on a random background. The GIF image was crap but the PNG was really good!! so I used the PNG to discover that transparancy didn't work in IE.... at least until my CSS guru came with the above solution.

16070 viewed | 9 opinion(s)  | del.icio.us | Digg it | Tjarko @ 16:47 cet