Footers and iFrames in HTML

garric · July 7, 2008, 7:29am

Hi All,

I have 2 questions:

I was coming up with a HTML page and wanted a footer to always be at the bottom of the page regardless of the size of the page that has been populated. How do I acheive this?
I was trying to build an iframe with the following tags
"<iframe id=\"iframe01\" name=\"iframe01\" height=480 width=800 frameborder=0 scrolling=no></iframe>". But my problem is that this appears differently on different browsers. Does anyone know the reason?

Thanks in advance

Regards,
Garric

cbkihong · July 7, 2008, 10:36am

Your question looks bizarre to me. Do you mean adding a statically-positioned "float" docked at the bottom of the browser window?

I can think of 3 ways:

a. Use a frame-based setup which essentially partitions the window into two panes split horizontally. This is old-fashioned, but most reliable IMO.

b. Use Javascript+DOM to position a floating div, by calculating the window size, capturing resize events to reposition the float, for example.

c. Use 'fixed' CSS positioning (position: fixed). Unfortunately, early IE (inc. v6) does not support that positioning scheme. v7 I believe only with strict (standards-compliant) mode.

Unfortunately both (b) and (c) are by far largely browser-dependent. Be prepared that solutions you find may work on some browsers but fail on the others.

There are a lot of related information you can search by keywords such as 'div bottom window' and the like. This is mostly an FAQ with Web development but needs some kind of searching.

Do you have screenshots to share, or describe how differently?

garric · July 7, 2008, 2:46pm

Actually both were related questions. As I mentioned earlier, I have created iframes with the above mentioned commands. While using IE 7 and Mozilla 3, the change in the width and length parameters are reflected. But when I try the same on IE, regardless of what the length and the breadth parameters are, the footer moves upto the point where the last text is found. Hope I did not confuse you

Regards,
garric

cbkihong · July 7, 2008, 9:52pm

Well, you did confuse me.

So, how did you actually put the footer. The HTML/JS/CSS please?

garric · July 8, 2008, 2:17am

Ok here is the code for the iframe and the footer and how it shows up in IE 7

"<iframe id=\"iframe01\" name=\"iframe01\" height=480 width=800 frameborder=0 scrolling=no></iframe>"

print $abc->div({ -style => 'background-color:#D6D6D6; padding: 0px 5px 0px 5px; font-family: Trebuchet MS; font-size=8pt; color: #0000FF'},
p({ -align=> "center"},
"� <script type=javascript>$footer</script>ABC\n"
)
);

<---------------- 800 ------------------------------>
****************************************** |

abc * |
abc * |
abc * |

* |

* |

* |

* |

* |

                                                                   *480

* |

* |

* |

     &lt;         Footer        &gt;                                 * |

****************************************** |

The same thing on IE 6 looks like this

<---------------- 800 ------------------------------>
****************************************** |

abc * |
abc * |
abc * |

      &lt;         Footer        &gt;                                * |

* |

* |

* |

* |

                                                                   *480

* |

* |

* |

* |

****************************************** |

I want the footer at the bottom even incase of IE6. I hope this made it clearer?

Regards,
garric

garric · July 8, 2008, 2:19am

On posting, all the spaces (formatting) was removed What I meant to imply with the asterix was the size of the screen 800X480 which is the iframe size.