Gaps beteen div/s help!

1

hi, i’ve been trying to figure this one out for the past 2 days now without any results.

i have a header/content/footer div all good, but once i put text/content in it starts to break apart…making a gap between the div/s. it works how i wanted in IE but it’s not working in firefox.

does anybody know why this is happening?

thanks inadance.

2

Do you have a link? Would be easier for us!

3

remove any height: ----; definitions.

post a link

4

Thanks for the reply guys. however the site has not been uploaded yet, still on my machine.

If i remove the height from the div/s then background image within the div/s get cut off. Why is it doing that? Please help!

5

It could be lots of different things. We need to see the code to figure it out. In the meantime, download the firebug toolbar for firefox. It allows you to explore the structure by mousing over a div and displays the relevant css information. Also, you can change the css on the fly within the browser to instantly see how it affects layout. It is any web designers best friend.

6

Yea do what djheru suggests

Other than that, if its still on your machine, and you intend to keep it there, we will not be able to help you.

We can’t read minds, especially since HTML & CSS problems can only be fixed if we see your code.

7

I will post the codes when i get home. Thanks

8

here are my codes.

<body>
<div id=“main-nav”>
<ul>
<li>home</li>
<li>about us</li>
<li>promotion</li>
<li>products</li>
<li>links</li>
<li>contact</li>
</ul>
</div>

<div id=“container”>
<div id=“flash”>
<p>some text goes in here</p>

</div>

<div id=“quick-links”></div>
<div id=“contents”>
<h1>SOME TITLE</h1>
</div>
</div>
<div id=“footer”></div>
</body>
</html>

CSS

body {
background-color: #8f8a84;
margin: 10px;
font-family:“Lucida Grande”,arial;
}

#container {
background-image: url(images/bg.jpg);
background-repeat: repeat-y;
width: 832px;
margin: auto;
}

a:link { color: #B52C07; }

a:visited { color: #600; }

a:hover, a:active {
color: #fff;
background-color: #B52C07;
}

#main-nav {
background-image: url(images/main-nav.png);
background-repeat: no-repeat;
width: 832px;
height: 72px;
margin: auto;
}

#main-nav ul {
margin: 0 0 0 40px;
padding-top: 20px;
list-style-type: none;
}

#main-nav li {
display: inline;
margin-left: 0px;
padding: 0 10px;
}

#main-nav li a {
text-decoration: none;
color: #272900;
}

#main-nav li a:hover {
text-decoration: none;
color: #fff;
background-color: #272900;
}

#flash {
width: 800px;
height: 140px;
margin-top: 0px;
margin-left: 15px;
margin-right: 16px;
margin-bottom: 10px;
background-color: #99FF66;

}

#quick-links {
width: 250px;
height: 300px;
background-color: #CC6600;
float: right;
margin-right: 20px;
margin-top: 10px;
}

#contents {
width: 500px;
height: 500px;
background-color: #3366FF;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;

}

#footer {
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
width: 832px;
height: 113px;
margin: auto;
}