My Monkey Do

A Log of Coding Solutions

html

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>

Firefox Table Row Height

by

Problem

In Firefox and Chrome, having a table with an image of height 1 causes the row height to be 6px.   Code as shown below:

 

<table height=”1″>
<tr>
<td><img src=”images/spacer.gif” width=”170″ height=”1″ alt=””></td>
<td><img src=”images/spacer.gif” width=”163″ height=”1″ alt=””></td>
<td><img src=”images/spacer.gif” width=”334″ height=”1″ alt=””></td>
<td><img src=”images/spacer.gif” width=”153″ height=”1″ alt=””></td>
<td><img src=”images/spacer.gif” width=”180″ height=”1″ alt=””></td>
</tr>
</table>

 

Solution

After setting all styles that I could think of (padding, margin, height, vertical-alignment, line-height) and every element to have a height attribute of 1, nothing worked.  Turns out all that is needed is a “display:block” for the img element:

<table height=”1″>
<tr>
<td><img style=”display:block;” src=”images/spacer.gif” width=”170″ height=”1″ alt=””></td>
<td><img style=”display:block;” src=”images/spacer.gif” width=”163″ height=”1″ alt=””></td>
<td><img style=”display:block;” src=”images/spacer.gif” width=”334″ height=”1″ alt=””></td>
<td><img style=”display:block;” src=”images/spacer.gif” width=”153″ height=”1″ alt=””></td>
<td><img style=”display:block;” src=”images/spacer.gif” width=”180″ height=”1″ alt=””></td>
</tr>
</table>

keywords: firefox table height 6
source:  http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084464.html

Convert Mac dfont files to TTF format

by

Windows only accepts TTF font files while Mac format’s their font into Dfont format.  This tool by Peter Upfold lets you convert those beautiful Mac fonts into windows format.  Then with your TTF fonts you can upload them to http://www.font2web.com/ or http://onlinefontconverter.com and make web fonts!

http://peter.upfold.org.uk/blog/2008/03/11/dfontsplitter-convert-dfont-files-to-ttf/

What to do about PostScript type files?

Say you thought you had a dfont file, dragged the file into the tool above and got an error saying it’s not the right format.  Well, Looking more into the file you’ll probably find that you have a PostScript Type 1 file.

What I did was go to http://www.adobe.com/type/opentype/Type1-2-OpenType.pdf and find the OpenType format of the font you want to convert.  Then go to somewhere like http://www.fontpalace.com/.  There you can download your font in OTF format and it can be used everywhere.

Images not showing in my browser

by

Problem

I created a site with temporary ad images.  It shows fine in chrome, firefox, safari, internet explorer (it’s a miracle) on pc, but some images do not show on chrome for mac.  What’s wrong?

 

Solution

Some things to try:

  • View just the image in the browser.  If it shows skip past this list.
  • Make sure your css/html is correct.
  • Make sure if you are using float the image didn’t just go to the next line behind some other element.
  • Try make an html page with just one image.

If all that fails, try and rename the image.  Yes, rename the image.  It worked for me.  A simple rename of temp_ad_728x90.png to something.png worked.  My ad blocker (which i only had in mac chrome) apparently blocked the image from showing because of it’s name.  What a waste of time.

 

 

apos in IE – no work!

by

There is nothing so irritating as somebody with less intelligence and more sense than we have

– Don Herold

Problem

Microsoft Internet Explorer is displaying &apos; while other browsers are displaying a single quote.

Solution

IE has apparently decided to follow standards on this rule, but once again didn’t follow the crowd.  &apos; is not in the HTML 4 standards.  So instead use '.

 

Source: http://nedbatchelder.com/blog/200703/random_html_factoid_no_apos.html
search terms used:  ie &apos;


Blank Images

by

Problem:

When using Canvas and making a image appear with a grayscale when loading, the images sometimes do not display.

Solution:

Use “onload” html attribute to change the image source after it gets a chance to load.