Home/ Questions/Q 1020201
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T11:07:48+00:00

This is an html page : <html> <head> <title> Frame Set </title> <script type=text/javascript

  • 0

This is an html page :

<html>
<head>
<title>
Frame Set
</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="frame.css" type="text/css" media="screen" />

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
    var winSize = $(window).width();
    var margin = (winSize-1000)/2;;
    $('#main').css({'margin-left':margin,'margin-right':margin});  
    }
)
$(function() {
  $(".frame").each(function() {
     var width = ($(this).find('.h').width()), 
         height = $(this).find('.l').height(),
         pad = $(this).find('.h').position().left,
         actWidth = width + 10,
         nHeight = height - (height * 2),
         rLeftMargin = actWidth - 1,
         bWidth = actWidth;

    $(this).find('.r').css({'margin-top':nHeight, 'margin-left':rLeftMargin, 'height':height});
    $(this).find('.h').css({'height':25});
    $(this).find('.b').css({'width':bWidth, 'margin-top':0});
  });
});
</script>
</head>
<body>
<div id="main" align="center" style="width:1000px; height:100%; text-align:left;">
    <div id="inner1" style="width:100%; height:20%; float:top; margin-bottom: 20px;">
        <div id="inner11">
            <div class="frame">
                <div class="h" style="width:100%">Header</div>
                <div class="l" style="height:93%"></div>
                <div class="r"></div>
                <div class="b"></div>
            </div>
        </div>
    </div>
    <div id="inner2" style="width:100%; height:60%;">
        <div id="inner21" style="width:69%; float:left; margin-left: 1px; margin-right: 1px;">
            <div class="frame">
                <div class="h" style="width:100%">Left Frame</div>
                <div class="l" style="height:93%"></div>
                <div class="r"></div>
                <div class="b"></div>
            </div>
        </div>
        <div id="inner22" style="width:29%; float:right; margin-left: 1px; margin-right: 1px;">
            <div class="frame">
                <div class="h" style="width:100%">Right Frame</div>
                <div class="l" style="height:93%"></div>
                <div class="r"></div>
                <div class="b"></div>
            </div>
        </div>
    </div>
    <div id="inner3" style="width:100%; height:20%; float:bottom; margin: 2px 2px 2px 2px;">
        <div id="inner23">
            <div class="frame">
                <div class="h" style="width:100%">Footer</div>
                <div class="l" style="height:93%"></div>
                <div class="r"></div>
                <div class="b"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

This is Mozilla output :

alt text

This is IE8 output :

alt text

What is the problem ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    How to fix this page

    Let’s help you out here a bit…

    Use a Doctype

    See @Topera’s answer

    To make everything center aligned

    Please do not use

    var winSize = $(window).width();
var margin = (winSize-1000)/2;;
  $('#main').css({'margin-left':margin,'margin-right':margin});  
}

    Instead, use the CSS property margin: 0 auto. As a rule of thumb, always use a CSS solution instead of a Javascript where possible.

    To create equal height columns

    See:
    http://www.positioniseverything.net/articles/onetruelayout/equalheight
    http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

    Use the correct terminology and better class name

    To avoid confusion, please do not refer to non-frame elements as frames. For more about what frames are, see: http://reference.sitepoint.com/html/elements-frames-windows

    Give your classes meaningful names. The reason for this is the same for any other language – so that when you come back later three month later you won’t be scratching your head at classes named l, r and h.

    Use semantically valid HTML

    The align and text-align attributes are officially deprecated; please see the above solution on making things center aligned and the CSS property text-align property instead.

    HTML elements give meaning to the content they are wrapped in. The headers you have for each ‘frame’ should be marked up with <h2> or <h3> headings instead – while divs are generic block level elements with no meaning, the h1 to h6 set of elements (for want of a better word) tells the browser that the text contained in them are headings.

    CSS Box Model

    Please have a look at how the box model and floats work in CSS. bottom and top are not valid values for the CSS float property.

    http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/#cssboxmodels
    http://reference.sitepoint.com/css/boxmodel
    http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

    The Real Problem Here

    is not with the browsers. IE8 surprisingly misbehaves much less than its predecessors. Try writing better HTML and CSS instead.

    • 0