CSS Forum

**silverglade** · 07-23-2009, 04:12 PM

hi, i have two horizontal spaces in my page that are gray in firefox only and i dont know how to get rid of them. page looks fine in IE. any help greatly appreciated. thank you. derek.

here is the page im talking about.

http://academyoftalent.com/about.html

here is the css to the page

Code:

@charset "utf-8";
/* CSS Document */

body {
margin-bottom 50px;
padding: 0;
background-color: #333333;
}

#wrapper {
overflow: auto;
margin: 50px auto 0 auto;
width: 888px;

}

#header {
margin: 0 auto 0 auto;
width: 888px;
height: 113px;
 background: url(off_slices3/images/header.png) no-repeat;
 }
 
 #navigation { 
 margin: 0 auto 1px auto;
 width: 888px;
 height: 43px;
 
 }
 
#content {
 
margin: 0 auto 0 auto;
width: 888px;

background: url(off_slices3/images/front_background_text_09.png) no-repeat;
padding-top:255px;
 

}

#animation {
    width: 500px;
    height: 350px;
 
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
 
}

#footer {
    width: 888px;
    color: white;
    text-align: center;
    clear: both;
    margin-top: 75px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
 
 #footer a:link , #footer a:visited  {
text-decoration: none;
color: #333333;
}
#footer a:active, #footer a:hover {
text-decoration: none;
color: red;
}
/***********************************about us code***************************/

#about_content {
 
margin: 0 auto 0 auto;
width: 888px;

background: url(about_us/images/about_us_03.png) no-repeat;
background-color: #F7B9ED; 

}
#about_us_footer_img {
margin: 0 auto 0 auto;
width: 888px;
height: 55px;
background: url(about_us/images/footer.png) no-repeat;

}

#about_footer {
    width: 888px;
    color: white;
    text-align: center;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
 
 #about_footer a:link , #about_footer a:visited  {
text-decoration: none;
color: #333333;
}
#about_footer a:active, #about_footer a:hover {
text-decoration: none;
color: red;
}

#about_text {
margin: 0 auto 0 auto;
width: 600px;
color: black;
}

#about_text p {
text-indent: 20px;
padding: 20px;

}

#about_wrapper {
overflow: auto;
margin: 50px auto 0 auto;
width: 888px;

}

and here is the html for the paqe

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<link rel="stylesheet" href="music.css" type="text/css" charset="utf-8" />
<title>Academy of Talent</title>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<meta name="Keywords" content="Rockaway, Talent, talent show, music lessons, voice lessons, acting" />
<meta name="Description" content="Talent Academy of Rockaway" />
</head>

<body onload="MM_preloadImages('on_slices3/images/welcome_on.png','on_slices3/images/about_us_on.png','on_slices3/images/department_on.png','on_slices3/images/faculty_on.png','on_slices3/images/classes_prices_on.png','on_slices3/images/gallery_on.png','on_slices3/images/contact_on.png')">


<div id="about_wrapper">

<div id="header"></div>

<div id="navigation"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','on_slices3/images/welcome_on.png',1)"><img src="off_slices3/images/welcome_off.png" name="Image1" width="114" height="43" border="0" id="Image1" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','on_slices3/images/about_us_on.png',1)"><img src="off_slices3/images/about_off.png" name="Image2" width="117" height="43" border="0" id="Image2" /></a><a href="department.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','on_slices3/images/department_on.png',1)"><img src="off_slices3/images/department_off.png" name="Image3" width="144" height="43" border="0" id="Image3" /></a><a href="faculty.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','on_slices3/images/faculty_on.png',1)"><img src="off_slices3/images/faculty_off.png" name="Image4" width="116" height="43" border="0" id="Image4" /></a><a href="classes_prices.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','on_slices3/images/classes_prices_on.png',1)"><img src="off_slices3/images/classes_prices_off.png" name="Image5" width="176" height="43" border="0" id="Image5" /></a><a href="gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','on_slices3/images/gallery_on.png',1)"><img src="off_slices3/images/gallery_off.png" name="Image6" width="116" height="43" border="0" id="Image6" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','on_slices3/images/contact_on.png',1)"><img src="off_slices3/images/contact_off.png" name="Image7" width="103" height="43" border="0" id="Image7" /></a></div>

