Background not transparent even though nothing is declared

HTML & CSS
1

Hi, I am working on a contact card that will slide out from the bottom of a page and so far all seems to be working but for some reason I amgetting a white background even though a color isn’t defined anywhere.

in the exampled code (striped to the basics) I’m trying to get the red box to slide up behind the main content area, this works fine.
But in production my content area has a png bg that has a shadow and for some reason the area that it takes up is still displaying white, I haven’t linked to the bg image as it is on a clients site but the problem is still occuring I have no bg color set on the main content area so the red box should be showing under the text but isn’t.

any ideas?

Here is all the code I am currently working with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{padding:0; margin:0; font-family:Arial, Helvetica, sans-serif;}
body{font-size:10pt;}

#main-content-container{width:986px; min-height:100px; padding:0 0 0 12px; margin:0 auto; overflow:hidden; position:relative; z-index:60; border-bottom:1px solid #111;}
#footer{width:974px; margin:0 auto; overflow:hidden; border-bottom:1px solid #d6d6d6;}
.card{background:#f00; padding:20px 0 0 20px; width:310px; height:185px; position:relative;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>

<body>

<div id="main-content-container">
<h2>Main container</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non massa nunc. Nullam tincidunt justo sit amet nunc vehicula posuere. Proin ornare vestibulum urna, eu luctus erat cursus vitae. Duis mollis, nunc quis lobortis lobortis, enim tortor euismod enim, vitae ultrices nisi lacus non augue. Sed venenatis tortor sit amet turpis commodo pellentesque. Morbi malesuada leo at ipsum faucibus ornare. Maecenas lacinia ultricies nibh eget malesuada. Etiam rhoncus enim ut lorem placerat rhoncus.</p>	
</div>
<div id="footer">

<div class="card">

</div><!-- /.card -->

</div><!-- /#footer -->
<script type="text/javascript">
$(document).ready(function(){
	$('.card').delay(400).animate({"margin-top":"-170px",}, 1000).stop();
});
</script>

</body>
</html>

P.S. I know everything should be external, this is purely for development at this stage

All help is really appriciated.

Thanks for looking.

2

The reason the red isn’t showing behind the content area is because of the overflow: hidden on the footer itself:

#footer {
  border-bottom: 1px solid #D6D6D6;
  margin: 0 auto;
  [COLOR="Red"]overflow: hidden;[/COLOR]
  width: 974px;
}

That prevents the red box being seen outside the footer. Is it needed for anything? If not, just remove it. :slight_smile:

3

I knew it had to be something really silly, I had gone through my original code and removed and replaced everything I thought It may have been, this must have been the only thing I overlooked it haden’t even crossed my mind, Thanks so much!

The ‘overflow:hidden’ is on there just to clear some floats, I guess I’ll have to use a clearing div sigh.

Thanks again.

4

Yes, every once in a while, overflow: hidden will bite you, but it’s easy to forget it’s there. :slight_smile:

Or, if you don’t want to mess with the HTML, you could use the “clearfix” method, something like this:

#footer:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility:hidden;
}														

#footer {display: inline-block;}

* html #footer {height: 1px;}
#footer {display:block;}
5

Thanks again, didn’t want to use the ‘global’ clearfix or add irrelivent html sothis works just fine thanks.