gap in between divs in firefox

Hi there.

I'm working on a website and I have tested in both IE 7, and Firefox v2.

In IE it looks as intended, but in Firefox, there is a gap between the
customer menu (with lime green background), and the Top Menu bit (above the
lime green). The customer menu in the css is #user_title. The top menu is
#topmenu

Similarly, right at the bottom, in between the end of the content, and the
footer, there is a white gap.

I'm not too sure why it is appearing. Below are links to screenshots of each
(sorry I haven't got an upload of the actual site). Also, i've attached my CSS
file to this post.

http://www.lindendesign.co.uk/ie.jpg

http://www.lindendesign.co.uk/firefox.jpg

If anyone can help me get rid of the gaps, that would be great!

Thanks,

Craig

body {
margin-top:0;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

#wrapper {
min-width: 770px;
max-width: 1024px;
margin: 10px auto;
background: #fff url(../images/body_shadow_L.gif) repeat-y left top;
}

.wrapper {
margin: 0;
padding: 25px 40px; /*--Padding inside of the main content--*/
overflow: hidden;
font-size: 1.2em;
}

#banner {
margin-left:10px;
height: 135px;
background-image:url(http://www.ldhosts.co.uk/host/test/images/banner.jpg);
background-repeat:no-repeat;
background: #FFFFFF url(../images/body_shadow_R.gif) repeat-y right top;
}

#topmenu {
margin-left:10px;
height:30px;
background: #999 url(../images/body_shadow_R.gif) repeat-y right top;
}

#content {
margin-left:10px;
min-width: 770px;
max-width: 1024px;
line-height: 1.2;
background: #F4F4F4 url(../images/body_shadow_R.gif) repeat-y right top;
}

#content p {
font-size: 100%;
margin-left: 10px;
margin-right: 10px;
}

#content h2 {
font-size: 120%;
margin-top: 5px;
margin-left: 10px;
}

#user_title {
margin-left:10px;
height:40px;
background: #00FF00 url(../images/body_shadow_R.gif) repeat-y right top;
}

#user_title h1{
font-size: 120%;
margin-left: 10px;
padding-top: 10px;
}

#user_menu {
margin-left:10px;
background: #999999 url(../images/body_shadow_R.gif) repeat-y right top;
}

#user_menu ul{
display:block;
padding:0;
padding-bottom: 5px;
margin: 0;
text-align:center;
}

#user_menu ul li{
display:inline;
}

#user_menu ul li a{
color:#000;
text-decoration:none;
padding: 0px 15px 0px 15px;
width: 9em;
}

#user_menu ul li a:hover{
color:#000000;
background-color:#CCCCCC;
}

#footer {
margin-left:10px;
height: 15px;
background: #666 url(../images/body_shadow_R.gif) repeat-y right top;
}

#footer p{
margin-left:10px;
color:#CCCCCC;
}

Don't you have a test folder on your server you could upload your page and
supporting files to? Screenshots don't tell us anything. We'd have to see
the page (CSS & HTML) to give better answers. As a guess, try adding this
to your CSS:

/**this zeros out default browser padding, margins, line-height on
everything**/
* {padding:0; margin:0; line-height:1;}

-- Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/

hi there.

thanks for the replies.

i shall try and upload it tomorrow and ill post the links on here.

regards

craig

Hi there.

I uploaded it to a test server.

The address is http://www.lindendesign.co.uk/test/templates/header.html

If anyone could help, that would be great.

Regards,

Craig

..oO(craig_shaw)

I uploaded it to a test server.

The address is http://www.lindendesign.co.uk/test/templates/header.html

If anyone could help, that would be great.

In your CSS rule for "#user_title h1" change this

margin-left: 10px;

to this

margin: 0 10px;

The gap was caused by the h1 default top margin. Because of a feature
called collapsing margins it was sticking out of the #user_title div.
The new declaration takes care of this and sets both the top and bottom
margin to zero.

BTW: The result in FF was the correct one, IE got it wrong (as usual).

Micha

Excellent!

Thank you very much for the help!!!

Regards,

Craig