473,320 Members | 1,939 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Div Issues in FireFox

27
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
1 1706
drhowarddrfine
7,435 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

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

Similar topics

5
by: lkrubner | last post by:
Go to this page: http://www.publicpen.com/designer/mcControlPanel.php?arrangement=createweblogsForm.php You'll need to login, use these: username: designer password: designer123 This is...
1
by: mboso | last post by:
I have a function that works in firefox, but is having some issues in IE. What it does is place an image in a specified cell, when an icon in the adjacent cell is clicked. I have to click the link...
11
by: sllrphoto | last post by:
A veteran of early html, I've modified my blog template and made it look rather clean (albeit rather plain) when viewed with IE. Ironically, I'm a big Firefox fan, but when viewed in FF, my blog...
8
by: golfchick | last post by:
Well im at the end of my teather, ive been searching for an answer to no avail. Ive used suggested html and css checkers both say my code is perfect and yet there seems to be a distinct difference...
10
by: Christopher Nelson | last post by:
I've been developing a little web page full of JavaScript while using Firefox and it works well but when I try to view it in Opera and IE, it's incomplete. I suspect cross-browser issues in the...
3
by: DanWeaver | last post by:
I have a panel on an asp page that has about 20 controls on it, an ajax update panel within it- text boxes, listboxes, imgbuttons etc. I would like to be able to copy this panel- ie put similar but...
3
by: GaryDean | last post by:
If you go to my website, www.deanblakely.com, in I.E. you will see that it displays fine but if you browse it in FireFox 1.7 you will see stuff on the Master Page that is not alligning right. I...
1
by: John Nagle | last post by:
I'm having problems with excessive line spacing in FireFox. This seems to happen when "line-height" is set to "normal" when a large font is in effect, then there's a font change to a smaller font...
2
by: rachel2008 | last post by:
hi everyone i am having difficulty working out what the issues are within my code that are causing it to display badly within firefox and IE 7 i have tried many angles but due my inexperience i...
2
by: jdvictor | last post by:
Understandably I know that the real issue is in IE but at the moment everything looks good in IE and not Firefox. THE PROBLEM The problem that I am having is that my navigation menu is out of...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.