467,074 Members | 970 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,074 developers. It's quick & easy.

Div Issues in FireFox

I have a page with the following code:
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link type="text/css" rel="stylesheet" href="styles/default.css" media="screen" />

<title>Untitled Document</title>

</head>

<body>

<div id="header">

<p>&nbsp;</p>

<ul id="nav">

</ul>


</div><!--/header -->

<div id="content-wrap">

<div id="bottom-background">

<div id="content">

<div class="post">

<h2>content - post</h2>

<p>Lorem ipsum </p>

</div><!--/post -->

<div class="post">

<h2>content - post</h2>

<p>Lorem ipsum </p>

</div><!--/post -->

</div><!--/content -->

<div id="sidebar">

<br />
<br />

<ul id="project_accordian">

<li>
<ul class="project_nav">
<li class="project"><h4>project 1</h4></li>
</ul>

<div class="project_nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>
</li>

<li>
<ul class="project_nav">
<li class="project"><h4>project 2</h4></li>
</ul>

<div class="project_nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>

</li>

<li>
<ul class="project_nav">
<li class="project"><h4>project 3</h4></li>
</ul>

<div class="project_nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>

</li>

<li>
<ul class="project_nav">
<li class="project"><h4>project 4</h4></li>
</ul>

<div class="project_nav_content">
<a href="#"><img src="images/project-frame.gif" height="200" width="267" alt="frame" /></a>
</div>

</li>

</ul><!--/project_accordian -->

</div><!--/sidebar -->

</div> <!--/bottom-background -->

</div>
<!--/content-wrap -->

<div id="footer">

<div id="footer-wrap">

<div id="footer-col1">

<h3>footer-col1</h3>

<p>Lorem ipsum </p>

</div><!--/footer-col1 -->

<div id="footer-col2">

<h3>footer-col2</h3>

<p>Lorem ipsum .</p>

</div><!--/footer-col2 -->

<div id="footer-col3">

<h3>footer-col3</h3>

<p>Lorem ipsum </p>

</div><!--/footer-col3 -->

</div>
<!--/footer-wrap -->

</div>
<!--/footer -->

</body>

</html>[/HTML]

here is the css:

/*--------------------------------------------------------------------------------*/

* {padding: 0; margin: 0;}

body {
font: 75%/160% Arial, Helvetica, sans-serif;
background-color:#3E4B3E;
background-image:url(../images/backgroundCircles.gif);
background-position: top center;
background-repeat:no-repeat;
}

/*--------------------------------------------------------------------------------*/

#header {
height: 440px;
width: 960px;
margin: 0 auto;
position: relative;
}


#header h1 {
position:absolute;
left: 444px;
top: 22px;
width:330px;
height:133px;
line-height:25px;
}


/* content wrap
---------------------------------------------------------------------------------*/
#content-wrap {
width: 960px;
margin: 0 auto;
background-image:url(../images/middle-repeat.gif);
background-position: top left;
background-repeat:repeat-y;
position:relative;
}

#content {
width: 500px;
float: left;
padding: 35px 0 20px 94px;
z-index: 5;
position:relative;
}
#bottom-bg {

}

/* post
---------------------------------------------------------------------------------*/
.post {
width: 490px;
}

.post p{
padding-top:10px;
}

.post h2 {
height:38px;
line-height:38px;
padding-left:50px;
color:#D1D4BC;
font-size:20px;
background-image:url(../images/header-bg.jpg);
background-position:top left;
background-repeat:no-repeat;
}

/* sidebar
---------------------------------------------------------------------------------*/
#sidebar {
width: 267px;
float:right;
z-index: 5;
overflow: hidden;
position:relative;
top: 0px;
right:80px;
}

.project_nav, .project_nav_content {
padding: 0;
margin: 0 0 5px 0;
}
/* footer
---------------------------------------------------------------------------------*/
#footer {
clear: both;
}

#footer-wrap {
width: 960px;
height: 400px;
margin: 0 auto;
background-image:url(../images/footer-main-bg.gif);
background-position:top left;
background-repeat:no-repeat;
}


#footer-wrap p{
padding-top:10px;
}

/* footer-col1 */
#footer-col1 {
width: 240px;
float: left;
padding: 23px 5px 0 108px;
}

/* footer-col2 */
#footer-col2 {
width: 240px;
float: left;
padding: 23px 5px 0 0;
}

/* footer-col3 */
#footer-col3 {
width: 240px;
float: left;
padding-top: 23px;
}



This is I am having is that the bg image for the content-wrap div is not show correctly. It seems the content-wrap div is not straching in relation to the divs within it.

Any Ideas?
Feb 4 '08 #1
  • viewed: 1526
Share:
1 Reply
drhowarddrfine
Expert 4TB
Firefox is performing correctly. Parent elements are never to expand to contain floated elements. You are probably seeing IE expand but this is an IE bug and another reason to never use IE as a reference for how things work.

To get proper, modern browsers to do what you want, add 'overflow:auto' to the containing element.
Feb 4 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by mboso | last post: by
11 posts views Thread by sllrphoto@yahoo.com | last post: by
10 posts views Thread by Christopher Nelson | last post: by
3 posts views Thread by DanWeaver | last post: by
3 posts views Thread by GaryDean | last post: by
2 posts views Thread by rachel2008 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.