SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background not transparent even though nothing is declared

    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:

    Code:
    <!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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The reason the red isn't showing behind the content area is because of the overflow: hidden on the footer itself:

    Code:
    #footer {
      border-bottom: 1px solid #D6D6D6;
      margin: 0 auto;
      overflow: hidden;
      width: 974px;
    }
    That prevents the red box being seen outside the footer. Is it needed for anything? If not, just remove it.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yes, every once in a while, overflow: hidden will bite you, but it's easy to forget it's there.

    Quote Originally Posted by sheferd View Post
    I guess I'll have to use a clearing div *sigh*.
    Or, if you don't want to mess with the HTML, you could use the "clearfix" method, something like this:

    Code:
    #footer:after {
      content: ".";
      display: block;
      clear: both;
      height: 0;
      visibility:hidden;
    }														
    
    #footer {display: inline-block;}
    
    * html #footer {height: 1px;}
    #footer {display:block;}

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, didn't want to use the 'global' clearfix or add irrelivent html sothis works just fine thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •