CSS Forum

**silverglade** · 04:12 PM

i thought my code was pretty simple i guess its not. i have a pink space below my content div in FF. i dont know how to get rid of it. any help GREATLY appreciated. thanks. derek no more scrolling btw. thanks

here is the page im talking about.

http://derekvanderven.com/about.html

here is the css to the page

Code:

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

body {
margin: 0;
padding:0;
background-color: #E0C8E8;
}


#wrapper {
overflow: auto;
margin: 0 auto 0 auto;
width: 998px;
 
}


 
     /**************************about code************************/
     
#about_wrapper {
overflow: auto;
margin: 0 auto 0 auto;
width: 998px;

 

}

#about_header {
margin: 0 auto 0 auto;
width: 998px;
 height: 300px; 
border-bottom: 3px solid black;
}

#about_content {
    width: 998px;
    background-color: #78747A;
    color: white;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 50px;
}

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

 

#about_footer {
margin: 0 auto 0 auto;
width: 998px;
 height: 61px;
 background-image: url(about_footer_round.png);
    background-repeat: no-repeat;
    
    }
#about_footer p {
text-align: center; 
    color: white;
    padding-top: 10px;
    padding: bottom: 10px;    
    }
    
    #about_footer a:link, #about_footer a:visited {
    text-decoration: none;
    color: pink;
    }
    #about_footer a:active , #about_footer a:hover {
    text-decoration: none;
    color: red;
    }
/*******************************index footer******************************/

#footer {
margin: 0 auto 0 auto;
width: 998px;
 height: 20px;
 background-color: #E0C8E8;
    
    }
#footer p {
text-align: center; 
    color: black;
    
    }
    
    #footer a:link, #footer a:visited {
    text-decoration: none;
    color: black;
    }
    #footer a:active ,#footer a:hover {
    text-decoration: none;
    color: red;
    }

and here is the html

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 href="mainsite.css" rel="stylesheet" type="text/css"/>
<title>Derek Van Derven Web Design</title>
</head>

<body><div id="about_wrapper"> 

<div id="about_header">

<img src="about_rounded.png" width="998" height="300" border="0" usemap="#Map"   />

<map name="Map" id="Map">
  <area shape="rect" coords="7,169,107,219" href="index.html" alt="home" />
<area shape="rect" coords="120,166,288,220" href="about.html" alt="about" />
<area shape="rect" coords="316,169,465,220" href="portfolio.html" alt="portfolio" />
<area shape="rect" coords="488,166,634,221" href="contact.html" alt="contact" />
<area shape="rect" coords="667,165,807,221" href="resume.html" alt="resume" />
<area shape="rect" coords="836,168,986,227" href="http://derekvanderven.com/mainsite.html" alt="painting" />
</map>
 
 </div><!--end about header-->

<div id="about_content"> <p>this is </p>
    <p>some sample text</p>
   </div>

<div id="about_footer"> <p> &copy;<a href="http://derekvanderven.com">Derekvanderven.com</a> </p>
</div><!--end footer div-->

</div>
<!--end wrapper-->

<!-- Start of StatCounter Code -->
<script type="text/javascript">
sc_project=3569481; 
sc_invisible=1; 
sc_partition=39; 
sc_security="7e526e75"; 
</script>

<script type="text/javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><div class="statcounter"><a title="free hit counter" href="http://www.statcounter.com/free_hit_counter.html" target="_blank"><img class="statcounter" src="http://c40.statcounter.com/3569481/0/7e526e75/1/" alt="free hit counter" ></a></div></noscript>
<!-- End of StatCounter Code -->
</body>
</html>

**silverglade** · 08:47 PM

also, my main page here http://derekvanderven.com/ the main image is going off to the left i dont know why. in IE6 and firefox. i tried<div style="text-align: center;"> and it worked only a little bit. any help greatly appreciated. derek

EDIT: i noticed that my browser was a little off after 3 hours, and i adjusted my monitor, and bingo it was centered. LOL> im a NEWB!
pink bar still showing up though.

**silverglade** · 07-18-2009, 10:05 AM

ok i figured out a fix finally for the pink space above my rounded image footer div in FF. i put the footer div in the content div, then i added background-color: pink; to the footer div, and bingo, rounded corners without the pink bar.

**KellyAX** · 07-21-2009, 03:22 AM

It is still purple/pink around the edges of your footer image. I suspect it is like this because the transparency in the corners of your *png file isn't completely blank (opaque) making the pink its hovering over darker.

Green (00FF00) + Semi-Transparent Image = Green (00AA00)