Wed, 2009-07-01 04:34
Hi Experts,
What I am trying to do here is I have outer box with Fixed height. And I want to place a box Inside which can fit in to it without spacifying height of the box.
It apperas nice in IE 8.0 but not in Firefox. I dont know which one is correct. Can someone help me to correct Styelsheet so it show same behaviour in both IE and Firefox.
HTML File:
----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <link type="text/css" rel="stylesheet" href="test1.css" /> </HEAD> <BODY> <div id="outerBox"> <div id="innerBox"> <p>The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding. On this page, you'll find W3C news, links to W3C technologies and ways to get involved. New visitors can find help in Finding Your Way at W3C. We encourage organizations to learn more about W3C and about W3C Membership.</p> </div> </div> </BODY> </HTML>
CSS File
--------
#outerBox { height: 300px; background: blue; } #innerBox { color: white; margin: 20px; padding: 10px; height: 100%; border: 2px solid black; }
Fri, 2009-07-03 21:15
#1
Internet Exploder
It is probably IE that is again not adopting standards.
The default value for the CSS overflow attribute is "visible". This means that if you fix one of the dimensions of a parent as you have down with your outerbox, then standards compliant behaviour means the innerbox content will not force the parent to grow in size but to spill over; this is what you see happening in Firefox, but not in IE. No surprise there then.
To see the effect of changing the default overflow value, add overflow:auto; or overflow:hidden; to your outer box and you should then see Firefox and IE pretty much doing the same thing.
Regards