View Full Version : CSS Frame vs HTML frames

12-13-2009, 05:31 AM
I read the pros and cons of both CSS Frames and HTML and decide that CSS was the best way to go, even though I really don't see that much of a promblem per say with HTML frames, but decide to go with the general public about it. So I got a CSS code off the net from http://www.dynamicdrive.com/style/layouts/category/C11/ and I decided to uses the following CSS

<style type="text/css">

margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130px; /*Height of frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;

position: fixed;
top: 130px; /*Set top value to HeightOfFrameDiv*/
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background: #fff;

margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/

* html body{ /*IE6 hack*/
padding: 130px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;


<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")



<div id="framecontent">
<div class="innertube">

<h1>CSS Top Frame Layout</h1>
<h3>Sample text here</h3>


<div id="maincontent">
<div class="innertube">

<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>

<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>


Here's my problem, I was able to remove the javascript in the main content page and put my content in, which had tables as a database. Here's a link to my page http://tdcj.homeip.net/ the problem I have is designing the header or "the top of the page". The only thing I can do is simple html images and text. I like to add hidden tables so that I can make image tabs and so on, can anyone help? Also I find the code complex to adjust the hieght, what looks great on my computer, doesn't seen so great one others. Matter of fact I went to a PHP class today to show some people my site and the top part of my site cut my images and text in half. So of you might see this some of you might now, but trust me, it happened. How do I get my site to look visble correct for everyone?

12-18-2009, 01:44 PM
...Matter of fact I went to a PHP class today to show some people my site and the top part of my site cut my images and text in half... As a start, you might like to fix this by changing back the heights within your <style> from 50px to 130px?

12-18-2009, 01:52 PM
Remove 'overflow:hidden' from #framecontent.

You also need to remove the comment from your first line because you're putting IE into 'quirks mode'.