<div id="about_content">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;  </p>
  

</div><!--end content-->
<div id="about_us_footer_img">
<div id="about_footer">&copy; Talent Academy of Rockaway 2009&nbsp; &nbsp; &nbsp; (site design by <a href="http://derekvanderven.com">derekvanderven.com</a>)</div></div>
</div><!--end wrapper-->
</body>
</html>

**silverglade** · 07-24-2009, 02:14 PM

i fixed it with

margin: -15px auto 0 auto;

but i dont think thats a good fix.

**LadynRed** · 07-24-2009, 02:44 PM

Where did you make this fix Derek ?

**angele803** · 07-24-2009, 02:48 PM

I believe you are experiencing margin collapse. Even though you didn't specify a margin for your paragraphs, Firefox is adding a top and bottom margin for them. This is causing the paragraph to expand outside it's container. The way you dealt with it worked. The way I think a lot of people would handle it would be to add bottom padding to the parent div (which in your case would be #about_content). Even adding just 1px of bottom padding will fix it. Adding "overflow: auto" to the parent div also seems to work to fix this.

This is off the subject a little, but when I was looking through your code, I noticed that your conditional comment for the stylesheet link for IE6 and below was before your regular stylesheet link. You might want to put that below your regular stylesheet link. Otherwise, your fixes might get overwritten by your regular stylesheet.

**silverglade** · 07-24-2009, 05:17 PM

great thank you very much for clearing that up. also, hi ladynred

. i made the following newbie fix in my css

Code:

#about_us_footer_img {
margin: -15px auto 0 auto;
width: 888px;
height: 55px;
background: url(about_us/images/footer.png) no-repeat;
padding-top: 10px;

}

and it made the space go away by popping up the div. but i will keep in mind those other fixes. thanks very much!!. derek

**LadynRed** · 07-24-2009, 09:07 PM

That space you 'fixed' is actually coming from the last empty tag you have in the content space. If you remove that, or re-set the padding and/or margins on the tag, the space will go away and you can remove the negative margin you added.

**silverglade** · 07-24-2009, 09:51 PM

i removed the empty p tag in the content area and still got the space. so i put back the negative margin until i can figure out what im doing wrong. heh. sorry ladynred. i might have misunderstood your above post. thanks. derek

**LadynRed** · 07-25-2009, 07:56 PM

From what I can see in your code on the linked page (after re-load), the empty is still there.

However, even if you do NOT remove it, removing the default margins on the will remove the space - just set it like this: p{margin: 0;}. Once you do that, the space closes up and you do not need the negative top margin.

ALWAYS, re-set your default margins and padding to ZERO on all of you main page elements, and that includes the tag.

**silverglade** · 07-26-2009, 01:07 PM

holy cow ladynred. i think this is something major that i dont know how to do yet even after all this time. p{margin: 0;} worked!! but after i set the main divs their respective margins and padding etc, when do i reset them to zero in the css sheet? like i have

Code:

#about_text p {
 padding: 20px; 
text-indent: 20px;
}

or if i have

Code:

#about_content {
 
margin: 0 auto 0 auto;
width: 888px;

background: url(about_us/images/about_us_03.png) no-repeat;
background-color: #F7B9ED; 
padding-top: 100px;
}

i dont know where in the code to add those zero declarations? thank you for helping , any more advice GREATLY appreciated. thanks. this is something totally new. derek

**LadynRed** · 07-27-2009, 11:58 AM

Do a search for "CSS Reset", you'll find LOTS of info on resetting margins and padding in your css. Some of these resets reset everything, I use a modified version for my sites.