captsig
01-22-2010, 09:43 AM
Greetings valued colleagues,
deep into a project I can't get the behavior of FF an IE to match(surprise,surprise!!). After stripping out everything, I have narrowed the problem down to how they are rendering the following div.s and associated css. IE is doing what I want, putting the foot on the bottom, with the text in the foot left justified. Why is FF 1)putting the foot at the top of the page and 2)centering the text (as if the side panel is overlapping on top of the foot thus forcing the text to the right). Here is the code:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#main_content{
background-color:#FFFF99;
position:relative;
top:0px;
width:800px;
height:1000px;
z-index:0;
}
#side_panel {
background-color:#a1ece1;
position:relative;
float:left;
top:50px;
left:0px;
width:250px;
height:925px;
z-index:0;
margin:0px;
border: thin solid #FF3333;
}
#other_stuff{
position:relative;
float:right;
width:470px;
height:900px;
padding-top:0px;
border: thin solid #3300CC;
}
#foot {
background-color:#a07357;
position:relative;
top:0px;
left:0px;
width:800px;
height:55px;
color:#FFFFFF;
font-size:16px;
z-index:0;
border: thin solid #00FF66;
padding:0px;
}
</style>
</head>
<body>
<div id="main_content">
<div id="other_stuff"></div>
<div id="side_panel"></div>
<div id="foot">Here is some content</div>
</div><!--end main_content-->
</body>
</html>
Any suggestions would advance my education.
captsig
deep into a project I can't get the behavior of FF an IE to match(surprise,surprise!!). After stripping out everything, I have narrowed the problem down to how they are rendering the following div.s and associated css. IE is doing what I want, putting the foot on the bottom, with the text in the foot left justified. Why is FF 1)putting the foot at the top of the page and 2)centering the text (as if the side panel is overlapping on top of the foot thus forcing the text to the right). Here is the code:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#main_content{
background-color:#FFFF99;
position:relative;
top:0px;
width:800px;
height:1000px;
z-index:0;
}
#side_panel {
background-color:#a1ece1;
position:relative;
float:left;
top:50px;
left:0px;
width:250px;
height:925px;
z-index:0;
margin:0px;
border: thin solid #FF3333;
}
#other_stuff{
position:relative;
float:right;
width:470px;
height:900px;
padding-top:0px;
border: thin solid #3300CC;
}
#foot {
background-color:#a07357;
position:relative;
top:0px;
left:0px;
width:800px;
height:55px;
color:#FFFFFF;
font-size:16px;
z-index:0;
border: thin solid #00FF66;
padding:0px;
}
</style>
</head>
<body>
<div id="main_content">
<div id="other_stuff"></div>
<div id="side_panel"></div>
<div id="foot">Here is some content</div>
</div><!--end main_content-->
</body>
</html>
Any suggestions would advance my education.
captsig