Advertisement
I'm sorry, first off, that I don't have a site to post these live.
I'm having a problem with the content box not growing to include the content. Amazingly enough, it works in IE, but not in any other browser. if anyone has a suggestion for how this can work I would be eternally grateful. I've come a long way with CSS in the past year, but obviously not that far.
CSS:
body {
color: #FFFFF0;
background-color: #31699C;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: .9em;
text-align: left;
margin: 0;
padding: 0;
}
a {
color: #FFFFF0;
text-decoration: none;
}
a:hover {
color: #FFFFF0;
text-decoration: underline;
}
h1 {
font-size: 1.2em;
font-weight: bold;
line-height: 1.3em;
border-bottom: 1.5px solid #FFFFF0;
width: 100%;
}
h1 a {
background-image: url(../images/plus.gif);
background-repeat: no-repeat;
background-position: left;
text-decoration: none;
padding-left: 22px;
}
h1 a:hover {
background-image: url(../images/minus.gif);
background-repeat: no-repeat;
background-position: left;
text-decoration: none;
padding-left: 22px;
}
h2 {
font-size: 2em;
font-weight: bold;
padding: 0;
margin: 0;
}
p {
padding-top: 2px;
padding-left: 2px;
}
div.header {
margin: 40px 0 0 0;
clear: both;
font: Arial, sans-serif;
font-size: .9em;
height: 36px;
vertical-align: text-bottom;
}
div.frame {
position: inherit;
padding: 0;
width: 100%;
border-top: 3px solid #FFFFF0;
border-bottom: 3px solid #FFFFF0;
background-color: #A0BCD7;
height: 350px;
}
div.frame2 {
position: inherit;
padding: 0;
width: 100%;
border-top: 3px solid #FFFFF0;
border-bottom: 3px solid #FFFFF0;
background-color: #F8A35F;
height: 100%;
}
div.frame3 {
position: inherit;
padding: 0;
width: 100%;
border-top: 3px solid #FFFFF0;
border-bottom: 3px solid #FFFFF0;
background-color: #BFC585;
height: 500px;
}
div#content {
margin: 0 20% 0 15%;
padding: 0;
width: 750px;
min-height: 350px;
height: auto;
position: relative;
}
div#pic {
margin: 0;
padding: 0;
width: 350px;
height: 350px;
float: left;
}
div#pic img { display: block;}
div#bodytext {
width: 380px;
height: 350px;
overflow: visible;
float: right;
padding: 5px 10px 0 0;
margin: 0;
}
div.footer {
font-size: .9em;
font: Arial, sans-serif;
}
#left {
margin-left: 15%;
padding: 0;
position: relative;
clear: both;
vertical-align: text-bottom;
}
#right {
margin-right: 15%;
padding: 0;
float: right;
position: relative;
top: -15px;
display: inline;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DT...al.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Venture Vault</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="header">
<div id="left">
</div>
</div>
<div class="frame2">
<div id="content">
<div id="pic">
<img id="createProfile" src="images/profile.jpg" alt="createProfile" name="createProfile" />
</div>
<div id="bodytext">
<h1><a href="../index.html">Create Your Profile Now</a></h1>
<p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p>
<h1><a href="../entrepreneurs.html">For Our Entrepreneurs</a></h1>
<p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p>
<p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p><p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p><p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p>
</div>
</div>
</div>
<div class="footer">
<div id="left">a division of <a href="www.masterplans.com" target="_blank">Masterplans, Inc.</a></div>
<div id="right"><a href="../sitemap.php">site map</a> | <a href="../privacy.php">privacy policy</a> | © 2007</div>
</div>
</body>
</html>
I'm having a problem with the content box not growing to include the content. Amazingly enough, it works in IE, but not in any other browser. if anyone has a suggestion for how this can work I would be eternally grateful. I've come a long way with CSS in the past year, but obviously not that far.
CSS:
body {
color: #FFFFF0;
background-color: #31699C;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: .9em;
text-align: left;
margin: 0;
padding: 0;
}
a {
color: #FFFFF0;
text-decoration: none;
}
a:hover {
color: #FFFFF0;
text-decoration: underline;
}
h1 {
font-size: 1.2em;
font-weight: bold;
line-height: 1.3em;
border-bottom: 1.5px solid #FFFFF0;
width: 100%;
}
h1 a {
background-image: url(../images/plus.gif);
background-repeat: no-repeat;
background-position: left;
text-decoration: none;
padding-left: 22px;
}
h1 a:hover {
background-image: url(../images/minus.gif);
background-repeat: no-repeat;
background-position: left;
text-decoration: none;
padding-left: 22px;
}
h2 {
font-size: 2em;
font-weight: bold;
padding: 0;
margin: 0;
}
p {
padding-top: 2px;
padding-left: 2px;
}
div.header {
margin: 40px 0 0 0;
clear: both;
font: Arial, sans-serif;
font-size: .9em;
height: 36px;
vertical-align: text-bottom;
}
div.frame {
position: inherit;
padding: 0;
width: 100%;
border-top: 3px solid #FFFFF0;
border-bottom: 3px solid #FFFFF0;
background-color: #A0BCD7;
height: 350px;
}
div.frame2 {
position: inherit;
padding: 0;
width: 100%;
border-top: 3px solid #FFFFF0;
border-bottom: 3px solid #FFFFF0;
background-color: #F8A35F;
height: 100%;
}
div.frame3 {
position: inherit;
padding: 0;
width: 100%;
border-top: 3px solid #FFFFF0;
border-bottom: 3px solid #FFFFF0;
background-color: #BFC585;
height: 500px;
}
div#content {
margin: 0 20% 0 15%;
padding: 0;
width: 750px;
min-height: 350px;
height: auto;
position: relative;
}
div#pic {
margin: 0;
padding: 0;
width: 350px;
height: 350px;
float: left;
}
div#pic img { display: block;}
div#bodytext {
width: 380px;
height: 350px;
overflow: visible;
float: right;
padding: 5px 10px 0 0;
margin: 0;
}
div.footer {
font-size: .9em;
font: Arial, sans-serif;
}
#left {
margin-left: 15%;
padding: 0;
position: relative;
clear: both;
vertical-align: text-bottom;
}
#right {
margin-right: 15%;
padding: 0;
float: right;
position: relative;
top: -15px;
display: inline;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DT...al.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Venture Vault</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="header">
<div id="left">
</div>
</div>
<div class="frame2">
<div id="content">
<div id="pic">
<img id="createProfile" src="images/profile.jpg" alt="createProfile" name="createProfile" />
</div>
<div id="bodytext">
<h1><a href="../index.html">Create Your Profile Now</a></h1>
<p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p>
<h1><a href="../entrepreneurs.html">For Our Entrepreneurs</a></h1>
<p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p>
<p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p><p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p><p>Lorem ipsum dolor sit amet, consecteteur adipiscing elit. Quisque at magma.
Mauris et arcu. Suspendisse ultrices vivierra pede. Sed nec quam nec arcu placerat faucibus.
Etiam vitae runc. Curabitur lobortis nunc ac nunc. Ut arcu. Sed massa. In sed pede vitae lorem
pulvinar mollis. Etiam condimentum porta tellus.</p>
</div>
</div>
</div>
<div class="footer">
<div id="left">a division of <a href="www.masterplans.com" target="_blank">Masterplans, Inc.</a></div>
<div id="right"><a href="../sitemap.php">site map</a> | <a href="../privacy.php">privacy policy</a> | © 2007</div>
</div>
</body>
</html>
posted by:
|
Portland
|
Advertisement
Advertisement
-
First of all idint check this in ie... my pc is currently dismantled.
Ok what you are describing in IE is a bug, that whay its the only browser it works in (google "ie expanding box bug" for more info). So the way it renders in FF (what i looked at it in) is the proper rendering. Why? well #1 - you have position: relative; set on #content. when something has relative or absolute positioning or is a float it is taken out of normal flow. Thes means among other things its parent contenter does not expand with it - (except in ie) they are independent of one another.
You can tacle tis problem in most csaes by not defining a height for the parent elemnt that needs to expand with its child while also assigning it an overflow property of auto or hidden and a width.
