Hi
I've got a page with two divs which I want to appear vertically adjacent, i.e. one directly above the other. In IE it looks fine, but in Firefox a margin is inserted even when I have specified all margins to be 0. The only way I can get the margin to disappear is to put a border around the second div, which I don't want. Can anyone suggest how I can put this right? Thanks for any help you can offer.
The css is:
DIV#wrapper /*overall container for entire page*/
{
margin-left: auto;
margin-right: auto;
width: 760px;
text-align: left;
font-size: 1em;
}
div#topnavlist
{
margin: 0px 0px 0px 0px;
height: 30px;
BACKGROUND-COLOR: #efefc8;
}
div#innerwrapper
{
BACKGROUND-COLOR: #efefc8;
width: 760px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
The html is:
<div id="wrapper">
<div id ="topnavlist">
<p>some content here</p>
</div>
<div id="innerwrapper">
<p>some content here</p>
</div>
</div>Hi -
This is what I saw - see attached.
Originally, I was going to suggest that you set width
for the 2nd div, but it looks fine...
ElYour image shows the same as what I get.
If I remove the height setting from the first div that seems to stop the gap appearing - I don't know if this provides any clues as to where the problem lies. Unfortunately it doesn't solve the problem as I need to specify the height.
I've got a page with two divs which I want to appear vertically adjacent, i.e. one directly above the other. In IE it looks fine, but in Firefox a margin is inserted even when I have specified all margins to be 0. The only way I can get the margin to disappear is to put a border around the second div, which I don't want. Can anyone suggest how I can put this right? Thanks for any help you can offer.
The css is:
DIV#wrapper /*overall container for entire page*/
{
margin-left: auto;
margin-right: auto;
width: 760px;
text-align: left;
font-size: 1em;
}
div#topnavlist
{
margin: 0px 0px 0px 0px;
height: 30px;
BACKGROUND-COLOR: #efefc8;
}
div#innerwrapper
{
BACKGROUND-COLOR: #efefc8;
width: 760px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
The html is:
<div id="wrapper">
<div id ="topnavlist">
<p>some content here</p>
</div>
<div id="innerwrapper">
<p>some content here</p>
</div>
</div>Hi -
This is what I saw - see attached.
Originally, I was going to suggest that you set width
for the 2nd div, but it looks fine...
ElYour image shows the same as what I get.
If I remove the height setting from the first div that seems to stop the gap appearing - I don't know if this provides any clues as to where the problem lies. Unfortunately it doesn't solve the problem as I need to specify the height.