My Monkey Do

A Log of Coding Solutions

css

Gray / Grey Scale images

by

It is now easier than ever to make an image greyscale in CSS.

[prettify class=”xml”]

<svg xmlns=”http://www.w3.org/2000/svg”>
<filter id=”grayscale”>
<feColorMatrix type=”matrix” values=”0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0″/>
</filter>
</svg>

[/prettify]

Then use this to make a greyscale:

[prettify class=”css”]

img {

filter: url(filters.svg#grayscale); /* Firefox 3.5+ */

filter: gray; /* IE6-9 */

-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */

}

[/prettify]

and then ungreyscale

[prettify class=”css”]

img:hover {

filter: none;

-webkit-filter: grayscale(0);

}

[/prettify]

 

Of course, i got this from stack overflow: http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

keywords: css grey scale

 

Firebug in Safari

by

Since Safari 3.x, you can now have a firebug-like tool in Safari.  Either open terminal and copy-paste the line below or edit the plist file here ~/Library/Preferences/com.apple.Safai.plist.

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Most websites stop there saying “you should now be able to right click and see the ‘Inspect Element’ in any contextual menu”.  Well, I didn’t.  I had to show the developer menu.  Here’s how to show the developer menu straight from Safari help:

open Safari preferences, click Advanced, and select “Show Develop menu in menu bar.”

Once you do that you should be able to see “Inspect Element” in the right click menu.

source: http://macdevelopertips.com/defaults/firebug-like-tools-in-safari.html
keywords:firebug safari

CSS Height 100%

by

Problem

I have a fixed footer and some content with a background.  The designer wants the content background to expand all the way to the bottom whether there’s a lot of content or no content at all.  This seemed relatively easy, just put height:100% in the content and all its parent containers.  That didn’t work, no changes whatsoever.  Another trial and failure was to use a absolute positioned element with height 100%.  Again that didn’t work.  That just made the element 100% of the current window size.  So if the content expanded more than the window height, the background would not show.

Solution

There are many, many solutions, hacks, tips, and tricks to making a footer stick to the bottom of page.  The basic elements to making a footer stick to the bottom of a page are:

  • Make sure html and body have a height of 100%.  I can’t stress this one enough.
  • Make your wrapper element have a min-height of 100%.
  • Make sure you have something to inside the wrapper to have it account for floating element.  (things like clear:both or the clearfix hack will work here)
  • Place your footer outside of the wrapper div and set a height to it.
  • Make sure you have a negative margin-bottom and an equal positive margin-bottom on your wrapper div to be able to show the footer.

The best solution with an example I have found on the web is:  

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Instead of using the push element you could just use a padding-bottom on the wrapper div though.

Another older solution, but still uses the same principles is:

http://www.electrictoolbox.com/html-css-footer/

——————————————————

Another solution where you don’t have to set the height of the footer is to use display:table.  This causes the element to act as a table and the height will truly be 100% of the page.  Simple enough, but what if you have your whole page all ready to go already and display:table screws up more than half your work.  Well, then you can put that element in a absolute positioned element at the bottom.  like so:

#main-container-bg {
position:absolute;
bottom:0;
left:50%;
margin-left:-500px;
width:1000px;
height:100%;
z-index:0;
}

#main-bg {
display:table;
height:100%;
background:#efebd7 url(../images/main-container-bg.png) repeat-y center center;
width:1000px;
}

<div id=”main-container-bg”><div id=”main-bg”></div></div>

IE and inline-block

by

Apparently IE 8 cannot change the display of a element to inline-block unless it natively is inline.  The fix is to trigger hasLayout on the element before trying to change it.  Below is a code snippet to get elements to behave properly in the annoying world of Internet Explorer.

display:inline-block;
zoom:1;
*display:inline;

source: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
keyword: ie 8 inline-block

CSS IE Printing A Lot of Blank Pages

by

Problem

One of the smaller pages on a wordpress site I was working on printed about 75 pages in Interent Explorer (73 of which were blank).  Both Firefox and Chrome printed the normal 1-2 pages.  Only the contact us page had this problem.

 

Solution

Luckily only the contact us page had this problem.  It uniquely had a google maps plugin (the Comprehensive Google Map Plugin).  This google map plugin is very useful and handy, but for printing it was causing the problem in IE.  The global-data-placeholder object that this plugin inserted had the top and left css style as “100000px !important”.  It had a height and width of 0 so it normally does not show.  I kind of remember IE having problems with 0 height and 0 width objects though.  Anyway, I simply made a print_styles.css and set that to not display.

#global-data-placeholder { display:none;}

 

source: http://blogs.unbolt.net/index.php/brinley/2011/07/23/ie-8-prints-page-with
keywords: css ie web page print lots of pages

Opacity in multiple browsers

by 

A collection of opacity syntax for multiple browsers.
.img_transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}


keywords: css opacity all browsers
source: http://www.naveenos.com/2011/07/css-opacity-in-all-browsers.html