18

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 ?

Improve this question
11
  • 101
    Welcome to the world of Web Development Commented Aug 20, 2010 at 12:43
  • 10
    IE! IE! IE Ftagn! Commented Aug 20, 2010 at 12:44
  • 3
    Sigh... it's render, not output. And stop it with the punctuations already. Commented Aug 20, 2010 at 12:44
  • 10
    Wait till you test on IE6! Commented Aug 20, 2010 at 13:36
  • 9
    @Sarang - I've made some improvements to the spelling and grammar in your question. I see I was the 4th person to do this. Any particular reason that you are persisting in rolling back these corrections? Just to point out the bit in the FAQ If you are not comfortable with the idea of your questions and answers being edited by other trusted users, this may not be the site for you. Commented Aug 21, 2010 at 18:35

5 Answers 5

Reset to default
111

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

25

You miss the tag <!DOCTYPE>, in the first line of page.

Ex:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

If you don't put it, IE will activate quirks mode, and very strange things will happen. When a browser activate quirks mode, many things change, as box model.

NOTE: many browsers has quirks mode, not only IE (I know that firefox has too).

More about quirks mode.

List of doctypes.

Improve this answer

2 Comments

I have used strict,loose as well as trasitional.
@Sarang: Doctype makes the browser render the page as accurately as it can as that type of document. If it makes things "small", that's because they're written as small things.
19

The problem is that not all browsers use the same rendering engine or rendering rules. This is a constant source of grief for web developers, and it's not something that seems to be going away anytime soon.

Make use of CSS whenever possible, as browsers tend to comply best when under strict stylesheet rules. Beyond that, good luck and welcome to web dev :)

Improve this answer

Comments

6

  1. use a doctype: list at the moment i would use -> XHTML 1.0 Strict, XHTML 1.1, HTML5 (do not if you are not familier with the problems that could occur

  2. use a reset: eric meyers reset for xample is a good one

  3. use a clearfix (and know when to use it) for example the new clearfix by Jeff Starr

using this three things, its a good start to let your website look the same in all browsers. after that you must learn about custom browser bugs, like double margin bug and so on.

Improve this answer

1 Comment

+1 for mentioning using a reset - you don't know if you're dealing with browser quirks until the playing field is level.
2

To be cross browser you need several tools, a lot of experience, and, in case of IE, a lot of luck. In addition to the other answers here, you can use Yahoo CSS which give you a common base (all browsers don't have the same default values): http://developer.yahoo.com/yui/reset/

Improve this answer

Comments