Gap between divs in Firefox

clearchannel
clearchannel used Ask the Experts™
on
Hey guys

I come across this ssue every once in a while and I always forget how to fix it...spacing issue between some divs in Firefox that doesn't show in IE. I understand it is due to IE collapsing the margins or padding but not how to fix it.

Thanks
PAGE HTML
--------------------
<div id="wrapper">
  <div id="header">
  	<div id="bbrlogo"><a href="/default.asp"><img src="/imgs/layout/bloodball_logo.png" width="291" height="57" border="0" /></a></div>
  </div>
  <div id="navigation"><!--#include virtual="/includes/nav.asp"--></div>
  <div id="contentwrappertop"><img src="/imgs/layout/content_top.jpg" alt="" width="960" height="10" /></div>
  <div id="contentwrapper">
    <div id="rightcolumn">
<h2>Latest news</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. <a href="#">More...</a></p>
<p>&nbsp;</p>
</div>
    <div id="leftcolumn">
      <h1>Snake Room</h1>
    </div>
    <br class="clearFloat" /><br />
  </div>
  <div id="contentwrapperbottom"><span class="top"><img src="/imgs/layout/content_bottom.jpg" alt="" width="960" height="10" /></span></div>
  <div id="footer">
    <!--#include virtual="/includes/footer.asp"-->
  </div>
</div>
 
 
HTML for rounded black box
------------------------------------
<div class="roundedBox">
    <div class="roundedTop"><img src="/imgs/forsale/roundedtop.jpg" width="594" height="10" alt="RoundedTop" /></div>
    <div class="roundedMiddle"> <!-- TABLECONTENT HERE--></div>
    <div class="roundedBottom"><img src="/imgs/forsale/roundedbottom.jpg" width="594" height="14" alt="RoundedBottom" /></div>
  </div>
 
CSS
--------------
<!--
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}
 
body {
  background-color: #000;
  color:#333;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 13px;
  margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
  padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  text-align: center; /* Centers the page content container in IE 5 browsers. */
  background-image:url(/imgs/layout/body_bg.jpg);
  background-repeat:repeat-x;
  background-position:top left;
}
p,td{font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 13px;}
/* Commonly used to style page titles. */
h1 {
  color: #ff0000;
  font-size: 17px;
  font-weight: bold;
  line-height: 19px;
}
/* Commonly used to style section titles. */
h2 {
  color: #ff0000;
  font-size: 15px;
  font-weight: bold;
  line-height: 17px;
}
h3{
  color: #333;
  font-size: 13px;
  font-weight: bold;
  line-height: 15px;
}
 
#wrapper {
  margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
  text-align: left; /* Redefines the text alignment defined by the body element. */
  width: 960px;
  padding:0px;
}
#wrapper #header {
  padding: 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  margin:0px;
  height:125px;
  min-height:125px;
}
#wrapper #header #bbrlogo{padding-top:30px; margin-left:10px; width:291px;}
#wrapper #navigation {
  margin-top:5px;
  height: 20px;
  padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#wrapper #navigationmsg {padding:5px 0px; margin-left:10px; color:#fff; font-size:10px;}
#wrapper #contentwrappertop{margin:0px; padding:0px;}
#wrapper #contentwrapper{background-color:#fff; margin:0px; padding:0px;}
#wrapper #contentwrapper #rightcolumn {
  border-left: solid 1px #ccc; /* Sets the left border properties for an element using shorthand notation */
  float: right;
  padding: 0px 20px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  width: 270px;
  margin-top:10px;
}
#wrapper #contentwrapper #leftcolumn {
  margin: 0 310px 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
  padding: 10px 20px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#wrapper #contentwrapper #singlecolumn{
	padding: 10px 20px; 
}
#wrapper #contentwrapper .clearFloat {
  clear: right;
  display: block;
}
#wrapper #contentwrapperbottom{margin:0px; padding:0px;}
#wrapper #footer {
  margin-top:10px;
  padding: 5px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  color:#fff;
  font-size:10px;
}
 
.roundedBox{width:594px; color:#fff;}
.roundedTop{}
.roundedMiddle{padding:0px 14px 0px 10px;background-image:url(/imgs/forsale/roundedmiddle.jpg); background-repeat:repeat-y; color:#fff;}
.roundedBottom{}
-->

Open in new window

divspacing.jpg
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
can you post the images also? or a link where the complete page can be found?
what version of firefox are you using?
the solution i came up with is to set the height:11px for the div id=contentwrappertop

hope this helps
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Seems the height issue fixed it :) Thanks.

Author

Commented:
Hmm but what about the bottom spacing on the large white area?
http://bloodballreptiles.com.ourwindowsnetwork.com/contact-us.asp
 
Consultant & Challenge Subduer
Top Expert 2009
Commented:
Give "#contentwrapperbottom img" display:block

This explains the cause of the gaps: http://gtwebdev.com/workshop/gaps/image-gap.php

Author

Commented:
Awarded Kravimir more points as his solution is the actual correct method.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial