Div stretches properly in IE, not FF or other browsers

Discussion in 'CSS' started by dan.h, May 20, 2008.

0
  1. #1
    As you can see from the below screenshots, the container div does not apply the border & background correctly for whatever reason whilst in Firefox.

    In IE the background and border are applied correctly.

    IE
    [​IMG]

    FF
    [​IMG]

    Can anyone provide any pointers on how to solve this?

    Thanks.

    Here's the code (I can't post links yet)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body
{
background: #ccc;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #191919;
height: 100%;
}
#c
{
background: #fff;
border-left: 10px solid #a5cb7c;
border-right: 10px solid #a5cb7c;
margin: 0 auto;
width: 854px;
height: 100%;
}
#t
{
height: 178px;
}
#h
{
background: #fff;
height: 50px;
border-top: 10px solid #a5cb7c;
border-bottom: 10px solid #a5cb7c;
}
#n
{
float: right;
background: #f3ffe5;
width: 145px;
height: 100%;
border-left: 1px solid #a5cb7c;
border-bottom: 1px solid #a5cb7c;
padding: .5em;
}
#m
{
width: 655px;
float: left;
height: 100%;
padding: 10px;
}
</style>
</head>

<body>
<div id="c">

	<div id="t">
		logo
	</div>

	<div id="h">info bar</div>

	<div id="m">
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
		main content<br />
	</div>

	<div id="n">
		nav<br />
		nav<br />
		nav<br />
		nav<br />
		nav<br />
		nav<br />
		nav<br />
		nav<br />
		nav<br />
		nav<br />
	</div>

</div>

</body>
</html>
    Code (markup):
     
    dan.h, May 20, 2008 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    That IE encloses the float elements is an error. It shouldn't given the style rules. See enclosing float elements.

    cheers,

    gary
     
    kk5st, May 20, 2008 IP
  3. kesav

    kesav Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Problem with both html structure and CSS.. Here is the corrected file...

    set "padding-top:0" to #m to set the right navigation box in place
     
    kesav, May 20, 2008 IP
  4. dan.h

    dan.h Guest

    Messages:
    16
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks, that worked perfectly.
     
    dan.h, May 21, 2008 IP