jjshell
08-18-2005, 09:27 AM
hello :)
my centrecontent div is not expanding in mozilla. Does anyone know why? I used the height:auto trick for mozilla though... I would be so grateful of someone could shed some lights. :)
css (styles.css):
/* mac hide\*/
/*CHECK IF 100% all the TIME*/
html, body {height:100%}
/* end hide */
html,body {
padding:0;
margin:0;
}
body{
text-align:center;
min-width:750px;/* for mozilla*/
background-color: #E2EBED;
color: #333 ;
}
#outer{
height:500px;
min-height:500px;
width:750px;
background-color: #fff;
text-align:left;
margin:auto;
position:relative;
}
html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
#header{
position:absolute;
margin-top:10px;
background: url("images/logo.png") center center no-repeat;
top:0;
left:0;
width:750px;
height:170px;
background-color:#fff;
overflow:hidden;
color: #333;
z-index:100;
}
#centrecontent{
width:540px;
float:right;
padding-top:190px;
}
html>body #centrecontent{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
#left {
position:relative;/*ie needs this to show float */
width:210;
float:left;
padding-top:190px;
}
div,p {margin-top:0}/*clear top margin for mozilla*/
html >body #minHeight{float:left;width:0px;height:100%;margin-bottom:-0px;} /*safari wrapper */
html:
<!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>
<title>
coprodega, layout demo
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="styles.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="minHeight"></div>
<div id="outer">
<div id="centrecontent">
<h1>
title
</h1>
<p>
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
</p>
<h1>
title
</h1>
<p>
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
</p>
<h1>
title
</h1>
<p>
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
</p>
</div><!-- end centercontent -->
<div id="left">
<ul>
<li>
<a href="#">Initio</a>
</li>
<li>
<a href="#">Cursos</a>
</li>
<li>
<a href="#">Documentacion</a>
</li>
<li>
<a href="#">Organizacion</a>
</li>
<li>
<a href="#">Servicios</a>
</li>
</ul>
</div><!-- end left -->
<div id="header">
</div><!-- end header -->
</div><!-- end outer -->
</body>
</html>
my centrecontent div is not expanding in mozilla. Does anyone know why? I used the height:auto trick for mozilla though... I would be so grateful of someone could shed some lights. :)
css (styles.css):
/* mac hide\*/
/*CHECK IF 100% all the TIME*/
html, body {height:100%}
/* end hide */
html,body {
padding:0;
margin:0;
}
body{
text-align:center;
min-width:750px;/* for mozilla*/
background-color: #E2EBED;
color: #333 ;
}
#outer{
height:500px;
min-height:500px;
width:750px;
background-color: #fff;
text-align:left;
margin:auto;
position:relative;
}
html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
#header{
position:absolute;
margin-top:10px;
background: url("images/logo.png") center center no-repeat;
top:0;
left:0;
width:750px;
height:170px;
background-color:#fff;
overflow:hidden;
color: #333;
z-index:100;
}
#centrecontent{
width:540px;
float:right;
padding-top:190px;
}
html>body #centrecontent{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
#left {
position:relative;/*ie needs this to show float */
width:210;
float:left;
padding-top:190px;
}
div,p {margin-top:0}/*clear top margin for mozilla*/
html >body #minHeight{float:left;width:0px;height:100%;margin-bottom:-0px;} /*safari wrapper */
html:
<!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>
<title>
coprodega, layout demo
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="styles.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="minHeight"></div>
<div id="outer">
<div id="centrecontent">
<h1>
title
</h1>
<p>
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
</p>
<h1>
title
</h1>
<p>
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
</p>
<h1>
title
</h1>
<p>
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
some textsome textsome textsome textsome textsome textsome textsome textsome text
</p>
</div><!-- end centercontent -->
<div id="left">
<ul>
<li>
<a href="#">Initio</a>
</li>
<li>
<a href="#">Cursos</a>
</li>
<li>
<a href="#">Documentacion</a>
</li>
<li>
<a href="#">Organizacion</a>
</li>
<li>
<a href="#">Servicios</a>
</li>
</ul>
</div><!-- end left -->
<div id="header">
</div><!-- end header -->
</div><!-- end outer -->
</body>
</html>