Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    18
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Heading container not sticking to top of its container

    Hi There -

    Have a simple container div containing two other divs, top and content.

    My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know.

    Any help you can give me would be greatly appreciated. Thanks!

    Code:
    <body>
    
    <div class="colorbox">
    
      <div class="colorboxtop">
        <h2>title goes here</h2>
      </div><!-- /colorboxtop -->
    
      <div class="boxcontent">
        <p>You should read this and <a href="#">Click Here</a>.</p>
        <a title="Go Here!" href="#">[button]</a>
      </div><!-- /boxcontent -->
    
    </div><!-- /colorbox -->
    
    </body>
    No great complexity there...here's the CSS:

    Code:
    body {
    	color:#666666;
    	font-family:Lucida Grande,Verdana,sans;
    	font-size:10px;
    	font-size-adjust:none;
    	font-style:normal;
    	font-variant:normal;
    	font-weight:normal;
    	line-height:13px;
    }
    
    .colorbox {
    	margin-bottom:9px;
    	padding-bottom:15px;
    	width:300px;
    	border:thin solid #CCCCCC;
    }
    
    .colorbox h2 {
    	color:#FFCC33;
    }
    
    .colorbox {
    	color:#CC6633;
    	padding:0px 20px 15px;
    	margin-top:0;
    	margin-bottom:10px;
    }
    
    .colorboxtop {
    	background-color: #dddddd;
    	height:50px;
    	color:#666666;
    	background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
    	padding:auto 20px;
    }
    
    .colorbox a {
    	color:#C5DBE9;
    	font-weight:bold;
    	text-decoration:none;
    }

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    First I see two different styles for colorbox. Your colorboxtop has no positioning. You're leaving it to the browser and you've included padding auto and 20px. Remove that and tryp absolute positioining.

    Code:
    colorboxtop{
            position:absolute;
            top:0;
            left:0;
    	background-color: #dddddd;
    	height:50px;
    	color:#666666;
    	background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
    }
    See if that helps.
    Scott Stewart
    Always happy to learn from pros.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,702
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    No, please no absolute positioning. Most likely it’s the collapsing margins of the headline that is causing the gap.

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    What's wrong with absolute positioning? I have tried everything else and that is the only way I can get things to line up properly. I know fixed positioning is a problem and I can't get px or em to do the job. If there is something I should know about absolute then I am all ears (or eyes in this case).
    Scott Stewart
    Always happy to learn from pros.

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    I agree with VIPStephan, that gap is more than likely the top margin of .colorbox collapsing into the top margin of the h2. If you set the top-margin of the H2 to 0 you'd likely lose the gap.

    I think the big problems with absolute positioning are they take the content out of normal flow, which can make flexible designs problematic, and also the fact that making absolutely positioned elements behave in the context of most layouts requires relatively-positioned parents which can incur some hard-to-track bugs in IE6.

  • #6
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Are you having the problem in IE by chance? If so, try removing the whitespace between the two divs and see if that cures it. Be sure to refresh the page or dump your cache.

    Actually, this may only work if you have an image in the div.

    Code:
    <div class="colorbox">
     Get rid of this space
      <div class="colorboxtop">
    Gary
    Last edited by garydarling; 09-26-2007 at 05:40 AM. Reason: Brain fart


  •  

    Posting Permissions

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